Adactio: Links—Tagged with layout

SmolCSS

Minimal snippets for modern CSS layouts and components.

How to avoid layout shifts caused by web fonts – Simon Hearne

A terrific in-depth look at improving the performance of web fonts.

Responsible Web Applications

An excellent collection of advice and examples for making websites responsive and accessibile (responsive + accessible = responsible).

Sticky CSS Grid Items | Melanie Richards

This is a useful technique that future me is almost certainly going to need at some point.

What Makes CSS Hard To Master - Tim Severien

CSS is simple, but not easy.

If we, as a community, start to appreciate the complexity of writing CSS, perhaps we can ask for help instead of blaming the language when we’re confused or stuck. We might also stop looking down on CSS specialists.

Full bleed layout using simple CSS | Kilian Valkhof

A follow-up to full-bleed layout post I linked to recently. Here’s how you can get the same effect with using CSS grid.

I like the use of the principle of least power not just in the choice of languages, but within the application of a language.

CSS Grid full-bleed layout tutorial · Josh W Comeau

When you’ve got a single centered column but you want something (like an image) to break out and span the full width.

Uncommon CSS Properties

I count at least three clever CSS techniques I didn’t know about.

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 picture element to provide webp images 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.

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));

Link tags: layout

189