Splendid layouts

Philosophy

This library is created to make layouts easy and intuitive. Here are the principles I’ve kept in mind when designing the library:

  1. Easy, Simple, and Obvious
  2. Flexible
  3. Composible
  4. Maintainable

Easy, Simple, and Obvious

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

CSS is fun. But I often find myself losing the bigger picture when I dive into the nitty gritty CSS details. Hours would pass, and I would have forgotten what the hell I was trying to do…

This library is built to counter that.

Instead of writing CSS, we have layout components that are visual. So we can keep the bigger picture in mind. This is why we use classes like horizontal, vertical, grid-with-breakout — you know what you’re building as you write them out.

<!-- This creates a horizontal layout... -->
<!-- Quite obvious, yeah? -->
<div class="horizontal">...</div>

Flexibility

The flexibe and composabe capabilities let you create almost every layout you want — without writing extra CSS

Layout classes here are designed to be flexible so you can be creative and build without limitations. We do this through class modifiers and CSS variables.

For example, you can change the --cols variable in grid-simple to grids with any number of columns.

<!-- 2-column layout -->
<div class="grid-simple [--cols:2]"> ... </div>


<!-- 4-column layout -->
<div class="grid-simple [--cols:4]"> ... </div>

For a better understanding of how to use CSS variables — with or without Tailwind — see the CSS Variables guide.

Composability

Stack multiple classes to create more complex layouts

Classes in Splendid Styles are like lego blocks — each one serves a specific function — so they can be put together to make a greater whole.

The simplest example here is the vertical class. On this vertical class, you can align items to the start, center, or end of the layout with items-* classes.

<div class="vertical"> ... </div>
<div class="vertical items-start"> ... </div>
<div class="vertical items-center"> ... </div>
<div class="vertical items-center"> ... </div>

You can also align the child item separately with the self-* classes.

<div class="vertical">
  <div> Default </div>
  <div class="self-start"> Start </div>
  <div class="self-center"> Center </div>
  <div class="self-end"> End </div>
</div>

If you use Tailwind, you can also create responsive layouts with their responsive variants. This example below creates a 1-column layout on mobile and 2-column layout on tablet viewports.

<div class="grid-simple md:[--cols:2]"> ... </div>

Maintainability

By abstracting away implementation details, your code becomes more maintainable - since you no longer have to worry about the underlying CSS.

If you’ve written CSS in any capacity, you know how difficult it can be to maintain — open up your code and you’ll be swimming in so much CSS details that you often get lost…

With this library, we remove those implementation into simple reusable classes so your code becomes easier to for you to maintain! To help you understand this, let’s take a look at what’s under the hood for one of the most useful classes — grid-simple.

<div class="grid-simple"> ... </div>

There are many implementation details here. For now, I want to draw your attention to the max-width and minmax properties.

  • minmax allows the grid to be responsive.
  • max-width ensures you never have a grid blowout.

By abstracting these into grid-simple, you no longer need to create CSS Grids from scratch — and hence skip the nitty gritty implementation details.

Write less, do more

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

We let you write less code and get more done by removing as many obstacles as possible.