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
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.
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.
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
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.
A video of my talk from Smashing Conference in San Francisco a few weeks ago.
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."
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
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.
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
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!