Designing for Inclusion with Media Queries
The slides and notes from a great presentation by Eric Bailey that takes a really thoughtful deep dive into media types, media queries, and inclusive design.
Tags: layout
143
Super-powered layouts with CSS Variables + CSS Grid by Michelle Barker on CodePen
This article is about using custom properties and CSS grid together, but I think my favourite part is this description of how custom properties differ from the kind of variables you get from a preprocessor:
If you’re familiar with Javascript, I like to think of the difference between preprocessor variables and CSS Variables as similar to the difference between
constandlet- they both serve different purposes.
CSS Grid: More flexibility with minmax() by Michelle Barker on CodePen
A good use case for using minmax with CSS grid to dispense with a media query.
Grid to Flex
Una has put together this handy one-pager of flexbox fallbacks for some common grid layouts.
Best Practices With CSS Grid Layout — Smashing Magazine
A great set of answers from Rachel to frequently asked questions about CSS grid. She addresses the evergreen question of when to use flexbox and when to use grid:
I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around.
A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting
flex-growto 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for).
How display: contents; Works
A really deep dive into display: contents from Ire.
The first visual identity for UK Parliament
Some lovely branding work for the UK Parliament, presented very nicely.
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
Here’s a really smart approach to creating container queries today—it uses ResizeObserver to ensure that listening for size changes is nice and performant.
There’s a demo site you can play around with to see it in action.
While the strategy I outline in this post is production-ready, I see us as being still very much in the early stages of this space. As the web development community starts shifting its component design from viewport or device-oriented to container-oriented, I’m excited to see what possibilities and best practices emerge.
Resilient CSS - YouTube
A great new seven-part series of short videos from Jen on writing resilient CSS—really understanding the error-handling model of CSS and how you can use that to use the latest and greatest features and still have your site work in non-supporting browsers.
How I design with CSS grid
Always mark-up first. Regardless of what the kids are doing these days, I stick by my guns and start with mark-up first. A fun experiment (maybe not for you, but definitely for me) is to see how your site reads on Lynx. It does serve as a good gauge of whether the content on the site is structured properly or not.
Keeping aspect-ratio with HTML and no padding tricks
A clever little hack to preserve an aspect ratio for any HTML element.
We use two important attributes:
- SVG knows how to maintain aspect ratio
- CSS grid knows how to make overlapping items affect each other’s size
V6: Typography and Proportions | Rob Weychert
Rob walks us through the typographic choices for his recent redesign:
Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.
Two column `dl` with two lines of CSS! Thank you Grid Layout! ✿ dabblet.com
Yes! I’ve wanted this forever!
Eric’s Archived Thoughts: Declining Complexity in CSS
I think Eric is absolutely right. The barrier to entry for accomplishing what you want with CSS is much lower now. It only seems more complicated if you’re used to doing things the old way.
I envy “the kids”, the ones just starting to learn front end now. They’re likely never going to know the pain of float drop, or wrestling with inline blocks, or not being able to center along one axis. They’re going to roll their eyes when we old-timers start grumbling about the old days and say, “Floats?!? Who ever thought floats would be a good way to lay out a page? That’s totally not what they’re for, anyone can see that! Were you all high as a kite, or just utterly stupid?” You know, the way “the kids” talked ten years ago, except then it was about using tables for layout.
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article
An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
(It also contains a splendid use of the term “crawl bar.”)
The Story of CSS Grid, from Its Creators · An A List Apart Article
It must be the day for documenting the history of CSS. Here’s an article by Aaron on the extraordinary success story of CSS Grid. A lot of the credit for that quite rightly goes to Rachel and Jen:
Starting with Rachel Andrew coming in and creating a ton of demos and excitement around CSS Grid with Grid by Example and starting to really champion it and show it to web developers and what it was capable of and the problems that it solves.
Then, a little bit later, Jen Simmons created something called Labs where she put a lot of demos that she created for CSS Grid up on the web and, again, continued that momentum and that wave of enthusiasm for CSS Grid with web developers in the community.
CSS Grid PlayGround | Mozilla
A ten-part tutorial on CSS Grid from Mozilla.
When the news goes sideways – James Donohue – Medium
The BBC has been experimenting with some alternative layouts for some articles on mobile devices. Read on for the details, but especially for the philosophical musings towards the end—this is gold dust:
Even the subtext of Google’s marketing push around Progressive Web Apps is that mobile websites must aspire to be more like native apps. While I’m as excited about getting access to previously native-only features such as offline support and push notifications as the next web dev, I’m not sure that the mobile web should only try to imitate the kind of user interfaces that we see on native.
Do mobile websites really dream of being native apps, any more than they dreamt of being magazines?
CSS Grid Gotchas And Stumbling Blocks – Smashing Magazine
A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.
Basic grid layout with fallbacks using feature queries
A really nice example of progressive enhancement: creating a layout with inline-block, then flexbox, then Grid.