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.

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-offset (default: 3rem or 3rlh depending on browser support) to set scroll-margin-block for an element

Credits

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

License

MIT