Install
Reseter.css
A Futuristic Alternative to Normalize.css and CSS Resets
🤓 Benefits
- [x] No need to start from scratch. Reseter.css doesn't remove all the browser styles, but instead redefines the useful ones
- [x] Never switch technologies.
sass,less,scss,stylus, andstyled-componentssupport available. - [x] Never find yourself fixing browser issues. Includes browser fixes for a wide range of browsers.
- [x] No need debugging load time for Reseter.css. It's sized ~0.7kb. Moreover, we are consistently trying to reduce it.
- [x] Get all the benefits of normalize.css. It includes all normalizations!
- [x] Get a better box sizing for a better experience.
box-sing: border-boxset - [x] Completely production ready code with browser support testing and source build ci
❓ Why do I use a css reset
There are many inconsistencies between browsers. Like Firefox 3 has a margin on top of paragraphs but Internet Explorer 7 doesn't have any margin. There are thousands of browsers with hundreds of versions. Each version at least has 500+ inconsistencies with different browsers' different versions. How to keep up? This is an easy to use solution called reseter.css
🆚 There are other resets, why reseter.css?
| Feature | Reseter.css | Normalize.css | Sanitize.css | Reset.css |
|---|---|---|---|---|
| Normalizations | ✅ | ✅ | ✅ | ❌ |
| Basic elemental styles | ✅ | Partial | ✅ | ❌ |
| Size (by bundle phobia) |  |
 |
 |
 |
| Minified version |  |
❌ (Minify yourself) | ❌(Minify yourself) | ❌(Minify yourself) |
| GZIP version | |
❌ (Compress yourself) | ❌ (Compress yourself) | ❌ (Compress yourself) |
| Box sizing | ✅ | ❌ | ✅ | ❌ |
| Browser support | Customizable | Last 3 versions | Last 3 versions | Unknown |
🚀 Get It Running Quick
-
You can find some templates for a faster experience in the templates section down below
-
Create A HTML File
<!DOCTYPE html> <html> <head> <title>Reseter.css Quick Start</title> </head> <body> <h1>Reseter.css Quick Start</h1> <p>Hey fella! Don't forget to change the title text an remove this paragraph and the heading</p> </body> </html> -
Call Reseter.css
<!-- To be placed in the head tag --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" /> -
Star this repository, if you like the project! It means a lot to the development team, Those stars a boosting happiness for our team
-
How about reading a guide for best performance? Here's the link to optimizing reseter.css for production
-
Lastly you can view our wiki for best practices and performance guides
-
🥳 All Set Now
📚 Quick Templates
-
More soon...
🌟 Installation
There are various ways to install reseter.css. Like package managers, content delivery networks, local copies...
📦 Package Managers
💝 NPM 
npm install reseter.css
🐱Yarn
yarn add reseter.css
⚡ CDN 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />
✨ Usage
Reseter.css as said, is a zero-dependency project and excels in integrating with all kinds of usage options! These are a few easy guides for people to start
<head>
<link rel="stylesheet" type="text/css" href="path/to/reseter.min.css" />
<link
rel="stylesheet"
type="text/css"
href="path/to/your-custom-stylesheet.css"
/>
</head>
Warning!
Make Sure To Link Your Custom Stylesheet After Reseter.css Else Your Custom Styles Might Not Be Implemented
✨ More
🚅 Optimize
Note all of these guidelines are for static websites, frameworks like react have their own guide (please refer them)
-
Never import reseter.css via css, though this a option, it is not recommended for website loading, rather use html link tags
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css"> -
Use this easy loading trick to make your life a lot easier
<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/reseter.css" onload="this.rel='stylesheet';this.onload=null"> <noscript> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css"> </noscript> -
Find more at our wiki
📞 We're Ready To Support
- [ ] Discord server (Coming Soon)
- [x] GitHub discussions
- [x] Stack overflow
- [x] Bug handler
⌚ Road Map
-
[ ] Comment Blocks In The Sources
-
[ ] Long Documentation
-
[ ] Guide
All of these items are moved to the Benefits section once done
