Issue 210
A focus on alignment, new features in Firefox 68, Houdini and design systems, bridging the "great divide".
News
Issue 210
Back in the UK and while summer does mean a slowdown in travel - the last thing I want to do is go away on holiday - it hasn't meant a let up in the things I'm working on. At least I can work on them at my own desk! Over the last couple of days I've been looking back over the history of responsive design, remembering how media queries were not supported below IE9, and the early attempts to detect and adapt to screen sizes. We have come a long way!
Once conference season kicks off again I do have a couple of CSS Layout workshops with tickets. In Europe you can come to my workshop at the Fronteers Conference in Amsterdam. In the USA there are still a few workshop tickets for the sold-out Smashing Conference in New York. I'd love to see you at one of those.
While working on a piece about writing modes for Smashing Magazine, I thought a lot about alignment in CSS. So my in depth section this week is a collection of things about alignment. I hope they are useful!
Thank you to a new sponsor this week - Every Layout. See the end of the email for a special offer.
Rachel Andrew, CSS Layout News
New CSS Features in Firefox 68 - Mozilla Hacks - the Web developer blog
I've been doing a bunch of documenting of the new things in Firefox 68 - here is a post about some of those things.
Learn
Writing Modes And CSS Layout — Smashing Magazine
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article find out why I think understanding writing modes is so important.
Design System Magic with CSS Houdini by Samuel Richard | CSSconf EU 2019 - YouTube
In this video from CSSconf EU, Samuel Richard shows how we can start using Houdini in our design systems.
In depth
How To Align Things In CSS — Smashing Magazine
The various ways to align things in CSS, which to use when and why.
CSS Box Alignment - CSS: Cascading Style Sheets | MDN
Detailed guides to Box Alignment on MDN.
Unlocking the Power of CSS Grid Layout
In this talk, captured on video at Frontend Conference in Zurich last year, I cover alignment along with other elements that really help you to understand grid layout.
Box Alignment Cheatsheet - rachelandrew.co.uk
An alignment cheatsheet covering box alignment in grid and flexbox.
Everything You Need To Know About Alignment In Flexbox — Smashing Magazine
Alignment in flexbox can seem a little tricky as we need to consider alignment on the main and cross axis. If you are ever confused about when to align and when to justify in flexbox, this might help.
Interesting
CSS Grid: Smashing Mag's Contents Page
Over at Smashing Magazine we recently launched a pilot edition of Smashing Print, which was designed by Veerle Pieters.
I love Olivia Ng's interpretation of our index page using CSS Grid!
Accessible inline list with bullets between items — Artem Sapegin’s Blog
I saw this linked from a few places and thought this looked like something we can do with ::marker. However as ::marker accepts generated content and in the spec we have examples where some text is being used as a marker, presumably screenreaders will also read the content on markers. An example is here but as it is only supported in Firefox it isn't especially testable.
Frontend Design, React, and a Bridge over the Great Divide
"Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development."
I like this practical take from Brad Frost on how frontend designers help to bridge the gap between design and development. It's a long piece but comes from practical experience. While not strictly CSS layout I think it is a worthwhile read.
Our Sponsor
Every Layout - Relearn CSS layout
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves.
Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. Use the LAYOUT_SQUARED coupon code when you checkout, for a 30% discount.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.