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.46/jazz.css"
/>

<!-- Optional: theme -->
<style>
  :root {
    --jazz-primary: light-dark(#111, #fefefe);
  }
</style>

You can also download the CSS file and host it yourself:

Download jazz.css

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>

With Tailwind

Jazz and Tailwind work well together. Jazz handles component styles, Tailwind handles layout and one-off utilities. There is no conflict because Jazz wraps all its styles in @layer jazz {}, which means any Tailwind utility class wins automatically without needing !.

To get the layering right, declare the layer order before importing either library. This ensures Tailwind's reset sits below Jazz, and Tailwind's utilities sit above it:

/* main.css */
@layer theme, base, jazz-reset, jazz, components, utilities;

@import "https://esm.sh/gh/erikthalen/jazz/jazz.css";
@import "tailwindcss";

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.