intrinsic design – CSS-Tricks

Are we in a new era of web design? What do we call it?

Chris Coyier — Mon, 21 Jun 2021 21:22:33 +0000

Una is calling it the new responsive. A nod to the era we were most certainly in, the era of responsive design. Where responsive design was fluid grids, flexible media, and media queries, the new responsive is those things too, but slotted into a wider scope: user preference queries, viewport and form factor, macro layouts, and container styles.

I like the thinking and grouping here and I kinda like the name. It alludes to an evolution and extension of responsive web design rather than a rejection and replacement.

This isn’t the first crack at identifying and naming a shift between eras. Back in 2018, Jen Simmons was doing a talked called “Everything You Know About Web Design Just Changed” where she identified that responsive design was a major shift in how we did layout on the web. And yet, it was firmly defined in an era where layout tools like flexbox and grid didn’t even exist. Now, they do exist, and with them a bevy of other new features that bring more capable graphic design to the web. She called it Intrinsic Design.

I almost like Intrinsic Design more now than I did in 2018, because now, if we attempt to lump in @container queries, the name makes more intuitive sense. We (hopefully will soon) make styling choices based on the intrinsic size of elements. We make styling choices based on the intrinsic nature of the individual users we serve. We make styling choices off the intrinsic qualities of the browser.

I wouldn’t say either of the terms have really caught on though. It’s hard to make a name stick. That little burst of ideating around CSS4 sure didn’t go anywhere.

To Shared Link — Permalink on CSS-Tricks

Are we in a new era of web design? What do we call it? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

People Digging into Grid Sizing and Layout Possibilities

Chris Coyier — Fri, 15 Mar 2019 22:26:19 +0000

Jen Simmons has been coining the term intrinsic design, referring to a new era in web layout where the sizing of content has gone beyond fluid columns and media query breakpoints and into, I dunno, something a bit more exotic. For example, columns that are sized more by content and guidelines than percentages. And not always columns, but more like appropriate placement, however that needs to be done.

One thing is for sure, people are playing with the possibilities a lot right now. In the span of 10 days I’ve gathered these links:

Sophisticated Partitioning with CSS Grid – So awesome, like the way quantity queries sorta randomize to deliver interesting layouts based on how many items in a grid.
Responsive spacing with viewport and ch units – Using the viewport for sizing, but giving typography a strong say in how things respond.
Building Robust Layouts With Container Units – With bonus CSS custom properties and calc().
Content-based grid tracks and embracing flexibility – Don’t forget about our interesting new friends, min-content, max-content, and auto in the context of grid sizing.

People Digging into Grid Sizing and Layout Possibilities originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Understanding the difference between grid-template and grid-auto

Chris Coyier — Mon, 22 Oct 2018 21:16:25 +0000

Ire Aderinokun:

Within a grid container, there are grid cells. Any cell positioned and sized using the grid-template-* properties forms part of the explicit grid. Any grid cell that is not positioned/sized using this property forms part of the implicit grid instead.

Understanding explicit grids and implicit grids is powerful. This is my quicky take:

Explicit: you define a grid and place items exactly where you want them to go.
Implicit: you define a grid and let items fall into it as they can.

Grids can be both!

To Shared Link — Permalink on CSS-Tricks

Understanding the difference between grid-template and grid-auto originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Don’t use empty or low content for your design system grid examples

Chris Coyier — Tue, 25 Sep 2018 18:44:48 +0000

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave.

For example, take this (contrived) grid setup:

.grid {
  display: grid;
  grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}

Each of those columns will behave differently.

I’m just wrapping my head about this, and definitely don’t fully understand it. Here’s what it seems like to me, numbered 1-4 based on the “strength” (I guess?) of the width.

.grid {
  display: grid;
  grid-template-columns: 
    1fr                  /* #4 - Weakest, will fill remaining space */
    minmax(50px, 100px)  /* #3 - Will only start changing when other columns force it */
    20%                  /* #1 - Definite size, steady */
    auto                 /* #2 - Indefinite size, entirely based on content, pushy */
  ;
}

This is much different from quite a long history of how we’ve set up grid columns in the past. Float-based grids typically use percentages (a definite size) to set columns. Same with inline-block-based grids, typically.

Even with grid, if you set up all your columns with all percentages or all fractional units, you’d likely have a steady grid in which the content inside won’t mess with sizing. But Jen is saying that it’s interesting to have a grids where the content has a say in how they size. Embrace it. Sounds fun to me.

But anyway, say you’re setting up a grid that uses mixed values for column widths like this. Don’t do that with totally empty columns, otherwise, you’ll get a false sense of how those columns will behave.

Just look at this demo where these four grids have the exact same setup and all that is different is the amount of text in each column.

See the Pen Different Collapse Rates of Different Column Width Values by Chris Coyier (@chriscoyier) on CodePen.

Cool’n’weird.

Don’t use empty or low content for your design system grid examples originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.