The Modern CSS Reset 🚀

• No need to start from scratch. Gardevoir doesn't remove all the browser styles, but instead redefines the useful ones
• Never find yourself fixing browser issues. Includes browser fixes for a wide range of browsers.
• No need debugging load time for Gardevoir. It's sized ~0.8kb. Moreover, we are consistently trying to reduce it.
• Get all the benefits of normalize.css. It includes all normalizations!
• Get a better box sizing for a better experience. box-sizing: border-box set
• Completely production ready code with browser support testing and source build ci

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

Feature	Gardevoir	Normalize.css	Sanitize.css	Reset.css
Normalizations	✅	✅	✅	❌
Basic elemental styles	✅	Partial	✅	❌
Size (by bundle phobia)	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

1. Create A HTML File

   <!DOCTYPE html>
   <html>
     <head>
       <title>Gardevoir Quick Start</title>
     </head>
     <body>
       <h1>Gardevoir Quick Start</h1>
       <p>
         Hey fella! Don't forget to change the title text an remove this
         paragraph and the heading
       </p>
     </body>
   </html>

2. Call Gardevoir

   <!-- To be placed in the head tag -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />

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

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

npm install gardevoir

yarn add gardevoir

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />

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

<head>
  <link rel="stylesheet" type="text/css" href="path/to/gardevoir.min.css" />
  <link
    rel="stylesheet"
    type="text/css"
    href="path/to/your-custom-stylesheet.css"
  />
</head>

• Never import Gardevoir 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/gardevoir" />

• Use this easy loading trick to make your life a lot easier

  <link
    rel="preload"
    as="style"
    href="https://cdn.jsdelivr.net/npm/gardevoir"
    onload="this.rel='stylesheet';this.onload=null"
  />
  
  <noscript>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
  </noscript>