Issue 100

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!

uservoice.com


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.

mozilla.org

Learn

The responsive order conflict for keyboard focus | AlastairC

Some thoughts on accessibility and reordering in flexbox and grid.

alastairc.ac


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.

css-tricks.com


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.

medium.com


Designing The Perfect Accordion – Smashing Magazine

An article with a whole heap of examples, about the accordion design pattern.

smashingmagazine.com

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.

bram.us

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.

webflow.com