Issue 44
Safari TP 5 unprefixes Grid, and we have flexbox, box-shadow, grid and viewport units tutorials and presentations
News
Issue 44
Some weeks I feel I have to go fishing around the web to populate this newsletter, other weeks are like this one where I've easily collected some great articles and demos. The video from my talk last week is Copenhagen is also online due to the speedy work of the At The Frontend team.
I am heading to Berlin tomorrow to run my CSS Layout workshop at Webinale, perhaps I will see some of you there. There are also still tickets available for my London workshop on the 13th June. The rest of my year is quickly booking up, I have a little bit of availability for running workshops either as a public event or in-house. Let me know if you would like to discuss that possibility for your company or event.
Rachel Andrew, CSS Layout News
Release Notes for Safari Technology Preview 5 | WebKit
Safari Technology Preview 5 unprefixes the CSS Grid Layout properties, meaning that my examples should now work without prefixing.
At the Frontend | The New CSS Layout | At the Frontend
I spoke at the At The Frontend conference in Copenhagen last week, and they have already got my talk online. You can see all of the other talks too, loads of good stuff there.
Learn
CSS Grid Layout and positioned items - Rego's Everyday Life
Manuel Rego Casasnovas has written a very detailed post about how positioned items work inside grid containers. I had a whole bunch of questions about this as I read the specification, which have been answered in the post. It's reasonably technical but if you have explored the grid spec already it should all make sense to you.
Using Flexbox Today (Frontend United 2016)
Excellent set of slides to browse through from Zoe M. Gillenwater's presentation to the Frontend United Conference.
The box-shadow Property
A tutorial explaining the box-shadow property.
» Breaking Out With Viewport Units and Calc Cloud Four Blog
A walkthrough of how to use viewport units and calc to solve a layout issue, includes a very useful nugget of information.
"Viewport units don’t take scrollbar dimensions into account unless you explicitly set overflow values to scroll. But even that doesn’t work in Chrome or Safari."
Interesting
My process of creating the Arriva web site | Veerle's blog 3.0
Veerle has written a detailed post about her responsive design process for the Arriva website.
Isometric and 3D Grids | Codrops
These look great, and I love to see this kind of experimentation with CSS.
CodePen - Flexbox playground
Another Flexbox playground, I like the straightforwardness of this one.
Our Sponsor
Perch is 7! Celebrating seven years of the really little CMS
We launched Perch on 31st May 2009 so we have been helping web designers and developers create beautiful, fast websites for seven years!
We never rest on our laurels - in the past few months we launched Perch Shop, a full e-commerce system for Perch. We're now working on Perch 2.9 which will include a full responsive UI rebuild and much more.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.