Your first five minutes.

01 Get the stylesheet

Download the built core and save it in your project's public CSS folder. No package manager, CDN account, or build tool is required to use it.

The current core is 3,139 bytes gzip (level 9). Your server's compression settings may change the transferred size. See the measured report.

02 Link it and start composing

This complete starter uses a container, fluid heading, responsive grid, and a card. Replace the content and destinations with your own.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Styloft page</title>
  <link rel="stylesheet" href="/css/styloft.min.css">
  <body>
    <main class="sl-container sl-py-12 sl-stack sl-gap-6">
      <h1>Hello, possibility.</h1>
      <p class="sl-text-lg sl-text-muted">Your idea starts here.</p>
      <div class="sl-grid sl-md:cols-3 sl-gap-6">
        <article class="sl-card sl-stack">
          <h2 class="sl-text-xl">A little structure.</h2>
          <p>A flexible foundation for what comes next.</p>
          <a class="sl-btn" href="/about">Learn more</a>
        </article>
      </div>
    </main>
  </body>
</html>

03 Make the tokens yours

Add your own stylesheet after StyloftCSS. Unlayered application rules override the framework's normal layered rules.

:root {
  --sl-accent: #075985;
  --sl-accent-hover: #0c4a6e;
  --sl-on-accent: #ffffff;
  --sl-focus: #075985;
  --sl-radius: .4rem;
  --sl-container: 80rem;
}

For dark scopes, override the corresponding tokens on [data-theme="dark"] too. Recheck contrast whenever you change foreground or background colors. Explore all tokens →

04 Add only the modules you need

Core already contains reset, tokens, base typography, layouts, utilities, and basic components. Prose and tables are separate stylesheets that depend on core tokens.

<link rel="stylesheet" href="/css/styloft.min.css">
<!-- Optional: only add what your page uses. -->
<link rel="stylesheet" href="/css/prose.min.css">
<link rel="stylesheet" href="/css/tables.min.css">
<!-- Optional component variants, exact-pixel breakpoints, and motion. -->
<link rel="stylesheet" href="/css/variants.min.css">
<link rel="stylesheet" href="/css/responsive.min.css">
<link rel="stylesheet" href="/css/motion.min.css">

The utility vocabulary

Spacing steps: 0, 1, 2, 3, 4, 6, 8, 12, 16. Responsive variants apply to columns, display, and flex direction: sm 40rem, md 48rem, lg 64rem. Classes use a literal colon in HTML.

Using Astro?

This very website is built with Astro and StyloftCSS. Import the CSS once in your shared layout's frontmatter. Astro handles it at build time; no client-side framework is needed.

---
import '../styles/styloft.css';
---
<html lang="en">
  <body><slot /></body>
</html>

Using the repository locally? Run npm run site:dev from its root. Use npm run site:build for static output in website/dist/. The CSS framework stays in the root dist/.