erikt/ui
A CSS reset and a small UI library in one stylesheet.
erikt/ui 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.
The core idea is borrowed from Pico CSS. A stylesheet should improve the browser's defaults, not replace them. erikt/ui adds more components and a theming layer on top.
Usage
Link the stylesheet from the CDN:
<link rel="stylesheet" href="https://esm.sh/@erikt/ui" />
<!-- Optional: theme -->
<style>
:root {
--ui-primary: light-dark(#111, #fefefe);
}
</style>You can also download the CSS file and host it yourself:
Download ui.cssOverview
erikt/ui styles native HTML elements directly, no class names required.
<fieldset role="group">
<input type="text" placeholder="Input" /> <button>Button</button>
</fieldset>UI, not layout
erikt/ui styles interactive elements (buttons, inputs, popovers) and
leaves the page layout to you. flex and grid
are already short to write and easy to read. Wrapping them in classes
doesn't make them better.
<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
erikt/ui and Tailwind get along. erikt/ui handles component styles,
Tailwind handles layout and one-off utilities. Nothing collides,
because erikt/ui wraps everything in @layer ui {} and any
Tailwind utility beats it without the ! prefix.
Declare the layer order before importing either library. That puts Tailwind's reset below erikt/ui and its utilities above:
/* main.css */
@layer theme, base, ui-reset, ui, components, utilities;
@import "https://esm.sh/@erikt/ui";
@import "tailwindcss";Philosophy
erikt/ui is also where I try out new CSS. Anchor positioning,
@starting-style, the Popover API and :has()
all landed here first. The question I keep poking at is how far CSS
gets before JavaScript is needed.
So it leans on very new browser features and isn't meant for projects that need broad support. Treat it as an experiment rather than a production toolkit.