Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Home/Layouts
Space, thoughtfully arranged

A place for every idea.

Build the structure with simple layout primitives. Let the content decide how much space it needs.

Grid + FlexboxLogical propertiesMobile first

Responsive columns

One column by default, two from 40rem, and three from 64rem. Resize the window to try it.

Live preview
Column 01
Column 02
Column 03
Column 04
Column 05
Column 06
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-grid sl-sm:cols-2 sl-lg:cols-3 sl-gap-4">
  <div class="demo-cell">Column 01</div>
  <div class="demo-cell">Column 02</div>
  <div class="demo-cell">Column 03</div>
  <div class="demo-cell">Column 04</div>
  <div class="demo-cell">Column 05</div>
  <div class="demo-cell">Column 06</div>
</div>
HTML source · enable JavaScript for the playground8 lines · UTF-8

Auto-fit cards

No breakpoint classes needed. Columns fit the space available.

Live preview

First idea

A flexible foundation.

Next idea

Room to grow.

Another idea

A new perspective.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-auto-grid sl-gap-4" style="--sl-card-min: 12rem">
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">First idea</h3>
    <p class="sl-text-muted">A flexible foundation.</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">Next idea</h3>
    <p class="sl-text-muted">Room to grow.</p>
  </article>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-lg">Another idea</h3>
    <p class="sl-text-muted">A new perspective.</p>
  </article>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

Sidebar and content

The pair stacks naturally when its minimum widths no longer fit.

Live preview

Your content, in focus.

A flexible content region beside a comfortable navigation column. No fixed pixel widths.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-sidebar sl-gap-6">
  <aside class="sl-card sl-stack">
    <h3 class="sl-text-lg">On this page</h3>
    <a href="/light/getting-started/">The foundation</a
    ><a href="/light/themes/">Your palette</a>
  </aside>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-xl">Your content, in focus.</h3>
    <p class="sl-text-muted">
      A flexible content region beside a comfortable navigation column. No fixed pixel
      widths.
    </p>
  </article>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

A rhythm that carries through

Stack spaces siblings; cluster wraps related actions. Nest them to build useful patterns.

Live preview

Your project collection

3 ideas
The beginning
The next chapter
The possibility

Illustrative layout pattern.

Explore more ↗
View HTML / PlaygroundHTML source
example.htmlHTML
<section class="sl-card sl-stack sl-gap-6">
  <div class="sl-cluster sl-justify-between">
    <h2 class="sl-text-xl">Your project collection</h2>
    <span class="sl-badge">3 ideas</span>
  </div>
  <div class="sl-grid sl-md:cols-3 sl-gap-4">
    <div class="demo-cell">The beginning</div>
    <div class="demo-cell">The next chapter</div>
    <div class="demo-cell">The possibility</div>
  </div>
  <div class="sl-cluster sl-justify-between">
    <p class="sl-help">Illustrative layout pattern.</p>
    <a class="sl-btn" href="/light/components/">Explore more ↗</a>
  </div>
</section>
HTML source · enable JavaScript for the playground15 lines · UTF-8