Issue 95
Lots of CSS Grid tips and tricks this week.
News
Issue 95
I am back from my last round of travels, most recently from Google I/O. There was more web stuff than I had expected at I/O, lots of JavaScript and PWA content. CSS Grid did get a little mention on a slide detailing all of the new Web APIs that had made it into Chrome this year.
Tomorrow I head to Athens, Greece for Frontend United. I am speaking and also running a CSS layout workshop.
Rachel Andrew, CSS Layout News
707214 - [css-grid] Add CSS Grid Layout support on DevTools - chromium - Monorail
I love the Firefox Grid Inspector, but I'd love to see Grid support in Chrome DevTools. There is an issue raised to add it. If you would like to see it happen, then starring the issue shows that there is interest in this as a feature.
Updated! Grid by Example
A fairly major update to Grid by Example. I've created a Getting Started guide with links to various things I have written and recorded, on and off the site.
Also the beginnings of a whole new section of patterns which include fallbacks for older browsers.
Animating CSS Grid Layout properties by Manuel Matuzovic on CodePen
People keep asking me about animating the grid. Happy to see a post explaining what is animatable and demonstrating the fact that there is poor browser support currently.
Learn
CSSconf EU 2017 | Patrick Hamann: CSS and the first meaningful paint - YouTube
In this video from CSSconf EU 2017 Patrick Hamann explains how browsers render a webpage, and how you can optimise in order to get a faster loading experience.
SmashingConf San Francisco 2017 - Rachel Andrew on Laying Out The Future With Grid And Flexbox on Vimeo
A video of my talk from Smashing Conference in San Francisco a few weeks ago.
Better Form Design: One Thing Per Page (Case Study) – Smashing Magazine
An interesting article about form design and the "one thing per page" pattern.
"This pattern is about splitting up a complex process into multiple smaller pieces, and placing those smaller pieces on screens of their own."
Eric's Archived Thoughts: Gridded Headings
Some techniques for creating headings using CSS Grid. There are a lot of handy small places like this where grid can help finesse layout. It's often in these places you can start to use it - even if you need to do your major layout components using older methods.
Interesting
Color Tool - Material Design
Even if you are not using Material, this Color Tool is useful. Try out colour combinations and then text the accessibility of text, making sure your choices don't result in unreadable combinations. I like the ability to then open the result in CodePen.
Flexbox Buttons
A cute little set of Flexbox buttons. Although why people persist in creating small demos with languages not HTML is beyond me. Make it easy for people to fork and play with stuff!
Our Sponsor
Go headless with Perch Runway. Templated content for your site. A data API for your apps.
Your online content strategy should no longer be restricted to your primary website. When it comes to publishing – and reusing – your content in marketing sub-sites, mobile apps, third-party systems and such you don’t need to choose between a traditional web CMS and a headless alternative.
Perch Runway helps you make the most of your investment in a CMS solution by offering both. Whilst serving HTML-based content pages as part of your website, it can also be configured to seamlessly run as a headless content API serving your mobile apps, single-page JavaScript apps and any service you wish to share content with.
Download and try it today!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.