Issue 20

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.

24ways.org


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.

sitepoint.com


Test flexbox rules live

Another neat flexbox rules tester.

flexbox.help


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.

24ways.org


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.

bradfrost.com


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.

pawelgrzybek.com

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.

smashingmagazine.com


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.

github.com

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!

thecssworkshop.com