The little dress of CSS
Blouson v5.3.0
By Rémino Rem
https://remino.net/
Site | Code Repo | NPM Package
dress.css is a minimalist class-less stylesheet that makes your pages look great simply by writing HTML. Inspired by new.css but tailored with a custom vertical rhythm and no external fonts, it delivers modern typography, spacing, and interactive states out of the box. Earlier releases were known as sem.css.
- Small – roughly 5 KiB gzipped.
- Class-less – semantic HTML gets styled automatically.
- Modern – built with native CSS nesting, custom properties, and flexbox.
- Readable – carefully tuned typography and spacing.
- Responsive – relative units everywhere, zero media-query fuss.
- Accessible – friendly focus states and thoughtful defaults.
- Printable – attractive print layout with external URLs revealed.
- Customizable – override the CSS variables to theme it your way.
<link rel="stylesheet" href="https://unpkg.com/@remino/dress.css">Mirrors:
Install the package first:
npm add @remino/dress.cssThen, in your app, import its CSS file:
import '@remino/dress.css'Grab the latest dress.css from the
GitHub Releases.
Reference the Elements page for tag-by-tag examples that demonstrate the provided defaults.
Need finer control? dress.css publishes each internal layer so you can mix and match:
import '@remino/dress.css/layers/variables.css'
import '@remino/dress.css/layers/base.css'
import '@remino/dress.css/layers/links.css'
// ...These modules mirror the order of the main dress.css bundle, so importing them
sequentially reproduces the full experience while letting you override or skip
specific layers:
| Layer | Purpose |
|---|---|
variables.css |
Declares --dress-* CSS custom properties, icons, spacing, and motion tokens. |
base.css |
Applies the global reset, body/html sizing, and accessibility skip-link helpers. |
props.css |
Bridges browser quirks (e.g. color-scheme, text-size-adjust, scroll-behavior). |
inlines.css |
Normalises inline tags such as strong, em, abbr, and small. |
focus.css |
Provides consistent focus/active outlines and selection styling. |
links.css |
Styles anchors, download/external indicators, and heading-link wrappers. |
blocks.css |
Handles block-level spacing, generic containers, and vertical rhythm. |
sections.css |
Tunes header, main, section, and footer spacing/stacking. |
headings.css |
Typography scale for h1–h6, including fluid sizes and margins. |
images.css |
Shared rules for img, picture, and media elements (borders, captions). |
lists.css |
Normalises ul/ol padding, bullets, and definition lists. |
tables.css |
Table layout, borders, striping, and responsive tweaks. |
forms.css |
Inputs, buttons, selects, and checkbox/radio styling. |
code.css |
Monospaced typography, pre blocks, and inline code treatments. |
animation.css |
Keyframes and transition tokens used by other layers. |
popups.css |
Details/Summary, dialog, and tooltip helpers. |
print.css |
Print styles (margins, URL disclosure, simplified layout). |
@remino/dress.css |
Imports every layer above in the correct order. (Use this by default). |
Designed for evergreen browsers (current Chrome, Edge, Firefox, Safari, and
their mobile counterparts). Compatibility is periodically checked with
doiuse; older engines such as IE are
not supported.
This stylesheet is meant to stay up to date with the latest changes of
mainstream browsers, not to support old CSS forever. Major version changes will
likely break support of previous version of this stylesheet. Minor version
updates are less likely to do so, but there is still a possibility. If a
specific version of the stylesheet works best for you, stay with it. If you
prefer using the latest version, make sure to read the updates (CHANGELOG.md)
and to test your site or application.
This project is built with Vite (for the CSS library) and Astro (for the documentation site).
npm installnpm run build:css # Build dist/dress.cssnpm run dev # Start the Astro dev server
npm run build:site # Build the documentation site to deploy/public/npm run build # Run both buildsnpm run test:visual # Run tests
npm run test:visual:update # Update visual snapshots
npm run test:visual:ui # Show Playwright UISnapshots cover the Elements gallery, layout width fixtures, and anchor behavior.
Install Hurl locally, then execute:
npm run test:responsesThe suite targets the production origin declared in package.json#homepage by
default. Override with HURL_BASE_URL (and optionally HURL_USER_AGENT) to
point to staging or preview deployments.
- Fork the repository.
- Create a feature branch:
git checkout -b feature/amazing-feature. - Make your changes.
- Run
npm run buildandnpm test. - Commit, push, and open a pull request.
Issues and ideas are welcome—please star the project if you enjoy it!
Licensed under the ISC licence. See LICENSE.md.