Issue 68
CSS Grid Intent to Ship for Chrome posted, lots of flexbox and more.
News
Issue 68
Conference season rumbles on. I'm in Berlin today where yesterday I spoke on interesting new CSS at GOTO Berlin. At the end of last week I was speaking on the same subject at ffconf in Brighton. There are some code examples for these talks here, and I believe both events were filmed so I'll share a video when I see one.
After a brief stop at home (to do the laundry and see my cat) I'm off to CSSConf.asia in Singapore. I can't wait to meet people from the CSS and tech community there. I'm in Singapore for a week, let me know if you are based there or around for one of the DevFest events and want to meet up.
Rachel Andrew, CSS Layout News
Intent to Ship: CSS Grid Layout - Google Groups
Here is the Intent to Ship for CSS Grid Layout which also details interoperability and implementation status.
It has been five years since work on Grid started in WebKit - this was before Blink forked from WebKit. Here's the initial email to the webkit-dev list. I'm so excited about having Grid Layout out from behind browser flags!
Learn
Grid by Example: Aligning and Justifying Grid Items
In this video we look at using the align-items, justify-items, align-self and justify-self properties. These are defined in the Box Alignment Level 3 specification and apply to grid layout.
Grid by Example: Aligning and Justifying the grid
In this video I demonstrate the align-contents and justify-contents properties. These are defined in the Box Alignment Level 3 specification and apply to grid layout.
AtoZ CSS: The z-index CSS Property - SitePoint
An explanation of z-index with this video from SitePoint.
Make Forms Fun with Flexbox
A tutorial covering using Flexbox to layout forms.
Interesting
Rethinking Responsive Design – Medium
"We need to recognize that screens are ephemeral, and that making something responsive will no longer be about screens. It’ll be about experiences."
Responsive "background-size: contain" Video
A pen demonstrating how to do a full size background video.
Responsive pure CSS tabs & accordion
Another CodePen example, this time demonstrating a flexbox method for creating CSS tabs.
Fibonacci – Flexbox Composer
This is interesting, although you would need to be careful with the output it may well be a nice way to learn how the various flex properties work.
Our Sponsor
Friendly UK Cloud Hosting by Bytemark
Your beautiful web apps need a simple, reliable back-end. Join the smart accessible company of sites like luzme.com, traintimes.org.uk and mysociety.org, all of whom use our UK-owned data centres and cloud servers. We built our whole stack ourselves down to the data centre, and offer phone support - so there's no hosting problems we can't solve. Our cloud servers start at £10/month so call today, or sign up online to get a one month free trial.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.