Three steps

To get going, include Stylecheat in your project and start writing HTML.

Link the stylesheet

index.html

Apply the context

index.html

Write plain HTML

index.html

Three layers

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

Context

stylecheat.css

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.

Elements

index.html

Tertiary

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

Modifiers

index.html

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.

My personal love letter to CSS

I see too many websites struggling with things that should be simple. Some of Stylecheat's elements have built in innovation to deal with this, without ever reaching for Javascript.

<accordion> Expands to its natural height without JavaScript, pure CSS on height: auto.<stack> Layers elements on top of each other with grid overlap. No position or z-index.<crow> Your best friend for anything layout related. Crow is short for "column-row" and works from a centered philosophy.

Introduction

Stylecheat

Introduction Context

Card Circle Crow Grid Sidebar Stack Sticky

Accordion Badge Breadcrumb Carousel Code Hr Icon Link Table Tabs Tooltip Typography

Button Switch Checkbox Radio Range Progress Select Textinput Textarea

Modifiers

Download v1.0.0

Stylecheat