Why MinimaCSS?

What you actually get when you drop the framework in.

01

Change your brand colour in one place

Set the accent colour once and every button, link, focus ring, hover state, and shade follows. No config rebuild, no Sass recompile, no hunting through variables. Try the colour picker in the top-right.

02

Dark mode without the duplicate work

Light and dark modes are defined together, not in two separate files. No dark: prefix on every utility, no parallel theme to maintain — just flip the attribute and everything adapts.

03

Forms that don't yell at you

Empty required fields don't turn red the moment the page loads. Validation styling only appears after the user actually interacts with the field. Helper text, required asterisks, and error colours are handled for you.

04

Modals, menus & dropdowns — no JavaScript

Built on the browser's own dialog, popover, and details elements. You get accessible overlays, escape-to-close, focus restoration, and click-outside dismissal without writing or importing any JS.

05

No more `!important` battles

Utility classes are guaranteed to win over component styles. Adjust a margin, override a colour, change a border — it just works. No specificity wars, no !important chains.

06

Components that adapt to their container

The same card looks right whether it's in a narrow sidebar or a wide hero. Components respond to the space they're given, not the size of the page.

07

Common layouts as a single class

Stack things vertically, cluster them in a wrap-friendly row, put a sidebar next to main content — each layout is one class. Less hand-written flex and grid, fewer breakpoint guesses.

08

Smooth open and close animations

Modals, toasts, and slideovers fade in when opening and fade out when closing — automatically, both directions. No manual timing code, no animation-end juggling.

09

25+ components, ready to go

Buttons, modals, tables, navigation, cards, alerts, tabs, badges, avatars, tooltips, toasts, pagination, skeletons, empty states, popovers, forms — drop them in and they look right.

10

Accessible by default

Focus rings that show only on keyboard navigation, AA-grade contrast, motion that respects user preferences, touch-friendly hit areas, a real print stylesheet — all built in, no setup.

11

One file, ~24 KB gzipped

The whole framework drops in with a single <link> tag. No external fonts to load, no icon pack to bundle, no JavaScript runtime. Open the page and it works.

12

Built on modern CSS

Uses what browsers can actually do today — modern layout, modern theming, modern selectors. No polyfills, no legacy workarounds, no fighting with things the platform handles natively.

Typography

Fluid headings via clamp(). Orphan-free wrapping via text-wrap: balance on headings and pretty on paragraphs.

Heading 1 — display

Heading 2 — section

Heading 3 — subsection

Heading 4

Heading 5

Heading 6

A paragraph of body text. Long enough to wrap onto two lines so the text-wrap: pretty default avoids leaving a single orphan word on the last line.

Blockquotes get a left accent border and a subtle tinted background that adapts to light or dark mode.

Inline code and a preformatted block:

const greet = name => `hello, ${name}`;

Layout & Grid

A 12-column CSS Grid with gap. No negative margins, no per-column padding. Plus auto-fit and auto-flow patterns.

12-column grid (`.row` + `.col-N`)

col-6

col-4

col-3

col-6

col-3

<div class="row">
  <div class="col-6">…</div>
  <div class="col-6">…</div>
</div>

Auto-flow row (`.row-auto`)

Each child takes an equal share — no column numbers needed.

1

2

3

4

Responsive auto-fit (`.grid-auto-fit`)

Wraps to as many columns as fit, each at least --cell-min wide. No media queries.

A

B

C

D

E

F

<div class="grid-auto-fit" style="--cell-min: 10rem;">
  <div>…</div>
</div>

Buttons

Eight color variants × solid + outline. Sizes .btn-sm / .btn-md / .btn-lg. Focus rings use :focus-visible.

Solid variants

Outline variants

Sizes

Block & round

Button group

Forms

Native form controls, brand-tinted via accent-color. Validation uses :user-invalid — it only kicks in after the user interacts, so a pristine form never looks angry.

Inputs

Full name Your legal name.

Email Required. Try submitting an invalid address.

Message field-sizing: content

Topic

Switches, checkboxes, radios

Email notifications I agree to the terms Partially selected (indeterminate)

Free Pro Enterprise

Range

Cards

Container queries in action — each card adapts its padding to its own width, not the viewport.

Basic cards

Simple card

A card with just a body.

Header

Header + body + footer.

Stats

1,284

Active users this week.

Same card, two widths

Resize your window — both cards stay readable, but the wider one picks up generous padding via @container.

Narrow

Smaller padding because this card is < 32rem wide.

Wider

More padding kicks in at @container (min-width: 32rem).

Alerts

Inline contextual messaging.

Success! Your changes are saved.

Heads up. Disk space is almost full.

Error! We couldn't process your request.

FYI — version 0.3.0 is now available.

Outline success alert.

Outline warning alert.

Outline danger alert.

Outline info alert.

Badges, Avatars, Dividers

Badges

Primary Success Error Warning Info Light Dark

Avatars

AB

CD

EF

GH

Divider

Above the divider.

Below the divider.

Loader, Progress, Pagination

Loaders

Progress bars

25%

60%

Pagination

Joined pagination

Tabs & Accordion

Tabs

Overview Details Settings

High-level overview content.

Details. Lots of them.

Settings panel.

Accordion (native `<details>`)

What browsers do you support?

Baseline 2024+ — Safari 17.5+, Chrome 117+, Firefox 121+.

Can I tree-shake unused styles?

Build from source — comment out the @use lines in src/minimacss.scss you don't need, then npm run build.

Does it work with React / Vue / Svelte?

It's plain CSS. It works with any framework that renders HTML.

Segments

Day Week Month

Steps

Modal, Slideover, Toast

Modal uses the native <dialog> + @starting-style + transition-behavior: allow-discrete — it animates both open and close, including from display: none.

Slideover

Slideovers are great for filters, settings, or details panes.

Table

#	Name	Role	Status
1	Ada Lovelace	Engineer	Active
2	Alan Turing	Cryptographer	Active
3	Grace Hopper	Compiler architect	Away
4	Edsger Dijkstra	Theorist	Inactive

Tooltip & Dropdown

Tooltip

Dropdown (native `<details>`)

@starting-style animations

Modal, slideover and toast all transition both directions — including from display: none — by combining transition-behavior: allow-discrete with a @starting-style rule. Open and close any of the overlays in the previous section to see it in action.

:user-invalid forms

The native pseudo-class only matches once the user has interacted with the field. No JS class toggling. Try the form below: empty + un-touched looks neutral; submit it to trigger invalid styling.

Fluid spacing

.py-fluid-xl, .px-fluid-lg etc. scale with viewport using clamp(). Resize your window to watch the panel grow and shrink.

Fluid hero panel — padding scales with viewport.

Cascade layers

Utilities live in @layer utilities; components in @layer components. Utility classes win over component styles without ever needing !important. Here, the .bg-success utility overrides the .btn-primary background — no specificity hacks.

Layout primitives

One-line solutions for the layouts you currently write by hand. Each takes a --space variable for instance-level tuning.

.stack — vertical rhythm

First item

Second item

Third item — same gap between siblings, every time.

.cluster — wrap with gap

design ship v0.3.0 modern framework minimal

.sidebar-layout — responsive without media queries

.switcher — row → column at threshold

A

B

C

Popover & Menu JS-free

Native popover attribute + popovertarget button + CSS Anchor Positioning. The browser handles open/close, light dismiss, escape-to-close, focus restoration. Zero JavaScript.

Form .field JS-free

Auto-asterisk on required (:has(:required)). Auto-invalid helper colour on :has(:user-invalid). No JavaScript to toggle .is-invalid.

Input affixes & `.kbd`

Prefix/suffix slots that share a single focus ring via :has(:focus-visible). Native keyboard chip via .kbd.

$ USD

https://

@minimacss.dev

Press ⌘ + K to search, or Esc to dismiss this modal.

Skeleton & Empty state

Drop-in loading placeholders and "no data yet" panels. Skeleton shimmer is automatically disabled under prefers-reduced-motion.

Skeleton

Empty state

No orders yet

When your customers place an order it'll appear here. Want to test the dashboard? Create a sample order.

Scroll-snap JS-free

CSS-only carousels and horizontal chip rows. Drag, swipe, or arrow-key. Children snap to start, center, or end.

Snap carousel

Slide A

Scroll right to see siblings snap.

Slide B

Each card snaps to start.

Slide C

No JavaScript carousel library.

Slide D

Just scroll-snap-type.

Horizontal chip row (hidden scrollbar)

All Design Engineering Product Marketing Operations Support Sales Research Legal

A minimal CSS framework, fully modern.