Issue 100
A milestone issue with news of Grid updates in Edge, more Grid tools in Firefox, Grid a11y, a stickbits polyfill, and more.
News
Issue 100
We made it to issue 100 of CSS Layout News! One hundred weekly issues. Thanks for reading and a special thanks to the people who write articles and create examples, without those I would have nothing to link to each week.
On Friday I will be in Brighton speaking at Patterns Day about my work with the pattern library for Perch, then I'm heading back to the USA for An Event Apart in Washington DC. Come and say hello if you are at either of these.
Rachel Andrew, CSS Layout News
Update CSS Grid – Welcome to the Windows developer feedback site!
The update to CSS Grid Layout has now shipped behind a flag in Edge. Great to see this happening!
Powerful New Additions to the CSS Grid Inspector in Firefox Nightly
Firefox Nightly has updated with new DevTools for working with CSS Grid Layout. If you are working with grid you should definitely check it out.
Learn
The responsive order conflict for keyboard focus | AlastairC
Some thoughts on accessibility and reordering in flexbox and grid.
Stickybits: an alternative to `position: sticky` polyfills | CSS-Tricks
An article introducing Stickybits a utility to enable position: sticky in older browsers that don't support it.
Bootstrap to CSS Grid – Natalya – Medium
An article with tips for starting to use CSS Grid even if you are still on Bootstrap or work on a large project where you can't just throw things away and start over.
Designing The Perfect Accordion – Smashing Magazine
An article with a whole heap of examples, about the accordion design pattern.
Interesting
Aspect Ratios in CSS are a Hack | Bram.us
A rundown of the current ways to deal with aspect ratios in CSS, and a hope that a better way of dealing with this could be found. Something i definitely agree with, given how common a request this is in relationship to CSS Grid Layout based designs.
Our Sponsor
Tired of struggling with CSS?
We get it. CSS is tough.
But it’s not like you’re going to use one of those WYSIWYG editors spitting out spaghetti code and convincing potential clients they don’t need you.
Webflow is different. It’s a professional-grade web design and development tool, built by professionals, for professionals, to make your web design process faster and easier. No more, no less.
Or as Paul Irish, performance engineer at Google, put it:
“webflow is crazy good. i feel like you guys are the first to build the right UX around styling & CSS. very fine work sir.” (Link)
So give it a try. There’s no trial period, and no need to pay us a dime till you’re ready. We’re pretty sure you’re going to love it.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.