dress.css

The little dress of CSS.

Site | Code Repo | NPM Package

By Rémino Rem https://remino.net/

• Minimal style for semantic HTML
• Features
• Installation
  • HTML
  • NPM
  • Download
• Usage
• Browser Support
• Tests
  • Visual Regression Testing
  • Web Site Response Testing
• Contributing
• License

Minimal style for semantic HTML

Introducing dress.css, a minimalist class-less stylesheet that makes your pages look good only by writing HTML.

In fashion, the Little White Dress (LWD) is a go-to outfit for daytime, while a Little Black Dress (LBD) is a timeless choice for evenings. Practical and stylish defaults. This is the CSS version of those for webpages.

This simple stylesheet was born from three things:

• How the rendering of HTML without CSS hasn’t changed much since the first Web browser in 1991.
• How common readers in some browsers (like the one in Safari) simplifies the styling the pages to focus on legibility.
• How writing CSS for simple pages is dreadful or at least time-consuming.

Much of this stylesheet was inspired from new.css, with a few changes to vertical rhythm and markup for button links, and no external fonts.

This stylesheet was formerly known as sem.css in version 1.2.4, and renamed as dress.css in version 2.0.0.

Back to top

Features

• Small: Around 5 KiB, gzipped.
• Class-less: No need to add classes to your HTML elements.
• Modern: Uses CSS variables, viewport sizes, and flexbox.
• Readable: Focus on the content, not the style.
• Responsive: Uses relative units, works well on all screen sizes.
• Accessible: Uses semantic HTML elements and ARIA roles.
• Printable: Looks good on paper. Shows external link URLs.
• Localizable: Works both with left-to-right and right-to-left languages.
• Customizable: Add your own styles on top of it, or add a theme by changing variables.

Back to top

Installation

There are many ways to include this stylesheet in your code. Here are a few examples:

HTML

Add the stylesheet to your HTML and write your content:

<link
  rel="stylesheet"
  href="https://unpkg.com/@remino/dress.css/dist/dress.css" />

NPM

Install the package from NPM:

npm install @remino/dress.css

Then the stylesheet file should be available in:

node_modules/@remino/dress.css/dist/dress.css

Use the file in your Sass files, or include it in your CSS, etc.

Download

Download the dress.css file from the GitHub releases.

Usage

To know which HTML tags are handled by this stylesheet with some suggested markup, see Elements.

Back to top

Browser Support

The dress.css stylesheet was checked with doiuse:

❯ doiuse -b 'defaults' -v dist/dress.css
[doiuse] Browsers: Firefox 129, Firefox 128, Chrome for Android 127, Firefox for Android 127, Android Browser 127, Chrome 127, Edge 127, Firefox 127, Chrome 126, Edge 126, Chrome 125, Firefox 115, Opera 111, Opera 110, Chrome 109, Opera Mobile 80, Samsung Internet 25, Samsung Internet 24, Safari on iOS 17, Safari on iOS 17, Safari 17, Safari 17, Safari on iOS 16, UC Browser for Android 15, Safari on iOS 15, QQ Browser 14, KaiOS Browser 3, KaiOS Browser 2, Opera Mini NaN

While dress.css should work in the latest version of major browsers, it seems to have issues in some less-popular mobile versions, like Opera Mini. This stylesheet is not meant for legacy support.

Back to top

Tests

Visual Regression Testing

npm t

Web Site Response Testing

Using Hurl:

hurl --test tests/responses.hurl

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork