Issue 97
Browser updates, CSS Grid tutorials and practical uses.
News
Issue 97
We are closing in on issue 100! I'm happy so many of you enjoy this newsletter, and that enough people publish good resources to fill a weekly email about CSS Layout. In this week there is a lot of grid layout information, both from me and from other people. Plus browser updates, a flexbox cheatsheet and a nice colour tool (which also uses Grid Layout).
Thank you to the sponsor for this week, An Event Apart!
Sending an email to over 6,000 people every week turns out to be reasonably expensive, so if any other readers have a product or service of interest to people who care about the web - take a look at how to sponsor CSS Layout News.
Rachel Andrew, CSS Layout News
What's New In DevTools (Chrome 59) | Web | Google Developers
Chrome 59 is out. Something I think will be really useful is a feature in the Chrome DevTools included in this version. CSS and JS Code Coverage means you can find out how much of your loaded resources are used. A useful metric to keep an eye on and to try and improve.
Release Notes for Safari Technology Preview 31 | WebKit
Safari Technology Preview 31 fixes a couple of CSS Grid issues and also implements place-self from the Box Alignment Specification. This property enables the setting of the align-self and justify-self properties in one go.
"This shorthand property sets both the align-self and justify-self properties in a single declaration. The first value is assigned to align-self. The second value is assigned to justify-self; if omitted, it is copied from the first value."
Learn
Breaking Out With CSS Grid Layout - Cloud Four
A nice technique for creating full width elements in your layout. See the next post in this email for my explanation of how this works.
Breaking out with CSS Grid explained
My explanation of the "Breaking Out" CSS Grid post.
An introduction to CSS Grid
Charlotte Jackson with a straightforward intro to CSS Grid Layout.
CSSconf EU 2017 | Rachel Andrew: Where does CSS come from? - YouTube
In my talk from CSSConf.EU I try to answer the question, "Where does CSS come from?"
Interesting
text-decoration-skip - CSS | MDN
This week I have been enjoying using text-decoration-skip on the redesign of my own site, which is using a chunky font.
FlexBox cheatsheet
I like the fact that if you click the properties on this cheatsheet they are copied to the clipboard.
HSLA - Online Color Picker
Type a hex colour code into this nice little tool and get all the different ways you could express that colour - including hsl and hsla. However the real reason I'm including it is that it is laid out using CSS Grid.
Our Sponsor
Great Minds Think Differently
You’re smart, focused, and dedicated to your craft. At An Event Apart, we bring together people like you and take your thinking to the next level, delivering cutting-edge insights and information at a conference that will energize and educate you.
Whether you’re a designer, coder, or content expert you’ll learn in the same room at the same time, sharing the same ideas with your peers. Set yourself Apart. Register now and save $100 with discount code AEACSSLAYOUT.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.