Issue 83
Grid learning resources, scaling SVG clipping paths, and viewport units
News
Issue 83
The last day of February, which means that tomorrow is March and in March CSS Grid Layout will ship in Firefox, Chrome and possibly also Safari. Hooray! I've some posts this week that will help you get started learning grid if you haven't already.
Please don't listen to the myth that is being put around about how hard grid is to learn. It's a big specification for sure, however broken down it is very straightforward. If you have learned how to use a Grid framework, or battled with float-based grids then you absolutely have the ability to master this specification. I'll be continuing to create resources, and answering questions to help.
Most of my speaking this year will be around using grid in a production context. We'll be exploring how to use grid and other new layout, while supporting older browsers. I've had a little break from conferences and I'm looking forward to getting back to chatting with people about all of this.
I'm part of an online conference next week - Laracon online. The rest of the event is more for the PHP-ers, as it is a Laravel event, but I'm going to be talking about Grid and Flexbox. It's also only $20 a ticket - with 25% off if you use offer code SPEAKER.
Rachel Andrew, CSS Layout News
CSS Box Alignment shorthands - Chrome Platform Status
There are a set of shorthands for Box Alignment properties. Work has started to implement these in Chrome.
How CSS Grid Is Reinventing Webpage Design Event | | General Assembly
Jen Simmons is doing a full day workshop on design with CSS Grid in NYC on the 25th of March - and it's a free event! Limited tickets so sign up if you want a place.
Learn
Learn CSS Grid | Jen Simmons
Jen Simmons lists a whole bunch of CSS Grid resources - many of them mine and others that will be familiar to readers. It's a nice one-stop shop of good resources if you want to start learning about Grid Layout before it ships next month.
CSS Grid: Learning new layout - responsive - Bocoup
I love the comparison of old-school layout technique with Grid in this post, which promises to be the start of a small series.
Eric's Archived Thoughts: Scaling SVG Clipping Paths for CSS Use
Some excellent investigation and solutions for SVG based clipping with percentage coordinates.
The Unexpected Power of Viewport Units in CSS | Lullabot
A nice walkthrough of Viewport Units including diagrams and code.
Interesting
Touch Devices Should Not Be Judged By Their Size | CSS-Tricks
A post about Interaction Media Features,
"These provide the capability to query a document based on the presence and accuracy of the user's pointing device and whether it has the ability to hover over elements."
Charles Hayter's colour diagrams
Colour diagrams recreated using CSS Grid layout. Requires a grid supporting browser!
Our Sponsor
CSS Layout training with video, code examples and tutorials
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 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.