Philosophy

Splendid Layouts exists to help you make layouts. There are a few principles we keep in mind to make this happen.

Easy and obvious
Flexibility
Composability
Maintainability

Easy and Obvious

We use keywords that are highly recognizable in Splendid Layouts so they’re obvious to you — and you immediately know what’s going on when you create or read your markup.

This is why we use classes like: Shell, Vertical, Horizontal, Card, and SimpleGrid. Each of these classes tell you what you can expect — even if you’re encountering them for the first time!

It’s far easier to think of “two column grid” and “left sidebar” than to conjure up the CSS properties to make these layouts

Flexibility

Layout classes need to be flexible so they can be used to create many different layouts. By using CSS variables and modifiers, we make our classes flexible and easy to use.

For example, SimpleGrid can be used to create CSS Grids with any number of columns — from 1 to Infinity (or whatever your layout allows).

<!-- 2-column layout -->
<div class="SimpleGrid" style="--cols: 2">
  ...
</div>

<!-- 4-column layout -->
<div class="SimpleGrid" style="--cols: 4">
  ...
</div>

If you’re more old-school — and prefer to keep markup separate from presentation — you can still create layouts easily with CSS variables.

<!-- 2-column layout -->
<div class="SimpleGrid YourCustomGrid">...</div>

<style>
  .YourCustomGrid {
    --cols: 2;
  }
</style>

Between flexibility and composability, you’ll almost never need to write any styles to create the layouts you want.

Composability

Splendid Layouts classes are like Lego blocks — each one of them serves a specific function — and they can be put together to make a greater whole.

For example, we have a Vertical class that is used to create a vertical layout. On this Vertical class, you can use items-* to align items to the start, center, or end of the layout.

<div class="Vertical">
  <div>Stretch</div>
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-end">End</div>
</div>

By your powers combined, I am Splendid Layouts! 🤭

Maintainability

We made your code cleaner and more maintainable by building the features you need into our layout classes.

For example, if you build a responsive CSS grid by yourself, you need to use minmax and min to make it responsive. You may also need to ensure children elements don’t overflow with max-width.

These implementation details are necessary, but they make your code more complex and harder to maintain. So we’ve whisked them from your codebase into ours — and you’re left with less of a mess.

<div class="SimpleGrid"> ... </div>

.SimpleGrid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: var(--gap, 1rem);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;

  > *,
  > *:where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    grid-column: var(--start, auto) / span var(--span, 1);
    max-width: 100%;
  }
}

We also standardize CSS Variables we use across Splendid Layouts so layout classes can share variables when it makes sense to.

For example, you can change the border-width and padding properties to adjust the size of any card element you build across the board.

<div
  class="Card-split DividerBetween ..."
  style="--padding: <value>; --border-width: <value>"
>
  ...
</div>

We think your brainpower is better used to build features and solve problems instead of parsing code.

Write less, do more

This is a cliché, but it is essentially what we do for all the libraries in Splendid Labz.

We want you to write less code and get more done. So we remove every obstacle we can find along the way. It’s the essence behind all our libraries.