Issue 219
CSS Grid Naming, Layout fun with grid, list styling, and more Inspired Design Decisions.
News
Issue 219
I'm briefly back in the UK after Fronteers and View Source. I can't wait to share the videos from these two events with you, I've had so many great discussions about the web and CSS over the last week, it really was just like TPAC had continued, spilling out of Japan and into Europe!
What has been exciting is the number of people who are asking questions and wanting to understand more about the standards process, and how CSS or other web technologies get made. It is no secret that I'm keen for everyone to understand, support and even contribute to the platform. It makes me happy when people engage with the subject and want to understand their medium in a deeper way than simply using it to get a job done.
More on that in the coming weeks, but for now enjoy this collection of interesting layout things. Thank you to An Event Apart for sponsoring. I'll be heading to AEA Denver at the end of this month, and then AEA San Francisco in December with a brand new talk! I'd best get working on it.
Rachel Andrew, CSS Layout News
Learn
Editorial Design Patterns With CSS Grid And Named Columns — Smashing Magazine
I have been playing with named lines in Grid and extending that into subgrids, I think this technique is going to be very nice indeed once we have subgrid everywhere - take a look.
Powerful New CSS for Styling Bullets, Numbers, and List Markers - YouTube
Earlier this year Firefox shipped support for ::marker which I thought was interesting (it's one of those things you kind of feel we should have been able to do forever). I wrote an article about lists and markers for Smashing. If you prefer to learn by video, here's a nice one from the Mozilla Developer channel.
Who Designed This? Where Web Platform features come from, and how to get involved
I was at Fronteers Conference this week, and here are my slides for my talk Who designed this?
A Modern CSS Reset - Andy Bell
I'm generally not a huge fan of CSS resets, not the type which are simply copied into every project without thought. I'm answered many a question from a person confused due to something they had included in their project with a CSS reset, but not known what it did.
I do like Andy's approach however of explaining what he uses and why, as I think most of us do have some kind of starting point stylesheet with common things in it.
Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force — Smashing Magazine
In this issue of Inspired Design Decisions, Andy creates a layout inspired by the work of Bea Feitler. I'm enjoying this series - even as a non-designer - I find that the explanations of the various design choices make more sense to me than simply looking at the layouts.
Andy Clarke - Inspired by CSS Grid - YouTube
From State of The Browser, and along the same lines as the Inspired Design Decisions article is this talk by Andy Clarke.
Interesting
Screen Size Map
While precisely targeting particular screen sizes is not in general the best approach for responsive design, this visualization of screen sizes is nicely done and helps give an idea of the common viewport sizes people might be looking at your site with.
Layout-Fun with CSS Grid
A couple of interesting little things in this demo.
Our Sponsor
Why do folks come back to An Event Apart?
Why do people who attend An Event Apart come back year after year, bring their teams, and tell their friends in the industry about the conference? Because, since we started AEA way back in 2005, we’ve kept a laser focus on bringing you the finest speakers and most important talks in the industry.
At many events, you hope to get a lot out of one or two or maybe three sessions. At An Event Apart, every session is useful, relevant, future-focused, entertaining, and inspiring. Some are downright profound. From intrinsic web design to mobile-first, and from atomic to responsive design, if it matters to your work and career, you’ll hear it at An Event Apart before any other web conference.
So come join a few hundred of the smartest, nicest web folk you could ever hope to meet. Discover how attending An Event Apart expands your mind and boosts your skills. Set yourself Apart—and save $100 off any two or three days with code AEACSSN.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.