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
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.
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
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."
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.
My explanation of the "Breaking Out" CSS Grid post.
Charlotte Jackson with a straightforward intro to CSS Grid Layout.
In my talk from CSSConf.EU I try to answer the question, "Where does CSS come from?"
This week I have been enjoying using
text-decoration-skip on the redesign of my own site, which is using a chunky font.
I like the fact that if you click the properties on this cheatsheet they are copied to the clipboard.
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.
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.