Tagged with jeremy keith

The other day I spotted these lovely VHS posters and wondered how you might make that slanted background pattern there with just CSS. So I took a crack at it and got pretty close:

See the Pen Responsive JVC Video Cassette by Robin Rendle (@robinrendle) on CodePen.

This isn’t an SVG (which is probably the best way to make something like this) but instead it’s plain ol’ CSS. Try and resize the browser though and you’ll see it respond to the height and width of the viewport which feels swish.

So here’s a quick summary of the trick: first I set up container queries and aspect-ratio on the wrapper element...

.cassette {
	container-type: inline-size;
	aspect-ratio: 70/99;
}

That’s what handles all the resizing. Now we can set up some variables:

:root {
  --first-stop: 20cqw;
  --second-stop: 40cqw;
  --third-stop: 60cqw;
  --fourth-stop: 80cqw;
  --fifth-stop: 100cqw;
  --sixth-stop: 150cqw;
  --red: hsl(350, 100%, 50%);
  --orange: hsl(13, 100%, 50%);
  --gray: hsl(17, 19%, 73%);
  --white: hsl(0, 0%, 100%);
}

Those cqw length units are pretty dang handy. 1cqw is 1% of the container’s width which means I can use them in the repeating-linear-gradient property below to create that background pattern:

.body-wrapper {
  background-image:
    repeating-linear-gradient(
      135deg,
      var(--white),
      var(--white) var(--first-stop),
      var(--red) var(--first-stop),
      var(--red) var(--second-stop),
      var(--orange) var(--second-stop),
      var(--orange) var(--third-stop),
      var(--gray) var(--third-stop),
      var(--gray) var(--fourth-stop),
      var(--white) var(--fourth-stop),
      var(--white) var(--fifth-stop),
      var(--white) var(--sixth-stop),
    );
}

I’m sure there’s a more elegant way of doing this but I kept playing around with these values until it looked right. I also set the font-size and position of elements to respond to the size of the container, too:

header {
  padding: 3cqw;
}

h2 {
  font-size: 10cqw;
}

This is fantastic because it means I don’t have to write a bunch of media queries all over the place. I just set the font-size and forget it. And that’s not a dig at media queries! Well, okay – it is. But I am slowly coming to the conclusion that media queries are a design smell. Sometimes they indicate that my code could use more modern CSS techniques to avoid that little bit of extra complexity and logic.

Wellllll...sorta. Chris wrote about this optimistic view of container queries where we all assumed that...

...on any given project, there would be more @container in the CSS than @media. I joined that refrain. I thought for sure it would be true, if not, more like 75%, especially considering how so many sites these days are created by composing sites through component libraries, and since components don’t know where they will be used, the CSS that style those components would use all container queries.

So, did this turn out to be true?

Anecdotally: no, not really.

It’s a great breakdown of why we don’t use container queries all over the place like I have in my little demo above. But either way, this whole “web poster” design with cqw units and a dash of aspect-ratio is super neat and it reminds me of what Jeremy said just the other day:

I really like the newly-launched website for this year’s XOXO festival. I like that the design is pretty much the same for really small screens, really large screens, and everything in between because everything just scales. It’s simultaneously a flyer, a poster, and a billboard.

Smart take here from Jeremy about composable design systems:

Colours, spacing, type; these are all building blocks that a designer can compose with. But it gets murkier after that. Pre-made form fields? Sure. Pre-made forms? No thank you!

It’s like there’s a line where a design system crosses over from being a useful toolkit into being a bureaucratic hurdle to overcome. When you hear a designer complaining that a design system is stifling their creativity, I bet it’s because that line has been crossed.

Jeremy argues that design systems should have many small pieces that can be easily reconfigured—and this happens to tie in nicely from another post of his about HTML web components:

...what if my web component needs to do two things?

I make two web components.

The beauty of custom elements is that they can be used just like regular HTML elements. And the beauty of HTML is that it’s composable.

Yes! This is precisely why I started ranting a while back about how, whenever I confront a design system problem, I ask myself this one question that guides the way: “What would HTML do?”

HTML is the ultimate composable language. With just a few elements shuffled together you can create wildly different interfaces. And that’s really where all the power from HTML comes from: everything has one job, does it really well (ideally), which makes the possible options almost infinite.

Design systems should hope for the same.