Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kkrishguptaa/reseter.css
The Modern CSS Reset 🚀
https://github.com/kkrishguptaa/reseter.css
css css-reset css3 cssreset hackertoberfest normalize-css reset-css
Last synced: about 1 month ago
JSON representation
The Modern CSS Reset 🚀
- Host: GitHub
- URL: https://github.com/kkrishguptaa/reseter.css
- Owner: kkrishguptaa
- License: mit
- Created: 2021-02-09T03:43:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T06:21:05.000Z (about 2 months ago)
- Last Synced: 2024-07-13T06:29:46.901Z (about 2 months ago)
- Topics: css, css-reset, css3, cssreset, hackertoberfest, normalize-css, reset-css
- Language: SCSS
- Homepage:
- Size: 2.13 MB
- Stars: 1,217
- Watchers: 16
- Forks: 86
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
The Modern CSS Reset 🚀
## 🤓 Benefits
- [x] No need to start from scratch. Gardevoir doesn't remove all the browser styles, but instead redefines the useful ones
- [x] Never find yourself fixing browser issues. **Includes browser fixes** for a wide range of browsers.
- [x] No need debugging load time for Gardevoir. It's **sized ~0.8kb**. 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-sizing: border-box` set
- [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 **Gardevoir**
## 🆚 There are other resets, why Gardevoir?
| Feature | Gardevoir | Normalize.css | Sanitize.css | Reset.css |
| :-------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: |
| Normalizations | ✅ | ✅ | ✅ | ❌ |
| Basic elemental styles | ✅ | Partial | ✅ | ❌ |
| Size (by [bundle phobia](http://bundlephobia.com/)) | Compile with Sass |  |  |  |
| Minified version | Compile with Sass | ❌ (Minify yourself) | ❌(Minify yourself) | ❌(Minify yourself) | |
| Box sizing | ✅ | ❌ | ✅ | ❌ |
| Browser support | Customizable | Last 3 versions | Last 3 versions | Unknown |
## 🚀 Get It Running Quick
1. Create A HTML File
```html
Gardevoir Quick Start
Gardevoir Quick Start
Hey fella! Don't forget to change the title text an remove this
paragraph and the heading
```
2. Call Gardevoir
```html
```
3. Star this repository, if you like the project! It means a lot to the development team, Those stars a boosting happiness for our team
4. How about reading a guide for best performance? Here's the link to [optimizing Gardevoir for production](#-optimize)
5. Lastly you can view [our wiki for best practices and performance guides](https://github.com/krshoss/gardevoir/wiki/Performance)
6. 🥳 All Set Now
## 🌟 Installation
There are various ways to install Gardevoir. Like package managers, content delivery networks, local copies...
### 📦 Package Managers
#### 💝 **NPM**  
```bash
npm install gardevoir
```
#### 🐱**Yarn**  
```bash
yarn add gardevoir
```
### ⚡ CDN  
```html
```
## ✨ Usage
Gardevoir 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
```html
```
> **Warning!**
>
> Make Sure To Link Your Custom Stylesheet After Gardevoir Else Your Custom Styles Might Not Be Implemented
## 🚅 Optimize
> **Note** all of these guidelines are for static websites, frameworks like react have their own guide (please refer them)
- Never import Gardevoir via css, though this a option, it is not recommended for website loading, rather use html link tags
```html
```
- Use this easy loading trick to make your life a lot easier
```html
```
## ❤ Thanks to our supporters
[](https://github.com/krshoss/gardevoir/stargazers)