Uncommon CSS Properties
I count at least three clever CSS techniques I didn’t know about.
Link tags: layout
182
Grid Cheatsheet
A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.
Hybrid positioning with CSS variables and max() – Lea Verou
Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:
The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.
That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.
The beauty of progressive enhancement - Manuel Matuzović
Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.
Some great practical examples of progressive enhancement on one website:
- using grid layout in CSS,
- using
type="module"to enhance a form with JavaScript, - using the
pictureelement to providewebpimages in HTML.
All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.
Learn Box Alignment
A cute walkthrough for flexbox and grid.
[css-grid-2] Masonry layout · Issue #4650 · w3c/csswg-drafts
This is an interesting looking proposal for CSS grid to be ever so slightly extended to enable Masonry-style auto placement—something’s that tantalisingly close right now, but still requires some JavaScript to do calculations.
Case Study: lynnandtonic.com 2019 refresh - lynnandtonic.com
Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!
The Thought Process Behind a Flexbox Layout | CSS-Tricks
This is such a great way to explain a technology! Chris talks through his thought process when using flexbox for layout.
Print To CSS by Dan Davies
A series of really nice CSS grid demos based on two-page magazine spreads.
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.