Skip to content
master
Switch branches/tags
Go to file
Code


Reseter.css

A Futuristic Alternative To Normalize.css And CSS Resets
Twitter URL GitHub Repo stars


Website · Request A Feature · Report A Bug


Already Used And Trusted By 25k Developers

Table Of Contents

Features

  • Adds New Better Styles For Elements
  • Source In 4 Different Formats
  • Reboots styles for a wide range of elements.
  • Corrects bugs and browser inconsistencies.
  • Sized 2.6kb
  • Includes all normalizations
  • Sets `box-sizing: border-box
  • Fully tested

Back To Top

Reseter.css vs Normalize.css vs Sanitize.css vs Reset.css

Feature Reseter.css Normalize.css Sanitize.css Reset.css
Normalizations ✔️ ✔️ ✔️
Basic Elemental Styles ✔️ ✔️
Size (By Bundlephobia) 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)
GZIP Version npm bundle size (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

Legend

✔️ - Yes

- No

- Partial

Why Use Reseter.css (Must Read)

Down is the result of a same html file of 3 browsers, all of chrome's headings are bolded nicely. Firefox ones are also bolded but IE ones are bolded too much. The ,font on paragraphs is also bolded in IE. The border of the button is blue in IE. There's A little less border on buttons in Firefox. These Are Only 3 browsers and 5 kinds of tags but there are more then 100 browsers available to the public. No one knows how many of them are not public. In fact 1000's of versions of these 100's of browsers are available. How to keep us with these browsers. The answer is Reseter.css.

Chrome Internet Explorer With Reseter.css
Result Result

Back To Top

Quick Start

Manual

Don't Want To The Manual Method Click Here

Step 1

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

To the head tag add this code

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

You All Set Now!

CodeSandBox

Use This Template

CodePen

Use This Template

Back To Top

Installation

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

Package Managers

NPM - A NodeJs Based Package Manager.

npm install reseter.css

Yarn - A Better Equivalent To NPM.

yarn add reseter.css

PNPM - A Faster NodeJS Based Package Manager

pnpm install reseter.css

Bower - A Package Manager For The Web

Works Well For Development Purposes. Use Others For Production Use

bower install krishdevdb/reseter.css

Back To Top

CDN

JsDelivir

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"
/>

Back To Top

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

Back To Top

Clone Repository

Using Git

git clone https://github.com/krishdevdb/reseter.css.git

Back To Top

Github Cli

gh repo clone krishdevdb/reseter.css

Hub

hub clone krishdevdb/reseter.css

Back To Top

Usage

Import In CSS

This Is The Best Way To Use Reseter.css. First Import Reseter.css then add your custom styles

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

.element {
  /** Your Custom Style's Here **/
}
<link
  rel="stylesheet"
  type="text/css"
  href="path/to/your-custom-stylesheet.css"
/>

Back To Top

Link Tag

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>

Back To Top

Warning!

Make Sure To Link Your Custom Stylesheet After Reseter.css Else Your Custom Styles Might Not Be Implemented

React

Apply It Globaly

In your js file

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

Back To Top

Or

In your global css file

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

.element {
  /** Custom Styles **/
}

Then in your js file

import React from "react";
import ReactDOM from "react-dom";
import "./path/to/global.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Back To Top

In A Single Page Using React Helmet

import React from "react";
import { Helmet } from "react-helmet";

export default function Page() {
  return (
    <div>
      <Helmet>
        <link rel="stylesheet" href="path/to/reseter.css" />
        <link rel="stylesheet" href="path/to/custom/style-sheet.css" />
      </Helmet>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}

Back To Top

Or

In Your Custom Stylesheet

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

.element {
  /**Custom Styles Here**/
}

In Your JS File

import React from "react";
import { Helmet } from "react-helmet";

export default function Page() {
  return (
    <div>
      <Helmet>
        <link rel="stylesheet" href="path/to/custom/style-sheet.css" />
      </Helmet>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}

Back To Top

Styled-Components

Globaly

// styles/index.js
import { createGlobalStyle } from "styled-components";
import resetercss from "reseter.css/src/styled-components/js/reseter.js";
/** We also have ts and mjs available
import resetercss from 'reseter.css/src/styled-components/ts/reseter.ts'
import resetercss from 'reseter.css/src/styled-components/js/reseter.mjs'
*/

export const GlobalStyle = createGlobalStyle`
  ${resetercss}

  // You can continue writing global styles here
  body {
    padding: 0;
    background-color: black;
  }
`;

On A Specific Page

// index.js
import React from "react";
import ReactDOM from "react-dom";

import { GlobalStyle } from "./styles";
import { App } from "./app";

const Root = () => (
  <React.Fragment>
    <GlobalStyle />
    <App />
  </React.Fragment>
);

ReactDOM.render(<Root />, document.querySelector("#root"));
// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Normalize } from "styled-normalize";

import { App } from "./app";

const Root = () => (
  <React.Fragment>
    <Normalize />
    <App />
  </React.Fragment>
);

ReactDOM.render(<Root />, document.querySelector("#root"));

Vue

In Your Vue File Add This Code

<style>
@import "path/to/reseter.min.css";
</style>

Or

<style scoped src="@/path/to/reseter.min.css"></style>

Or

import Vue from "vue";

require("@/path/to/reseter.min.css");

Next.js

Apply It Globaly

In _app.js inside your pages directory

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

Or

In your global css file

@import "path/to/reseter.min.css";
.element {
  /** Custom Styles **/
}

Then In Your _app.js

import "path/to/global-styles.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Back To Top

Apply It To A Specific Page

import * from "react";
import Head from "next/head";

export default function Page(){
    return(
        <div>
              <Head>
                  <link rel="stylesheet" href="path/to/reseter.min.css">
                  <link rel="stylesheet" href="path/to/custom/style-sheet.css" />
              </Head>
         </div>
    )
}

Back To Top

Or

In your css file

@import "path/to/reseter.min.css";
.element {
  /** Custom Styles **/
}

Then In Your _app.js

import * from "react";
import Head from "next/head";

export default function Page(){
 return(
 <div>
       <Head>
           <link rel="stylesheet" href="path/to/your-custom.css">
       </Head>
  </div>
 )
}

Back To Top

Know/Want Any Other Usage Option/Platform

Please Add A Issue In Github With The Label Feature Request.

Get 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.

Support Us

Review

  • Reseter.css - A futuristic CSS reset and normalize | Product Hunt

Spread

  • Twitter: Twitter URL
  • Facebook:
  • Linkedin:
  • Pinterest:
  • Email:

Sponsor

Roadmap

  • Comment Blocks In The Sources

  • Long Documentation

  • Guide

  • And Whatever You Put On The Github Issues WIth The Label Of Feature Request

Authors

krishdevdb
Krish
Github
Email

Contributors


Krish Dev DB

💻 📖 🎨 🤔 🚧 🚇

Michael J. Ryan

💻

joejenett

🐛 📖

Vincent Will

📝

phuoc-ng

🔧

Leandro Oriente

🐛

Himanshu

💻

Vixie

🤔 💻 📖

aco

🐛 💻

Okuto Oyama

📖

coliss

📝

Supporters

Stargazers

Forks

Special Mentions

Spreaders

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

Frontend Daily - A Twitter Account, That Shared Reseter.css in This Tweet

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

Stargazers over time

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.