Issue 20
Lots of CSS Grid and Flexbox this week.
News
Issue 20
December marches on and 24 ways with it. My own post on Grid, Flexbox and Box Alignment is up today, three years after I first wrote about Grid for the site!
A little bit of news from me. I'm getting closer to a full launch of my CSS Layout online workshop. I put a simple site together yesterday with a table of contents and expect to be launching early in the New Year. Sign up on that site to be kept up to date.
Rachel Andrew, CSS Layout News
Learn
Grid, Flexbox, Box Alignment: Our New System for Layout ◆ 24 ways
Just in time for this newsletter by 24 ways article is published. I'm taking a look at CSS Grid, Flexbox and the Box Alignment Module to see how these modules work together, and the sort of tasks they are each suited to.
Intuitive Scrolling Interfaces with CSS Scroll Snap Points
I've mentioned CSS Snap Points in previous emails, and here is a great explanation of how to use this new CSS feature in practice.
Test flexbox rules live
Another neat flexbox rules tester.
Putting My Patterns through Their Paces ◆ 24 ways
A lovely article from Ethan Marcotte describing how he develops patterns. I love the approach of thinking about the markup first and then using flexbox to visually reorder the items, keeping the hierarchy optimal for people using some form of text to speech for example.
Style Guide Best Practices at Beyond Tellerrand | Brad Frost
A transcript and video from Brad Frost talking about style guides and pattern libraries. This idea of breaking layouts into components is critical to a lot of the things we are doing in web development. It requires getting away from the notion we had in the past of dealing with web pages, and instead to thinking about the fragments within them.
Lets get into the basics of CSS Grid Layout Model
Another introductory article on Grid Layout with some nice images to go with the demos.
Interesting
Website Layout Tools Compared: Flexbox Vs. Susy
A slightly strange Smashing Magazine post comparing Flexbox and Susy. Strange because the author is comparing a Grid tool that relies on Sass with a CSS specification. A CSS Specification that isn't designed for two dimensional layout.
I've taken a quick look at Susy vs. Grid Layout in the past, mostly because I wanted to see if Grid could do the things people were asking of Susy. It would be really useful to see more examples of that for Grid to see if it really does solve the layout requirements people have in the real world.
flexibility: a polyfill for flexbox in older Internet Explorer
This looks promising if you want to use flexbox but need to support old IE. I'd generally suggest trying to progressively enhance rather than polyfill but when you need to, these tools are handy.
Our Sponsor
Coming soon: The CSS Layout Workshop
Does developing layouts with CSS seem like hard work? Are you are using a framework to do layout but wonder what it is really doing under the hood? Do you find yourself making lots of compromises when trying to implement your designs?
My new online workshop is exactly what you need. Sign up for prelaunch offers and to be first to know when we launch!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.