🤓 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-sing: 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

!Browser Inconsistencies

🆚 There are other resets, why Gardevoir?

| Feature | Gardevoir | Normalize.css | Sanitize.css | Reset.css |
| :-------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: | --- |
| Normalizations | ✅ | ✅ | ✅ | ❌ |
| Basic elemental styles | ✅ | Partial | ✅ | ❌ |
| Size (by bundle phobia) | !GitHub file size in bytes | !GitHub file size in bytes | !GitHub file size in bytes | !GitHub file size in bytes |
| Minified version | !npm bundle size | ❌ (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

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

5. Lastly you can view our wiki for best practices and performance guides

6. 🥳 All Set Now

🌟 Installation

There are various ways to install Gardevoir. Like package managers, content delivery networks, local copies...

$3

#### 💝 NPM !Npm Downloads

`bash
npm install gardevoir
`

#### 🐱Yarn !Yarn Downloads

`bash
yarn add gardevoir
`

$3

`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


rel="stylesheet"
type="text/css"
href="path/to/your-custom-stylesheet.css"
/>

`

> 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
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/npm/gardevoir"
onload="this.rel='stylesheet';this.onload=null"
/>


``

❤ Thanks to our supporters