|Views Total:||91 views|
|Official Page:||Go to website|
|Last Update:||August 2, 2023|
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.
- 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.lit.js formats depending on your project needs.
<link rel="stylesheet" href="minireset.min.css" />
- 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