Issue 89
News
Issue 89
A jetlag issue having flown back from Seattle to the UK yesterday. I'm also working on my company end of year accounts. Jetlag and tax, not a combination I would recommend!
I had a fantastic time over the last couple of weeks, going from Render in Oxford to Seattle for An Event Apart then to San Francisco for Smashing Conf. I was running a CSS Grid Workshop for Smashing and in the last session of the day got attendees to build some layouts with grid. It was fascinating to see how quickly people grasped the concepts and also how the different groups picked different ways of using Grid.
Next week I'll be sending this email from Tokyo where I will be for the CSS Working Group meeting. One of the things we hope to talk about is the subgrid feature of grid. I would love to have more use cases to share, so if you have any thoughts read this post and let me know.
Rachel Andrew, CSS Layout News
Release Notes for Safari Technology Preview 27 | WebKit
Notable are the prefix removals for min-content, max-content and fit-content.
Patterns Day: Brighton, June 30th 2017
I'm really looking forward to this. A one-day event for web designers and developers on design systems, pattern libraries, style guides, and components.
And the site uses CSS Grid Layout.
CSS Grid Layout Baseline Alignment support
There are some finer details of the Grid spec still being implemented in one browser or another. Baseline alignment has now been implemented in Chrome - you can see the linked example working in Canary.
Learn
Relative Type - Paul Kinchla
A tip on combining ems and viewport units for responsive components.
8-Point Grid: Borders and Layouts – Built to Adapt
Diving into some of the tricky questions that arise when using an 8-Point grid system to base your designs on.
Refer to the spec
Learning to read specifications is very useful. The grid spec is long and complicated and we're going to work through it in little bits. That way you too can be one of the people who is able to refer to the spec whenever they have a CSS question.
Interesting
Animista
Not really layout, but useful enough that I really wanted to include it. CSS animation examples to copy and paste. Also a really great way to see what is possible.
Griddy
A little tool that lets you play around with the properties that can be applied to grid containers.
CSS Grid Template Builder
Another grid tool, this one to make use of the grid-template-areas method of grid layout.
Our Sponsor
Learn how and why CSS layout works and save development time on every project
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.