There’s a great feeling I get when I find a resource that presents elegant, comprehensive solutions to a problem; something that allows me to say “Good: I know how to do this properly now.”

Every Layout is such a resource for me. It presents composable CSS “layout primitives” that can be used to build… well, it’s in the title. It also includes a series of articles explaining the principles behind the design decisions (“rudiments”); great reading if you want a deeper dive into the concepts.

The site you’re reading now was built with several of the patterns in the small but comprehensive list. To make using these layouts easier, I extract them into reusable PostCSS Mixins. This provides a library of layout patterns that I can apply to any element just by calling the mixin. It has become one of the first things I import into new projects.

Here’s an example of the Stack layout, a way to apply margins to elements in their block flow direction (chosen from the list of layouts you can access without purchasing).

@define-mixin stack $margin {
  & > * + * {
    margin-block-start: $margin;
  }
}

/***/

article-list {
  @mixin stack var(--s2);
}

And a slightly more complicated example, the Sidebar.

@define-mixin sidebar $basis {
  flex-basis: $basis;
  flex-grow: 1;
}

@define-mixin sidebar-content $min-inline-size {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: $min-inline-size;
}

@define-mixin sidebar-parent $gap {
  display: flex;
  flex-wrap: wrap;
  gap: $gap;
}

/***/

body {
  @mixin sidebar-parent 2rem;
  padding: 2vw;
}

body > header {
  @mixin sidebar 20rem;
}

body > main {
  @mixin sidebar-content 50%;
}

These mixins are trivial to extract from the code provided by Every Layout.

I highly recommend giving it a glance if you’re looking for an elegant, composable approach to building all your CSS layouts.