Jazz
A CSS reset and a small UI library in one stylesheet.
Jazz is somewhere between a CSS reset and a classless CSS project. It styles native HTML elements directly, so plain semantic markup looks decent with no extra work. A small set of opt-in class names covers the things HTML can't express on its own.
It takes a lot of inspiration from Pico CSS: the idea that a stylesheet should improve the browser's defaults rather than replace them. Jazz adds a richer component set and a theming layer on top of that.
Usage
Link the stylesheet from the CDN:
<link
rel="stylesheet"
href="https://esm.sh/gh/erikthalen/jazz@v0.1.0-beta.25/jazz.css"
/>
<!-- Optional: theme -->
<style>
:root {
--jazz-primary: light-dark(#111, #fefefe);
}
</style>Overview
Jazz styles native HTML elements directly, no class names required.
<fieldset role="group">
<input type="text" placeholder="Input" /> <button>Button</button>
</fieldset>UI, not layout
Jazz handles the look of interactive elements (buttons, inputs,
popovers) but deliberately stays out of the way of how you arrange
them on the page. CSS flex and grid are fast
to write, easy to read, and need no abstraction on top of them.
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
"
>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="email" placeholder="Email" style="grid-column: 1/-1" />
<button style="grid-column: 1/-1; justify-self: end">Submit</button>
</div>Philosophy
Jazz is also a personal testbed for modern CSS. New features like
anchor positioning, @starting-style, the Popover API, and
:has() are tried out here first. The aim is to see how
far CSS alone can get before JavaScript is needed.
Because of that, Jazz leans on newer browser features and isn't aimed at projects that need broad compatibility. It's more of a place to experiment than a production-ready toolkit.