Issue 33
Thinking creatively, logical properties and I am finally heading back to the UK.
News
Issue 33
I am about to get on a plane and head home after almost a month here in the USA. I finished up with An Event Apart in Nashville. You can find the updated version of my Grid Layout slides here. I've had a great trip, met and talked to so many fantastic people, but I will be glad to be back at home for a little while! There is so much I want to get done that is hard work when in hotels and airplanes.
Jen Simmons was also speaking at An Event Apart, and has inspired me to try and think more creatively around layout. I'm not a designer, I'm good at implementing things using these tools, not so great at thinking up new and interesting ways to do so. I'm encouraged though to try and find ideas from other media, rather than just reimplement the standard layouts we have. Watch this space (and I'm always up for a challenge if you have ideas).
Rachel Andrew, CSS Layout News
Updates to Grid by Example
At the beginning of March Google Chrome updated to 49, which included a number of updates to Grid. In particular the column and row gap properties. This enabled me to simplify a lot of my grid examples, so I updated pretty much all of them.
I have also rebuilt the site, getting rid of the Bootstrap template I had used to quickly put it together and instead using CSS Grid Layout with fallbacks to floats. I'll be added a whole bunch of new examples in the next week now I have the existing set updated.
Firefox 45 for developers - Mozilla | MDN
Firefox 45 is out and includes a whole host of interesting things for developers. The CSS Grid Layout implementation has had a large number of features added - you need to toggle a flag to use it, as with Chrome. It's great to see Grid Layout becoming a reality in Firefox as well as Blink and WebKit!
Learn
An Event Apart News: Modern Layouts: Getting Out of Our Ruts by Jen Simmons – An Event Apart Video
Here is Jen Simmons in her talk from An Event Apart last year, explaining how modern layouts can help to get us "out of our ruts" and change how we think about design for the web.
CSS Exclusions and Grid Layout
I've included a demo in Exclusions in my layout presentations for some time and was rather sad when initial momentum on this specification stopped when it was split from the Shapes spec. I've had conversations with a number of people on the fact that Exclusions makes more sense once we have Grid, so here are a couple of demos that currently need up to date IE or Edge.
CSS Flexbox Is Entirely Logical (Almost) / Paul Robert Lloyd
Paul Robert Lloyd does a great job of explaining logical properties, and how they relate to Flexbox.
Interesting
Layout performance testing
I've not dug into these results yet, but great to see some work on performance testing of new layouts versus other methods.
Our Sponsor
Baffled by CSS Layout?
If developing a layout seems to mostly consist of trial and error, or you are relying on a framework in order to make layouts that work, I have a course for you. Throughout this video course I'll explain the mysterious aspects of CSS, giving you a solid foundation to create the layouts you want.
Purchasing a course also gives you access to our private Slack Community, discuss the things you are learning or any problems you have with other people doing the course - and me!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.