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
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
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.
In this video from CSSconf EU, Samuel Richard shows how we can start using Houdini in our design systems.
In depth
The various ways to align things in CSS, which to use when and why.
Detailed guides to Box Alignment on MDN.
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.
An alignment cheatsheet covering box alignment in grid and flexbox.
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
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!
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 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
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.