reseter.css


Reseter.css

A CSS Reset/Normalizer

Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all the premade styles by the browser. It normalizes the browser's stylesheet for a better cross-browser experience.

Twitter URL GitHub Repo stars


Join 15k People Already Using Reseter.css</h5> </a>
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 | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | | Basic Elemental Styles | :heavy_check_mark: | :o: | :heavy_check_mark: | :x: | | Size (By [Bundlephobia](http://bundlephobia.com/)) | ![GitHub file size in bytes](https://img.shields.io/github/size/krishdevdb/reseter.css/css/reseter.css?style=flat-square) | ![GitHub file size in bytes](https://img.shields.io/github/size/necolas/normalize.css/normalize.css?style=flat-square) | ![GitHub file size in bytes](https://img.shields.io/github/size/csstools/sanitize.css/sanitize.css?style=flat-square) | ![GitHub file size in bytes](https://img.shields.io/github/size/shannonmoeller/reset-css/reset.css?style=flat-square) | | Minified Version | ![npm bundle size](https://img.shields.io/bundlephobia/min/reseter.css?style=flat-square) | :x: (Minify Yourself) | :x:(Minify Yourself) | :x:(Minify Yourself) | | GZIP Version | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/reseter.css?style=flat-square) | :x: (Compress Yourself) | :x: (Compress Yourself) | :x: (Compress Yourself) | | Box Sizing | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | | 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 :heavy_check_mark: - Yes :x: - No :o: - 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](#codesandbox) #### Step 1 Create A HTML File ```html <!DOCTYPE html> Testing Reseter.css

This Is The Biggest Heading

This Is A Slightly Smaller Heading

This Is A Slightly Smaller Heading

This Is A Slightly Smaller Heading

This Is A Slightly Smaller Heading
This Is The Smallest Heading

A Paragraph

A Link
  1. An List Item Of A Orderd List
``` #### Step 2 To the head tag add this code ```html ``` You All Set Now! ### CodeSandBox | [![](https://github.com/krishdevdb/reseter.css/raw/master/.github/assets/codesandbox.PNG)](https://codesandbox.io/s/resetercss-26kzw) | | :-----------------------------------------------------------------------------------------------------------------------------------: | | [Use This Template](https://codesandbox.io/s/resetercss-26kzw) | ### CodePen | [![](https://github.com/krishdevdb/reseter.css/raw/master/.github/assets/codepen.png)](https://codepen.io/krishdevdb/pen/XWppdvK) | | :-------------------------------------------------------------------------------------------------------------------------------: | | [Use This Template](https://codepen.io/krishdevdb/pen/XWppdvK) | 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. ```bash npm install reseter.css ``` #### **Yarn** - A Better Equivalent To NPM. ```bash yarn add reseter.css ``` #### **PNPM** - A Faster NodeJS Based Package Manager ```bash pnpm install reseter.css ``` #### **Bower** - A Package Manager For The Web > Works Well For Development Purposes. Use Others For Production Use ```bash bower install krishdevdb/reseter.css ``` Back To Top ### CDN #### JsDelivir ##### Production Ready ```html ``` ##### Development Version ```html ``` #### CDNJS ```html ``` #### Unpkg ```html ``` #### Github > Please Note GitHub CDN Works Well For Development Practices. Consider Using Other CDNs For Production ```html ``` #### RawGit > Please Note RawGit CDN Works Well For Development Practices. Consider Using Other CDNs For Production ```html ``` #### Raw GitHack > Please Note Raw GitHack CDN Works Well For Development Practices. Consider Using Other CDNs For Production ```html ``` Back To Top #### Statically > Please Note Statically CDN Works Well For Development Practices. Consider Using Other CDNs For Production ```html ``` ### 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 Back To Top ### Clone Repository #### Using Git ```bash git clone https://github.com/krishdevdb/reseter.css.git ``` Back To Top #### Github Cli ```bash gh repo clone krishdevdb/reseter.css ``` #### Hub ```bash 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 ```css @import "path/to/reseter.min.css"; .element { /** Your Custom Style's Here **/ } ``` ```html ``` Back To Top ### Link Tag Using It With A Browser Is Really Simple. First Link To Reseter.css Then Your Custom Stylesheet ```html ``` 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 ```jsx import "path/to/reseter.min.css"; ``` Back To Top

Or

In your global css file ```css @import "path/to/reseter.min.css"; .element { /** Custom Styles **/ } ``` Then in your js file ```jsx import React from "react"; import ReactDOM from "react-dom"; import "./path/to/global.css"; import App from "./App"; ReactDOM.render( ); ``` Back To Top #### In A Single Page Using React Helmet ```jsx import React from "react"; import { Helmet } from "react-helmet"; export default function Page() { return (

Login

This is the login page

); } ``` Back To Top

Or

In Your Custom Stylesheet ```css @import "path/to/reseter.min.css"; .element { /**Custom Styles Here**/ } ``` In Your JS File ```jsx import React from "react"; import { Helmet } from "react-helmet"; export default function Page() { return (

Login

This is the login page

); } ``` Back To Top ### Styled-Components #### Globaly ```js // 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 ```jsx // index.js import React from "react"; import ReactDOM from "react-dom"; import { GlobalStyle } from "./styles"; import { App } from "./app"; const Root = () => ( ); ReactDOM.render(, document.querySelector("#root")); ``` ```jsx // index.js import React from "react"; import ReactDOM from "react-dom"; import { Normalize } from "styled-normalize"; import { App } from "./app"; const Root = () => ( ); ReactDOM.render(, document.querySelector("#root")); ``` ### Vue In Your Vue File Add This Code ```vue ```

Or

```vue ```

Or

```js import Vue from "vue"; require("@/path/to/reseter.min.css"); ``` ### Next.js ### Apply It Globaly In **\_app.js** inside your **pages** directory ```jsx import "path/to/reseter.min.css"; ```

Or

In your global css file ```css @import "path/to/reseter.min.css"; .element { /** Custom Styles **/ } ``` Then In Your **\_app.js** ```jsx import "path/to/global-styles.css"; export default function App({ Component, pageProps }) { return <Component {...pageProps} />; } ``` Back To Top #### Apply It To A Specific Page ```jsx import * from "react"; import Head from "next/head"; export default function Page(){ return(
) } ``` Back To Top

Or

In your css file ```css @import "path/to/reseter.min.css"; .element { /** Custom Styles **/ } ``` Then In Your **\_app.js** ```jsx import * from "react"; import Head from "next/head"; export default function Page(){ return(
) } ``` 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](https://github.com/krishdevdb/reseter.css/blob/master/.github/contributing.md). > 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. - [Chat Us On Discord](https://discord.gg/xqh38kb6sv) - [Start A Discussion On Github](https://github.com/krishdevdb/reseter.css/discussions) - [Add A Issue On Github](https://github.com/krishdevdb/reseter.css/issues) ## Support Us ### Review - Reseter.css - A futuristic CSS reset and normalize | Product Hunt ### Spread - Twitter: Twitter URL - Facebook: - Linkedin: </img> - Pinterest: </img> - Email: </img> ### 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](https://avatars.githubusercontent.com/u/76587897?s=100) | | :-------------------------------------------------------------------: | | Krish | | [Github](https://github.com/krishdevdb) | | [Email](mailto:krishdevdb@gmail.com) | ## Contributors

Krish Dev DB

πŸ’» πŸ“– 🎨 πŸ€” 🚧 πŸš‡

Michael J. Ryan

πŸ’»

joejenett

πŸ› πŸ“–

Vincent Will

πŸ“

phuoc-ng

πŸ”§

Leandro Oriente

πŸ›

Himanshu

πŸ’»

Vixie

πŸ€” πŸ’»

aco

πŸ› πŸ’»

Okuto Oyama

πŸ“–
## Supporters ### Stargazers ### Forks ## Special Mentions ### Spreaders [Frontend Focus](https://frontendfoc.us/) - A Weekly Newsletter That Published **Reseter.css** in it's [Issue #485](https://frontendfoc.us/issues/485) [Frontend Daily](https://twitter.com/FrontendDaily) - A Twitter Account, That Shared **Reseter.css** in [This Tweet](https://twitter.com/FrontendDaily/status/1380622045193584645) [JavaScript Feed](https://twitter.com/JavaScriptFeed) - A Twitter Account, That Shared **Reseter.css** in [This Tweet](https://twitter.com/JavaScriptFeed/status/1379412211567714305) [Collis.com](https://coliss.com) - For A Japanese [Post Regarding Reseter.css](https://coliss.com/articles/build-websites/operation/css/reset-and-normalizer-reseter-css.html) 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](https://starchart.cc/krishdevdb/reseter.css.svg)](https://starchart.cc/krishdevdb/reseter.css) ## 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.