A Minimal CSS Reset – minireset.css

Preview:

Description:

A super-tiny CSS reset that ensures a consistent look and feel across various browsers and devices, which allows you to focus on crafting your unique design.

Features:

• Reset font sizes for semantic markup: You can use HTML headings and strong text without unintended sizing differences.
• Reset block margins: Removes default browser margins from sections, articles, aside, and other block elements. Add margins as needed in your CSS.
• Reset tables: Tables will only take up the necessary space for their content. No excess spacing.
• Preserve inline paddings: Keeps default paddings on buttons, inputs, and other inline elements for usability.
• Set border-box box-sizing: This allows you to add padding and borders without affecting an element’s total width. Simplifies CSS.
• Set responsive media elements: Images, videos, iframes, and other media will scale proportionally with the width of their container. Enables a fluid, responsive experience.

How to use it:

1. Install & download.

# NPM
$ npm i minireset.css

2. Import the minireset.css. Available formats: Choose between .css, .min.css, .sass or .css.lit.js formats depending on your project needs.

<link rel="stylesheet" href="minireset.min.css" />

Changelog:

v0.6.0 (08/02/2023)

• remove height from html/body
• remove .not-visually-hidden class
• remove –focus-color variable and increase outline-width
• make links inherit color
• add scroll-margin for focused elements