Designing with grid layout, my talk on how we should be talking about CSS, a site to help you learn layout, and more!
This issue comes from a lovely peaceful co-working space in Troy, NY. I'm working out of here for a few days before heading to Smashing Conf in Toronto. Will I see you there? I'm running my CSS Layout Workshop on Monday 24th June, as I write this there are a couple of spots still available. So if you would really enjoy spending a day learning CSS layout, finding out about new things in CSS, and understanding better how to cope with older browsers, join me!
Some good stuff this week. I feel as if we are starting to see new thinking emerge which uses these new layout methods. That's really exciting to me. For a long time when I've looked for things to add to this newsletter I'm finding yet another tutorial about grid basics. That is not to say that people shouldn't write about things already written about - as sometimes it will be a different take on the same issue that clicks with someone struggling. However, I've been longing for more tutorials and articles that really show us what we can do with it. Jen Simmons has been someone who has been a leader in doing that over the last couple of years, but I think there is so much scope for unpacking the possibilities.
Till next week - unless I see you in Toronto at Smashing Conf!
Rachel Andrew, CSS Layout News
Refactoring (the way we talk about) CSS | CSS Day 2019 - YouTube
My talk from CSS Day about why I think we need to change the way we talk about CSS, and how I think we should be doing that in terms of CSS Layout. You can find the slides and other resources here.
Inspired Design Decisions: Avaunt Magazine — Smashing Magazine
Taking a print magazine as inspiration, Andy Clarke breaks down the different grids used and shows how to use modern CSS to implement them. I love this approach, I'm not a designer at all, but Andy really shows why the different techniques work - and it's exciting to me that we finally have the tools in CSS to implement things like this in an elegant manner.
CSS Scroll Snap Updated in Firefox 68 - Mozilla Hacks - the Web developer blog
Firefox 68 is shaping up to be a pretty stellar release for CSS. It will include the updates Scroll Snap specification. I've been working on the documentation for MDN, and also wrote this post to explain the changes.
Drop caps & design systems - Vox Product Blog
"Let’s get this out of the way up front: this is the most you’re probably ever going to read about drop caps."
An interesting and useful post about drop caps on the web.
Relearn CSS layout: Every Layout
The idea behind Every Layout is to help you learn modern CSS layout and move away from hacks and tricks, to actually work with the browser. A lovely project and one that fits very nicely with some of the things I've been thinking about recently.
The State of CSS 2019
Results from a survey into CSS. I'm not sure what to draw from this, there are some interesting bits and bobs - for example hardly anyone is writing print styles, and some frankly bizarre things such as that almost as many people claim to have used Exclusions as Writing Modes, really? However, in general a lot of this maps to what I would expect.
It would be interesting to go through this self-reported usage data and compare it to actual usage data.
Designing & Building Live. On Stage. That’s SmashingConf 2019!
Up, up, up to the stars! For our second SmashingConf Toronto (June 25–26), we’ll explore the bright and dark sides of front-end and UX — Service Workers, Design Across Cultures, Design Systems, Performance, Vue.js, Animation, Designing for Touch and much more to come! Plus a bunch of hands-on workshops on design, front-end and UX.
How does it work? Most sessions are live and interactive. No Keynote, Reveal or Google Slides. Instead, take a seat, breathe in and show how you design or build on a large screen live — from scratch! — in front of 400 people. Now, what could possibly go wrong? ;-)
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.