@microflash/preset

preset

A modern CSS preset

• What's this?
• Install
• Use
• Browser support
• Decisions
• Credits
• License

What's this?

preset is a CSS reset to baseline the browser styles to give you a uniform foundation for building your custom styles on top of it.

Install

In Node.js, install with npm:

npm install @microflash/preset

In Deno, with unpkg.com:

import "https://unpkg.com/@microflash/preset"

In browsers, with unpkg.com or jsdelivr.net:

<link rel="stylesheet" href="https://unpkg.com/@microflash/preset">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microflash/preset">

Use

In Node.js or Deno, import the CSS in the entrypoint file of your application.

import "@microflash/preset"
// or using URL import
import "https://unpkg.com/@microflash/preset"

Make sure that this is the first CSS import before including any other CSS files.

If you're using Sass, you can import Sass file instead of the compiled version. This is useful if you want to compile the CSS for custom browser targets.

You can import the Sass file in the entrypoint of your application as follows.

import "@microflash/preset/scss"
// or using URL import
import "https://unpkg.com/@microflash/preset/src/preset.scss"

Alternatively, you can import it in your main Sass file before any other rules.

@use "@microflash/preset/scss";
// rest of the Sass imports

In browser, including the <link> before any other stylesheet should do the trick.

Browser support

preset supports evergreen browsers.

Decisions

The rationale behind the decisions for the preset are available as ADRs (Any Decision Records) under decisions.

Credits

• @joshwcomeau for My Custom CSS Reset
• @KittyGiraudel for Using calc to figure out optimal line-height
• @jgthms for minireset.css
• @EllyLoel for reset.css

License

MIT