https://github.com/giorgioreale/tabularasa
Streamlined CSS reset for consistent cross-browser design control.
https://github.com/giorgioreale/tabularasa
css css-reset
Last synced: about 2 months ago
JSON representation
Streamlined CSS reset for consistent cross-browser design control.
- Host: GitHub
- URL: https://github.com/giorgioreale/tabularasa
- Owner: GiorgioReale
- License: mit
- Created: 2023-05-04T17:03:38.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-10T20:51:57.000Z (about 3 years ago)
- Last Synced: 2025-03-11T13:11:17.330Z (over 1 year ago)
- Topics: css, css-reset
- Language: CSS
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TabulaRasa — Modern CSS Reset
TabulaRasa is an aggressive, modern CSS reset designed for **2026+ web development**.
It removes browser inconsistencies and provides a clean, predictable baseline so you can build your UI without fighting default styles.
No opinions. No components. Just a solid foundation.
---
## Philosophy
- **Aggressive reset** → eliminate as much browser styling as possible
- **Modern-first** → targets evergreen browsers (no legacy hacks)
- **Low specificity** → uses `:where()` to stay easily overridable
- **Design-system ready** → built to sit under component libraries
- **No magic** → you stay in control
---
## What it does
### Layout & Box Model
- Global `box-sizing: border-box`
- `min-width: 0` to prevent flex/grid overflow issues
- Removes all default margins
- Adds `min-height: 100dvh` support
### Typography
- Normalizes `line-height`, font inheritance, and weights
- Removes default heading styles
- Enables modern text wrapping:
- `text-wrap: balance` for headings
- `text-wrap: pretty` for content
### Forms (aggressive)
- Resets all controls with:
```css
appearance: none;
```
- Removes default borders, backgrounds, paddings
- Ensures full font inheritance
- Normalizes file inputs, search inputs, and selects
- Restores native behavior for checkbox/radio
### Media
- Makes media elements responsive by default:
- `max-inline-size: 100%`
- `block-size: auto`
- Forces block display for layout consistency
### Tables
- `border-collapse: collapse`
- Removes spacing and padding inconsistencies
- Normalizes alignment
### Accessibility & UX
- Keeps visible focus via `:focus-visible`
- Enables pointer cursor on interactive elements
- Handles `contenteditable` focus
- Normalizes `hidden` and `template`
### Rendering
- Font smoothing enabled
- `text-rendering: optimizeLegibility`
- `tab-size` normalization
---
## Why TabulaRasa?
Because browser defaults are:
- inconsistent
- outdated
- sometimes just wrong
TabulaRasa gives you a **clean slate** so your design system defines everything — not the browser.
---
## How to use
### 1. Install / copy
Download `tabularasa.css` or include it in your project.
### 2. Include it first
```html
```
Your styles should always come **after** the reset.
---
## Browser Support
Designed for **modern evergreen browsers**.
| Browser | Support |
|----------------|--------|
| Chrome | ✅ |
| Firefox | ✅ |
| Edge | ✅ |
| Safari | ✅ |
| IE | ❌ |
> This reset intentionally **does not support legacy browsers**.
---
## Trade-offs
This is not a “safe” reset.
- You will lose all default styling (especially forms)
- You must style everything yourself
- Not suitable for quick prototypes or legacy projects
But if you're building a serious UI system, this is exactly what you want.
---
## TL;DR
If you want control → use TabulaRasa
If you want defaults → don’t
---