Reseter.css

A Futuristic Alternative To Normalize.css And CSS Resets

Website · Request A Feature · Report A Bug

Already Used And Trusted By 150k Developers

😃 Benefits

No Need To Start From Scratch. It redefines styles and adds the system font stack.
Never Switch Preprocessors/Technologies. Sass, Less, Scss, Stylus, and Styled Components (js, mjs, and ts) support available.
Never Find Yourself Fixing Browser Issues. Includes bug fixes and browser inconsistency fixes for wide browsers.
No Need Your Debugging Load Time For Reseter.css. It's sized ~2.5kb
Get All The Benefits Of Normalize.css. It includes all normalizations!
Get A Better Box Sizing For A Better Experience. box-sing: border-box set
No Need To Tangle With Any Testing Issues. Tested Source Code Builds (Travis CI). Tested Cross-Browsers (Browserstack)

❓ 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 atleast has 500+ inconsitencies 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	✅	⭕	✅	❌
Size (By Bundlephobia)
Minified Version		❌ (Minify Yourself)	❌(Minify Yourself)	❌(Minify Yourself)
GZIP Version		❌ (Compress Yourself)	❌ (Compress Yourself)	❌ (Compress Yourself)
Box Sizing	✅	❌	✅	❌
Browser Support	Last 5 Versions All Not Dead Browsers Customisable	IE 10+ Safari 8+ Chrome Firefox ESR+ Opera Edge	Last 3 Versions Exception: Safari Last 2 Also Firefox ESR, IE 9+	Unkown

✅- Yes

❌ - No

⭕ - Partial

🚀 Get It Running Quick

🚀 Alternatively Boost Everything Up With Templates

Step 1: Create A HTML File

Create A HTML File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing Reseter.css</title>
  </head>
  <body>
    <h1>This Is The Biggest Heading</h1>
    <h2>This Is A Slightly Smaller Heading</h2>
    <h3>This Is A Slightly Smaller Heading</h3>
    <h4>This Is A Slightly Smaller Heading</h4>
    <h5>This Is A Slightly Smaller Heading</h5>
    <h6>This Is The Smallest Heading</h6>
    <p>A Paragraph</p>
    <a href="">A Link</a>
    <button>A Button</button>
    <ol>
      <li>An List Item Of A Orderd List</li>
    </ol>
    <ul>
      <li>An List Item Of A Unordered List</li>
    </ul>
  </body>
</html>

Step 2: Call Reseter.css

<!-- To Be Placed In The Head Tag -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />

🥳 All Set Now

📚 Quick Templates

CodeSandBox Template


Use This Template

CodePen Template


Use This Template

🌟 Installation

There are various ways to install reseter.css. Like Package Managers, CDNs, Local Copies, And Stuff.

📦 Package Managers

NPM

npm install reseter.css

Yarn

yarn add reseter.css

PNPM

pnpm install reseter.css

Bower

Works Well For Development Purposes. Use Others For Production Use

bower install krishdevdb/reseter.css

⚡ CDN

JsDelivir - The Recommended CDN

Production Ready

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

Development Version

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/krishdevdb/reseter.css/css/reseter.min.css"
/>

CDNJS

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/reseter.css/1.1.1/reseter.min.css"
/>

Unpkg

<link rel="stylesheet" href="https://unpkg.com/reseter.css" />

Github

Please Note GitHub CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://github.com/krishdevdb/reseter.css/raw/master/css/reseter.min.css"
/>

RawGit

Please Note RawGit CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://ghcdn.rawgit.org/krishdevdb/reseter.css/master/css/reseter.min.css"
/>

Raw GitHack

Please Note Raw GitHack CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://raw.githack.com/krishdevdb/reseter.css/master/css/reseter.min.css"
/>

Statically

Please Note Statically CDN Works Well For Development Practices. Consider Using Other CDNs For Production

<link
  rel="stylesheet"
  href="https://cdn.statically.io/gh/krishdevdb/reseter.css/master/css/reseter.min.css"
/>

⬇ Downloads

Reseter.min.css - https://cdn.jsdelivr.net/gh/krishdevdb/reseter.css
Reseter.css - https://cdn.jsdelivr.net/gh/krishdevdb/reseter.css/css/reseter.css
Full Repository - https://github.com/krishdevdb/reseter.css/archive/master.zip

✨ Get Using It

Link Tag - The Recommended Way

Using It With A Browser Is Really Simple. First Link To Reseter.css Then Your Custom Stylesheet

<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

Import - The Easy Way

First Import Reseter.css then add your custom styles

// In Your CSS File

@import "path/to/reseter.min.css";

.element {
  /** Your Custom Style's Here **/
}

<!-- In The Head Of Your HTML -->
<link
  rel="stylesheet"
  type="text/css"
  href="path/to/your-custom-stylesheet.css"
/>

<!-- Must Be Used Where ever You Want Reseter.css To Work -->

React

// In Your Main JS File With Other Imports

import "./path/to/reseter.css";

Styled-Components

// styles/index.js

import { createGlobalStyle } from "styled-components";
import resetercss from "node_modules/reseter.css/src/styled-components/js/reseter.js";

/** We also have ts and mjs available
import resetercss from 'node_modules/reseter.css/src/styled-components/ts/reseter.ts'
import resetercss from 'node_modules/reseter.css/src/styled-components/js/reseter.mjs'
*/

export const GlobalStyle = createGlobalStyle`
  ${resetercss}

  // You can continue writing global styles here if you want.
`;

Vue

// In Your Main.js File With Other Imports
import "path/to/reseter.css";

Next.js

// In Your pages/_app.js File With Other Imports

import "path/to/reseter.css";

📞 We're Ready To Support

This project has a code of conduct. By interacting with this repository, or community you agree to abide by its terms.

Hi! 👋 We’re excited that you’re using reseter.css and we’d love to help.

❤ Show Your Love To The Community

✏ Review

📤 Spread

Twitter:
Facebook:
Linkedin:
Pinterest:
Email:

⌚ Roadmap

Comment Blocks In The Sources
Long Documentation
Guide

Go Check Our Project Board Here

🧑 Authors


Krish
Github
Email

❤ Contributors

_{Michael J. Ryan} 💻	_joejenett 🐛 📖	_{Vincent Will} 📝	_phuoc-ng 🔧	_{Leandro Oriente} 🐛	_Himanshu 💻	_Vixie 🤔 💻 📖
_aco 🐛 💻	_{Okuto Oyama} 📖	_coliss 📝	_{Luis Parra} 📖	_yolenoyer 📆 🐛	_Meenal 🐛 📖	_{Kunal Verma} 📖 🐛

❤ Supporters

⭐ Stargazers

🍴 Forks

🌟 Special Mentions

📤 Spreaders

Frontend Focus - A Weekly Newsletter That Published Reseter.css in it's Issue #485

JavaScript Feed - A Twitter Account, That Shared Reseter.css in This Tweet

Collis.com - For A Japanese Post Regarding Reseter.css

And All Other's Who Shared Or Posted About Reseter.css (Keeping A Record Of All Is Impossible If You Want Your Name Fork The Repo And Add Your Name!)

🌟 GitHub Stargazers

📄 License

MIT License

Copyright (c) 2021 Krish Dev DB

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

⌚ Status

This project is currently being maintained. And Will Be Maintained. If You Like This Project And Want This Project To Never Exhaust. Please Consider Donating.

jphong1111 / reseter.css Goto Github PK

reseter.css's Introduction