From first class to finished page.

Install only what you need

Download the core CSS and place it in your project’s public CSS directory. No npm package publication or build step is required to use it.

<link rel="stylesheet" href="/css/styloft.min.css">

For just buttons, download the standalone buttons pack; it includes its own tokens and dependencies. Use it alone. For several families, use the core plus their optional modules to avoid repeated shared rules.

<link rel="stylesheet" href="/css/buttons.min.css">
<button class="sl-btn sl-btn--outline">Save changes</button>

Inside a bundler project, vendor the CSS and import it from your own source path. This repository is currently private for npm publishing; do not assume an npm install command exists. Load your custom CSS after StyloftCSS.

Tutorial 1: build a responsive card section

Start with sl-container for readable width, sl-stack for vertical rhythm, and sl-grid for columns. The sl-md:cols-3 class adds three columns at the core medium breakpoint. Smaller screens keep the natural single-column layout.

<section class="sl-container sl-py-12 sl-stack sl-gap-6">
  <h2 class="sl-text-xl">A responsive card grid</h2>
  <div class="sl-grid sl-md:cols-3 sl-gap-6">
    <article class="sl-card sl-stack sl-gap-4">
      <h3 class="sl-text-xl">Plan</h3>
      <p>Start with a clear structure.</p>
      <a class="sl-btn" href="#installation">Read the guide</a>
    </article>
    <article class="sl-card sl-stack sl-gap-4">
      <h3 class="sl-text-xl">Design</h3>
      <p>Use tokens to connect your choices.</p>
    </article>
    <article class="sl-card sl-stack sl-gap-4">
      <h3 class="sl-text-xl">Build</h3>
      <p>Ship only the modules you need.</p>
    </article>
  </div>
</section>

Tutorial 2: theme with design tokens

Override semantic custom properties in your application stylesheet, after the core. Keep foreground and background pairs together and check contrast. A data-theme attribute scopes the built-in light or dark palette.

:root {
  --sl-accent: #006c7a;
  --sl-on-accent: #ffffff;
  --sl-radius: .75rem;
}

/* Apply to the page root: <html data-theme="dark"> */

Optional modules inherit these tokens. Consult tokens and themes for visual examples, and search the class reference for each class’s real declarations and source modules.

Complete page examples

These templates include document metadata, a skip link, responsive layout and semantic landmarks. They use only the framework CSS and no component JavaScript.

• Open the studio landing page — header, hero, service cards and footer.
• Open the contact template — labels, native field constraints and form layout. Submission is deliberately disabled until you connect a backend.

Download the archive below to get both HTML files with the stylesheet. Replace sample copy and contact details before publishing.

Version 0.1.0 — release candidate

The core measures 3,313 bytes gzip, excluding optional modules and website assets. This archive contains the CSS distributions, standalone packs, MIT license and complete examples. It has not been published to npm or as a GitHub release.

Download v0.1.0 ZIP SHA-256 checksum

Get-FileHash .\styloftcss-0.1.0-93a0ab1d039e.zip -Algorithm SHA256

Changelog

• CSS core with tokens, layers, layout utilities and basic components.
• Optional modules, 41 standalone packs and native interaction examples.
• Dark/light documentation, HTML playgrounds, class search and complete page templates.

Pin versioned download paths for reproducible projects. Once an official release is tagged, its archive must not be replaced; new changes need a new version.

Browser support and fallbacks

The core targets current Chrome/Edge, Firefox and Safari with CSS custom properties and cascade layers. Native dialog invoker commands, popovers, scroll-driven animation, customizable selects and smooth details closing have different support levels. Basic content and native fields remain usable when visual enhancements are unavailable.

Validation runs in Chromium; Firefox, Safari and assistive-technology verification are not yet claimed. Read each component’s notes before relying on newer features. Sliders use native scrolling; calendars and color areas explicitly identify the application logic they need.

Build for keyboard and assistive technology

Use meaningful headings, labelled controls and visible link names. Preserve the skip link and focus indicator. Keep the native details, dialog and form semantics shown in the examples; do not add ARIA roles without implementing their required behavior.

Motion respects prefers-reduced-motion. Check your own token combinations for text and control contrast, and test at narrow widths and with enlarged text. Automated checks supplement keyboard testing; they do not certify WCAG conformance or replace a screen-reader review.