Issue #71

August 9, 2013

Headlines

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

Sergey Chikuyonok

LiveStyle is a plugin for live bi-directional CSS editing. It takes a completely different approach on updating CSS. Unlike other live editors, it doesn’t simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other. In this article Sergey Chikuyonok looks at the current state of live edit tools, explains how LiveStyle works, how it will change your workflow and what can we expect from it in the future.

The “Other” Interface: Atomic Design With Sass

Robin Rendle

Atomic design is methodology for creating design systems. In a nutshell, it suggests not relying on components, but instead on small modules — components are then created by combining these fundamental building blocks together. This approach could significantly improve (re)usability and human-readability of our code.

From our sponsor

Take Your Programming Skills To The Next Level

Hack Reactor is the premiere Bay Area coding academy with instructors from Google, Twitter, OKCupidLabs and more! Our alumni work for brand name tech companies like Salesforce, Groupon, SlideShare/LinkedIn and revolutionary startups.

Articles & tutorials

Language-wide Features in CSS

Louis Lazaris

Louis Lazaris gives a nice overview of CSS language-wide features (including a few that are brand new in the spec) that can be immensely useful in some specifc code situations. He looks at inherit, initial, unset and all keywords and explains how they work.

Speed up your CSS framework install with Yeoman

Flo Preynat

Yeoman is a collection of amazing tools and best practices that will significantly improve your development workflow. In this article Flo Preynat shows how to install it and run it.

Creating a 3D Cube Image Gallery

Kushagra Gour

Kushagra Gour created a fun and interactive 3d cube image gallery (with pure CSS). In this article he explains concepts of 3d transforms and how exactly the 3d cube works.

Introduction to Topcoat

Chris Griffith

Topcoat is a new open source component library focused on performance by Adobe. In this article Chris Griffith introduces the CSS-based components, icons and other features offered by this UI library.

Six Ways of Centering With CSS

Dudley Storey

Dudley Storey shows six techniques for centering content with CSS. This article could be your go-to source when you’re having troubles with centering elements (and let’s face the fact that centering elements vertically can still give us headaches).

Spacing The Bottom of Modules

Chris Coyier

Chris Coyier explores a very interesting challenge we’re all facing when dealing with modules — how to most effectively get rid of excessive space at the bottom to make the modules consistent.

Jobs

World Class Web Designer

Booking.com – planet Earth’s #1 accommodation website – is looking for the world’s smartest designers. Good in HTML & CSS? You’ll be given the freedom to make meaningful and measurable improvements impacting millions of people. You’ll join us at our beautiful Amsterdam HQ. We’ll help you relocate.

Senior Product Designer (m/f) in Berlin

You’ll be working with different teams to improve the experience & create new innovative products for our customers. You’ll have a lot of ownership & responsibility as you’ll be working on our most important channels. You’ll be defining the future of all of our other design efforts across the board.

Tools

Shade - Ultimate Shadow Mixin

Hugo Darby-Brown

An excellent Sass mixin created by Hugo Darby-Brown that will help you create amazing and great-looking shadows.

SVGeneration

SVGeneration is a very useful tool that generates high quality SVG images ready to use in CSS backgrounds.

Inspiration

Pure CSS3 Gran Turismo

Xpressive Team

This experiment can serve as a proof that it’s actually possible to create promo videos with pure CSS. Of course, having a great tool that simplifies the work can be of crucial importance in this process. Expressive, a CSS design tool used to create this demo, seems to be one of these tools.