Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
NEW A fresh foundation for the web

Build lighter.
Create freely.

A modular CSS framework that gives your ideas room to breathe. Thoughtful defaults, flexible layouts, and zero runtime JavaScript.

Start building Explore components
No dependencies at runtime Yours to customize
THE COMPONENT PLAYGROUND
Your ideas, beautifully structured.
Made with Styloft

A little inspiration

A space to make
something yours.

Start simple. Add your perspective.

Meet the components
YOUR PALETTE
One token. A whole new feeling.
.sl-card { padding: var(--sl-space-6); }Small classes. Thoughtful defaults.
3.31 KBMeasured core · gzip
0 JSNo runtime scripts
6 layersA predictable cascade
100% yoursOpen source · MIT license
Good defaults. Better possibilities.

Everything you need.
Room for everything else.

Start with the foundation. Add the pieces that fit. Let your design take it from there.

01

A foundation, not a formula.

Design tokens and cascade layers keep your decisions connected without locking you into one look.

02

Responsive by nature.

Fluid type, flexible rows, and composable grids adapt to the space your content actually needs.

03

Considered from the start.

Visible focus, semantic HTML, light and dark palettes, and respect for reduced-motion preferences.

The component collection

From a first impression
to the finer details.

Browse all 18 categories

Headers

Cards

Buttons

Accordions

Tables

Hover & motion

From idea to interface

Good HTML.
A little CSS.
You're on your way.

No configuration maze. No application scanner. Link one stylesheet, compose a few classes, and focus on what you're making.

Your first five minutes
your-next-idea.html
<!-- A foundation. Your imagination. -->
<link rel="stylesheet"
      href="styloft.min.css">

<div class="sl-grid sl-md:cols-3">
  <article class="sl-card sl-stack">
    <h2>Hello, possibility.</h2>
    <p>Your idea goes here.</p>
  </article>
</div>
Plain HTML. Real possibilities.
A change of atmosphere

One system.
Your spectrum.

From a bright beginning to a quieter canvas. Semantic tokens keep your whole interface in tune.

Explore tokens & themes
Light

A fresh start.

Room to think.

Explore ↗
Dark

A quiet canvas.

Space to focus.

Explore ↗
Your next idea starts here

A small stylesheet.
A wide-open canvas.

Let's build something Download CSS

CSS only. Open source. Made for the web.