A Minimal CSS Reset – minireset.css

Category: CSS & CSS3 | August 2, 2023
Author:jgthms
Views Total:165 views
Official Page:Go to website
Last Update:August 2, 2023
License:MIT

Preview:

A Minimal CSS Reset – minireset.css

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

You Might Be Interested In:


Leave a Reply