frontendmatters

CSS Stacking Contexts

Thu, 01 Oct 2015 17:43:04 +0000

Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then:

Children of a stacking context are painted from bottom to top in the following order.

Elements with a negative stack level, typically elements with z-index: -1

Elements with a position value of static.

Elements with a stack level of 0, typically positioned elements with a z-index value of auto.

Elements with positive stack levels, e.g. a positioned element with a z-index value of 1 or higher.

Direct Link to Article — Permalink

CSS Stacking Contexts is a post from CSS-Tricks

Image Diffing in CSS

Thu, 01 Oct 2015 17:36:39 +0000

A bonafide CSS trick by Franklin Ta. Position the images on top of each other at 50% opacity and inverted colors. Or, as Bennett Feely pointed out, use background-blend-mode: difference; if they are background images.

Direct Link to Article — Permalink…

Image Diffing in CSS is a post from CSS-Tricks

28 Powerful Open Source CSS Frameworks & Libraries

Thu, 01 Oct 2015 14:03:46 +0000

Web Developers who work smart are often building on top of pre-existing frameworks. Open source CSS libraries are not hard to find – including many of the newer CSS3 effects. When structuring an HTML page you’ll rely on CSS as the language of color, position, structure, and other components of the final layout.

This gallery includes 28 free open source frameworks you can try out when designing new projects. You’ll find a number of CSS grid systems along with extra goodies like CSS UI kits or transition libraries. It’s never been easier to learn how to build websites from scratch. Open source code is changing the way we structure projects and how much development time is required.

Responsive Grid System

Profound Grid

Responsive.gs

Pure CSS

Workless

Twitter Bootstrap

Skeleton

960 Grid System

Columnal

Blueprint

Toast

Kube

Topcoat

InK

Animate.css

Gumby

UIkit

Amazium

Cascade Framework

Print.css

Metro UI CSS

Tuktuk

Clank

Ivory

Jeet Framework

Baseline CSS

Flaminwork

Foundation

List of SVG Properties You Can Manipulate with CSS

Tue, 29 Sep 2015 13:06:56 +0000

The strange thing about using CSS to style SVG elements is that only certain properties can be used, depending on the element. For instance, you can set the fill on a <polygon>, but not the points.

The W3C has a list of properties that outlines which SVG properties can be manipulated by CSS.

Direct Link to Article — Permalink…

List of SVG Properties You Can Manipulate with CSS is a post from CSS-Tricks

ESLint: The Next-Generation JavaScript Linter

Tue, 29 Sep 2015 10:58:56 +0000

It was the summer of 2013 and I was working on a project for my employer, Box. I had just finished wiring up JSDoc as a nightly build using a plugin to detect T3 patterns in our code and document them automatically. It occurred to me that these patterns might be easy to get wrong, and I started looking for a way to automatically detect incorrect patterns. I immediately turned to JSHint because we were already using it and I thought it could support plugins. Unfortunately, it could not.

Still, I couldn’t get the idea of a linter with pluggable runtime rules out of my head. I had just spent a bunch of time learning about Esprima and abstract syntax trees (ASTs), and I thought to myself, “It can’t be all that hard to create a pluggable JavaScript linter using an AST.” It was from those initial thoughts that ESLint was born.

The post ESLint: The Next-Generation JavaScript Linter appeared first on Smashing Magazine.

Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD)

Mon, 28 Sep 2015 12:57:53 +0000

Today we’re happy to release a new Smashing freebie: 18 lovely world landmark icons such as the London Eye, the Eiffel Tower or the Empire State Building. The icons are detailed enough to show architectural elegance but without adding chaos. They're designed to work best in both digital and print media.

The post Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD) appeared first on Smashing Magazine.

Cheatsheet: Photoshop Keyboard Shortcuts

Mon, 28 Sep 2015 10:00:58 +0000

This useful cheatsheet shows the keyboard shortcuts for important Adobe Photoshop CS6 commands.

View Larger Version

Note: For Photoshop commands that are displayed in blue, such as "Quit", "Close", and "Merge Layer", you must also press Ctrl on Windows or Command on Mac OS. For example, to issue the "Quit" command, press Ctrl + Q if you’re on Windows or Command + Q if you’re on Mac OS.

This excellent resource is by ZeroLag. ZeroLag provided me with a special version of their existing Adobe Photoshop CS6 Shortcuts Cheatsheet. The version I posted here doesn’t display their logo.

Chrome, Firefox, Safari, Opera, Edge? Impressive Web Browser Alternatives

Wed, 23 Sep 2015 19:32:46 +0000

It’s 2015 and your choice of browser has proven to be as important as your choice of operating system. Dedicated apps may be competing against browsers on mobile devices, but that is hardly the case in the desktop environment. On the contrary, each year more desktop browsers appear, and some of them can change the way you browse the Internet for the better.

Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the world’s desktop browser market. Whichever statistics you check (NetMarketshare, StatCounter’s GlobalStats or W3Counter), you’ll notice that they often contradict each other in declaring which browser is leading the race. However, no matter which method is used to determine usage share, all sources agree that those five browsers do not own 100% of the world’s desktop browser usage. They may be the most popular, but they are not the only options available for accessing the Internet. So, what about the remaining share?

The post Chrome, Firefox, Safari, Opera, Edge? Impressive Web Browser Alternatives appeared first on Smashing Magazine.

Can you smell it? Javascript is at a turning point.

Mon, 14 Sep 2015 18:25:19 +0000

Things are going fast in front-end, when I think my back about my 10 years careers, I would say the 6 first years were pretty calm, we had jquery & plugins, and were living a small life. But last 4 years went really fast, always getting better and better tools to do, really, anything you want in javascript, you’re not bound only to the web anymore.

Still tools you picked up along the way you still can use them today. I’m a backbone/grunt guy, I did not get into any other framework bandwagon and until now my tools served me well.

The way I see it that’s all about to change, with ES6, ES7 and Babel, the language is about to be transformed drastically. With frameworks like Angular2, Aurora & React taking advantages from the new language features and new front-end programming paradigm to better handle UI states, I feel that yet again we are leaving another era and the community will shift to new high.

Can you feel it? There’s something in the air and that’s not necessarily a bad thing, to the next 5 years!

Infographic: 69 Web Design Tips

Mon, 24 Aug 2015 10:00:28 +0000

This infographic was first published on PSDtoWP.net.

This infographic will remind you about the important web design do’s and don’ts when creating websites. There are tips in this infographic for every level of expertise and for every part of the website design and development process.

View Larger Version