To get going, simply include Stylecheat in your project:

Three layers

Stylecheat is built around three concepts: Context, Elements, and Modifiers.

Context

Set the stylecheat attribute to enable Stylecheat. It declares CSS custom properties for your theme — spacing, color, radius — that elements read from.

Stylecheat follows modern CSS theming conventions. The theme-setup is 1-1 with tweakcn for your convenience.

Elements

Semantic HTML elements that come styled out of the box. Use the custom element directly — no wrapper, no extra markup.

Tertiary

Thanks to Web Components being implemented in browsers, <any-element-name> is valid HTML. Stylecheat takes advantage of that to give elements readable, semantic names.

Modifiers

Attributes that adjust an element's appearance or behavior. sm, md, and lg set the spacing unit and font size together — everything inside scales with them.

Small unit Default unit Large unit

Don't worry — the class-based download lets you do the old and trusty <div class="card p-3 sm"> too.

Smart defaults

Where browsers still need a nudge, Stylecheat fills the gap with smart CSS techniques:

  • accordion — expands to its natural height without JavaScript, pure CSS on height: auto
  • stack — layers elements on top of each other using grid overlap, no position: absolute or z-index needed
  • crow — centered by default, flips to a column with vertical, aligns with left, up, and more
 Introduction
Stylecheat Stylecheat Introduction Context Elements Modifiers
LoginCarousel
Download