Issue 134
CSS Variables, when and why to use the order property, white space in web design and a history of responsive design.
News
Issue 134
I've been working on a presentation that I'll be giving at the UX Immersion: Interactions conference, all about the interesting new things in CSS for designers. It is a rapid tour through things like layout, blend-modes, variables, CSS Shapes and more. I've done similar presentations in the past, and going back through my notes I love the fact that so many things I showed as "coming soon" features a year ago, now have really great browser support. In addition to this talk, I'll be giving a full day workshop on the conference. I'm looking forward to it.
The range of articles this week is perhaps influenced by looking at so much different CSS while working on that talk. We're sponsored this week by an anonymous sponsor - thank you!
Rachel Andrew, CSS Layout News
FirefoxDevTools in Nightly are now displaying a flex flag when the element is a flex item.
Firefox continue to improve their DevTools, if you are doing layout stuff then install Nightly to play with all the new toys - and give feedback!
Learn
Everything you need to know about CSS Variables – freeCodeCamp
A nice article about CSS Variables with some practical examples.
Whitespace on The Web! — with CSS Grid - YouTube
Published today by Jen Simmons is this video about whitespace on the web, made easy using CSS Grid.
Avoiding chaos when using Flexbox 'order' by Amelia Bellamy-Royds on CodePen
A great example of why and when to use the order property in CSS.
Understanding Media Queries in HTML Email
A useful post explaining how Media Queries and email design work together.
Handling long titles with truncation | Assortment - For the practical developer
A collection of tips and examples on how to handle long titles by truncating text.
CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
A post detailing the use of grid layout in UI design, that also explains why flexbox isn't a good solution for two-dimensional layouts.
Interesting
The Red Reveal: Illusions on the Web Part 1
This is fun. The first in a series of articles about recreating optical illusions on the web.
The (Mostly) Complete History of Layout on the Web Part 1: Responsive Design - The History of the Web
The history of the web moves onto Media Queries and responsive design.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.