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.
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
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
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.
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.
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.
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.
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).
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.
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.
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.
An excellent Sass mixin created by Hugo Darby-Brown that will help you create amazing and great-looking shadows.
SVGeneration is a very useful tool that generates high quality SVG images ready to use in CSS backgrounds.
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.
Until next week