matheushenriquefs / modress

A lightweight modular CSS reset.

👢 Modress

A lightweight modular CSS reset designed to support older browsers and seamlessly integrate with Web Components, eliminating code duplication. It's essentially a modularization of ress with some enhancements borrowed from modern-normalize. If you're initiating a new project that doesn't require legacy browser support or won't utilize Web Components, consider using modern-normalize.

For more details, check out:

• ress
• normalize.css
• normalize.css Know Issues
• modern-normalize

🚀 Features

1. ✨ Consistent: Ensures uniform styles across various browsers.
   1.1 Apply box-sizing: border-box;, resets padding, and margin.
   1.2 Improve font consistency.
   1.3 Form styles standardization.
2. 🍃 Lightweight: modress.min.css is only 1kb gzipped.
3. 🧩 Fully modular: Take what you want.
4. 🌎 No bundler required: Usable via CDN.

📦 Install

npm install modress

🦄 Usage

/* app.css */
@import 'modress';

or via CDN:

<link rel="stylesheet" href="https://unpkg.com/modress">

For usage with Web Components, import individual styles:

/* my-button.css */
@import 'modress/dist/base.css';
@import 'modress/dist/button.css';

or:

<link rel="stylesheet" href="https://unpkg.com/modress/dist/base.css">
<link rel="stylesheet" href="https://unpkg.com/modress/dist/button.css">

🌐 Browser support

• Chrome
• Edge
• Firefox ESR+
• Internet Explorer 10+
• Safari 8+
• Opera