preset

A modern CSS preset

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

What's this?

preset is a CSS reset to baseline the browser styles. It gives you a uniform foundation to build your custom styles on top of.

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 modern browsers.

API

You can customize some aspects of preset through CSS properties. You can define these properties in :root or html scope.

• --preset-line-height (default: calc(0.3rem + 2ex + 0.3rem)) to set the line-height
• --preset-tab-size (default: 2) to set the width of code block indentation
• --preset-outline-transition to set the transition applied on the outline
• --preset-dialog-backdrop-filter (default: blur(25px)) to set the backdrop filter of the dialog
• --preset-table-caption-side (default: bottom) to set caption position of a table caption
• --preset-scroll-padding (default: 3rem) to set scroll-padding-block-start for an element

Credits

Adam Argyle, Andy Bell, Elly Loel, Harry Roberts, Jeremy Thomas, Jesús Ricarte, Josh Comeau, Kevin Powell

License

MIT