Print To CSS by Dan Davies
A series of really nice CSS grid demos based on two-page magazine spreads.
Link tags: layout
174
Frank Chimero Redesign Blog: The Popeye Moment
Frank is redesigning in the open. Watch this space:
By writing about it, it may help both of us. I can further develop my methods by navigating the friction of explaining them. I’ve been looking for a way to clarify and share my thoughts about typography and layout on screens, and this seems like a good chance to do so. And you? Well, perhaps the site can offer a clearly explained way of working that’s worth considering. That seems to be a rare thing on the web these days.
Keeping it simple with CSS that scales - Andy Bell
The transcript of Andy’s talk from this year’s State Of The Browser conference.
I don’t think using scale as an excuse for over-engineering stuff—especially CSS—is acceptable, even for huge teams that work on huge products.
The Guardian digital design style guide
What a lovely way to walk through the design system underpinning the Guardian website.
Bonus points for using the term “tweak points”!
Intrinsically Responsive CSS Grid with minmax() and min()
When min() gets better support (it’s currently in Safari), we’ll be able to create container queryish declarations like this:
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
Relearn CSS layout: Every Layout
A new site from Heydon and Andy that provides CSS algorithms for common layout patterns.
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Create a responsive grid layout with no media queries, using CSS Grid - Andy Bell
CSS grid and custom properties really are a match made in heaven.
Content-based grid tracks and embracing flexibility
This is a really good explanation of the difference between context-aware layouts—that we’ve had up until now—and content-aware layouts, which are now possible with CSS grid:
With the
min-content,max-contentandautokeywords, we can size grid tracks based on their content. I think this is very cool. If we manage to embrace as much of the web’s flexibility as we can, we can get the most out of these tools, and let CSS help us with designing for the unknown.
GRID: A simple visual cheatsheet for CSS Grid Layout
This is a really nice glanceable reference for CSS grid.
Using CSS Grid the right way | hey it’s violet
CSS Grid is easy to use but difficult to learn. It’s a more intuitive paradigm than any other CSS layout technique, but it’s completely different from its predecessors.
Some great advice here on how to approach CSS grid:
- Use names, not numbers
- Use fr as your flexible unit
- Don’t use a grid system
Three ways to build Crouwel’s Hiroshima poster in CSS
Hidde takes one iconic design and shows how it could be recreated with CSS grid using either 4 columns, 9 columns, or 17 columns.
10 Year Challenge: How Popular Websites Have Changed
Side by side screenshots of websites, taken ten years apart. The whitespace situation has definitely improved. It would be interesting to compare what the overall page weights were/are though.
Understanding the Albatross - Snook.ca
Jonathan shares his notes on that great flexbox container queries article from Heydon that I linked to.
The Flexbox Holy Albatross | HeydonWorks
Er …I think Heydon might’ve cracked it. And by “it”, I mean container queries.
This is some seriously clever thinking involving CSS custom properties, calc, and flexbox. The end result is a component that can respond to its container …and nary a media query in sight!
Stepping away from Sass
I think Cathy might’ve buried the lede:
The knock on effect of this was removing media queries. As I moved towards some of the more modern features of CSS the need to target specific screen sizes with unique code was removed.
But on the topic of Sass, layout is now taken care of with CSS grid, variables are taken care of with CSS custom properties, and mixins for typography are taken care of with calc().
Personally, I’ve always found the most useful feature of Sass to simply be that you can have lots of separate Sass files that get combined into one CSS file—very handy for component libraries.
[css-exclusions] Status of the exclusions spec #3308
Remember when I said that if we want to see CSS exclusions implemented in browsers, we need to make some noise?
Well, Rachel is taking names, so if you’ve got a use-case, let her know.
CSS Frameworks Or CSS Grid: What Should I Use For My Project? — Smashing Magazine
Rachel does some research to find out why people use CSS frameworks like Bootstrap—it can’t just be about grids, right?
It turns out there are plenty of reasons that people give for using frameworks—whether it’s CSS or JavaScript—but Rachel shares some of my misgivings on this:
In our race to get our site built quickly, our desire to make things as good as possible for ourselves as the designers and developers of the site, do we forget who we are doing this for? Do the decisions made by the framework developer match up with the needs of the users of the site you are building?
Not for the first time, I’m reminded of Rachel’s excellent post from a few years ago: Stop solving problems you don’t yet have.
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
I remember a couple of years back when Jen came to visit Clearleft to chat to us about CSS grid, this use-case that Rob describes here came up almost immediately.
But despair not—Rachel points to a potential solution. I saw potential solution, because if we want to see this implemented in browsers, we need to make some noise.
A Book Apart, Front-End Next Steps
If you buy this bundle of books, you get Going Offline in some very, very good company.