@microflash/preset

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 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 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 override the line-height
• --preset-tab-size (default: 2) to control the width of code block indentation
• --preset-stroke-color (default: currentColor) to override the stroke color of SVG with no fill
• --preset-dialog-backdrop-filter (default: blur(25px)) to override the backdrop filter of the dialog
• --preset-table-caption-side (default: bottom) to customize 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

Changelog

[2.0.0] - 2024-01-15

Changed

• Breaking Change: Media elements (img, svg, canvas, audio, video, iframe, embed, object) are no longer forced to display: block. Instead, a gentler set of opinions are now applied on them. See 08876402115d8467a6916d1a02154e864edb8f14