I'm writing this intro sat waiting for the Google I/O keynote to start. I flew out here yesterday, and it has been a somewhat hectic few days with the launch of our latest product Notist. If you are a public speaker it might interest you, and there is also a fair bit of Grid used around the site. Not for anything fancy, there is no amazing new layout that would have been unheard of without Grid. What it enabled was me to get the CSS done and onto other, more important to the business things. In fact I barely remember writing a lot of it! Jeremy writes about a similar feeling in his post Good Griddance.
I'm very excited to see what people can come up with using Grid and other new layout. However I'm also very happy when established patterns that work well, can be achieved far more quickly, so I can get on with everything else I need to do to launch a product!
Rachel Andrew, CSS Layout News
Apparently - although I've not seen it myself - people are using
display: contents as a CSS reset. That's a weird thing to do, don't do that. However this post also explains current a11y issues with
display: contents which are hopefully something we can get fixed in browsers.
"Jen takes a look at the evolution of the printing press and typesetting technology — from letterpress and the Linotype machine, to photo-based paste-up techniques — and how these advances radically changed graphic design. History has taught us that big changes to the underlying technologies can open up new communication possibilities. This is happening again, now, on the web. Today, with CSS Grid, Flexbox and all the pieces of Intrinsic Web Design, we have the freedom to place anything anywhere on the page. What can similar transitions in the past teach us about our future?"
Before you get to creating your layout, you need to organise your content. I struggle with this and really enjoyed this article on A List Apart as a method to help do this, thinking about content priority rather than how it will look.
A useful post explaining relative units in CSS.
Zell writes about how new features in CSS such as Grid, Shapes and Writing Modes are changing web design.
Some interesting ideas described as proximity hover effects, alerting users to something they need do before clicking a button for example, as they approach the button.
Let me teach you layout, and save yourself time with every site you build.
With new lessons and updates for Spring 2018, 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.