Issue 128
Performance and accessibility are a big theme this week
News
Issue 128
It feels as if we are well into 2018 now, and given the amount of email that seems to be arriving everyone is back at work. This week I have links on performance and accessibility subjects, including the huge guide to Performance we published over at Smashing Magazine.
I am working on upcoming talks and articles. I'd love to know what else you are all interested in knowing about layout. I review lots of articles for inclusion here, and it feels as if I see the same few techniques explained over and over again. That's not necessarily a bad thing - sometimes seeing a different take on something is what you need to learn it. However I'd love to start seeing more case studies of new layout in production, or more creative design that takes advantage of all the things we gained in 2017.
Rachel Andrew, CSS Layout News
Learn
New flexbox guides on MDN – Mozilla Hacks – the Web developer blog
I finished my work on the Flexbox guides for MDN, and wrote this post wrapping up that work. I hope you find these guides useful.
Improving the Accessibility of 24 ways | CSS-Tricks
Paul Robert Lloyd writes about improving the accessibility of an existing site. Not really layout but included because I think this iterative approach is important. Most of us don't work on brand new things all of the time, we're slowly improving old things. Whether we are adding a CSS Grid component to a site that used a floated layout, or making small improvements to accessibility, there is always something we can do to make things better.
Front-End Performance Checklist 2018 [PDF, Apple Pages] — Smashing Magazine
An amazingly detailed article from Vitaly Friedman over at Smashing Magazine. The Front-End Performance Checklist contains pretty much everything you might need to know to make your site fast.
Don't be overwhelmed - it probably won't all apply to you! However it's worth looking down the list and seeing what small improvements you can make.
Disposition des boîtes flexibles CSS - CSS | MDN
My guides to Flexbox have been translated into French, for the French version of MDN.
Media objects with fit-content
A tiny demo I posted to Twitter and people seem to like. Using fit-content to make more flexible components.
Interesting
The Future Belongs to CSS
"Made with love, CSS Grid, A little flexbox, Sass, and position: sticky"
Web GDE Deck
Paul Kinlan made this, which is a handy way to keep up with what all your favourite Web GDEs are up to, but also uses CSS Grid.
Our Sponsor
Join my CSS Layout workshop online
Let me teach you layout, and save yourself time with every site you build.
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.