One CSS file with the context, every element and every modifier. Choose whether you write them as custom elements and attributes, as classes, or both, decide on the experimental modifiers, and drop it in.

Variant

Both (recommended) Mix the two freely in one project.

index.html

Class-less Custom elements and attributes only.

index.html

Class-based* Plain divs with classes, nothing else.

index.html

* Class-based is the traditional way of dealing with CSS: plain elements with classes that every browser, validator and tool understands. Class-less swaps them for tags like <card> and <crow>, which the HTML spec doesn't count as custom elements because they lack a hyphen. Browsers still parse and style them like any other tag, but the practice is considered anti-pattern by many, and validators will flag it.

Experimental

Include ChromeOnlyModifiers.css Typed attr() modifiers such as p="4" and w="50". Only Chromium 133 and newer support them today. Leave on for the latest, turn off for the widely supported build.

Download

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