Fractional. — Ethan Marcotte
Ethan’s ode to the fr unit in CSS grid.
Tags: layout
150
Should I try to use the IE version of Grid Layout? Revisited for 2018
Rachel follows up on my recent post about CSS grid in old IE with her thoughts.
As Jeremy notes, the usefulness of a tool like Autoprefixer is diminishing, which is a good thing. It is becoming far easier to code in a way that supports all browsers, where support means usable in an appropriate way for the technology the user has in front of them. Embrace that, and be glad for the fact that we can reduce complexity based on the increasing interoperability of CSS in our browsers.
How to build complicated grids using CSS grid
A nice walkthrough of a CSS grid in production. I was surprised to see percentages used as units—I wonder if it would feel “cleaner” if they were converted to fr units?
The Layouts of Tomorrow | Max Böck - Frontend Web Developer
A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).
While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.
Your Brain on Front-End Development | CSS-Tricks
I find this soooo relatable:
I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.
Difference is, Chris comes up with some very, very clever techniques.
CSS Grid — Responsive layouts and components – Deemaze Writing Wall – Medium
Rafaela Ferro has written a good case study on Ev’s blog of using CSS grid to build some practical image-based responsive components.
Getting Started With CSS Layout — Smashing Magazine
Rachel gives a terrific explanation of CSS layout from first principles, starting with the default normal flow within writing systems, moving on to floats, then positioning—relative, absolute, fixed, and sticky—then flexbox, and finally grid (with a coda on alignment). This is a great primer to keep bookmarked; I think I’ll find myself returning to this more than once.
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.
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!