https://github.com/zemd/css-reset
Simple and minimal CSS reset for modern web development.
https://github.com/zemd/css-reset
css css-reset
Last synced: 22 days ago
JSON representation
Simple and minimal CSS reset for modern web development.
- Host: GitHub
- URL: https://github.com/zemd/css-reset
- Owner: zemd
- License: apache-2.0
- Created: 2024-02-25T09:01:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-06-08T08:43:57.000Z (26 days ago)
- Last Synced: 2026-06-08T10:23:46.567Z (26 days ago)
- Topics: css, css-reset
- Language: CSS
- Homepage:
- Size: 162 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @zemd/css-reset
[](https://npmjs.com/package/@zemd/css-reset)
A small CSS reset for modern projects. It gives you a clean starting point without locking you into any design system.
## What it does
The main reset (`index.css`) handles the basics:
- Sets `box-sizing: border-box` on all elements
- Removes default margins and paddings (keeps them on headings, paragraphs, and lists)
- Sets sensible defaults for font rendering, kerning, and ligatures
- Wraps headings with `text-wrap: balance` and paragraphs with `text-wrap: pretty`
- Makes images, SVGs, and videos responsive
- Normalizes form elements, tables, and links
- Enables `scroll-behavior: smooth` when the user has no motion preference
- and more
## Install
```sh
npm install @zemd/css-reset
pnpm add @zemd/css-reset
```
## Files
All exports are plain CSS. Pick what you need.
| File | What it does |
| ---------------------------- | ------------------------------------------------------------------- |
| `@zemd/css-reset/index.css` | Main reset - start here |
| `@zemd/css-reset/extra.css` | Pointer cursors for clickable elements, underlines for inline links |
| `@zemd/css-reset/quotes.css` | Language-aware quote marks |
| `@zemd/css-reset/all.css` | Everything above in one import |
> **Tip:** You can also import without the `.css` extension, e.g. `@zemd/css-reset/extra`.
> **Note:** The main reset sets English-only default quotes on `:where(html, :host)`. If you use `quotes.css`, make sure it's imported **after** `index.css` so the language-specific overrides take effect.
## Usage
### Basic
```css
@import "@zemd/css-reset/index.css";
/* If your tooling supports it, this shorter form also works: */
@import "@zemd/css-reset";
/* Layers keep your reset clearly separated from your app and component styles: */
@layer reset;
@import "@zemd/css-reset/index.css" layer(reset);
```
### Everything at once
If you want the full reset with all optional files included:
```css
@import "@zemd/css-reset/all.css";
/* Or with a layer: */
@layer reset;
@import "@zemd/css-reset/all.css" layer(reset);
```
### Picking individual files
```css
@layer reset;
@import "@zemd/css-reset/index.css" layer(reset);
@import "@zemd/css-reset/extra.css" layer(reset);
@import "@zemd/css-reset/quotes.css" layer(reset);
```
## Using with Tailwind v4
Skip Tailwind Preflight so the two resets don't overlap:
```css
@layer theme, reset, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "@zemd/css-reset/index.css" layer(reset);
@import "tailwindcss/utilities.css" layer(utilities);
```
Add any optional files to the same `reset` layer.
## License
Released under the Apache 2.0 license.
## Support
[](https://u24.gov.ua/)