dimied / reseter.css Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fi-krish/reseter.css

0.0 0.0 0.0 1001 KB

Reseter.css - A Futuristic Alternative To Normalize.css And CSS Resets

Home Page: https://krishdevdb.github.io/reseter.css/

License: MIT License

CSS 25.34% JavaScript 11.49% Less 14.00% Sass 12.72% SCSS 14.00% Stylus 13.07% TypeScript 9.38%

reseter.css's Introduction

Reseter.css

A Futuristic Alternative to Normalize.css and CSS Resets

Website · Request a Feature · Report a Bug

🤓 Benefits

No need to start from scratch. Reseter.css doesn't remove all the browser styles, but instead redifines the useful ones
Never switch preprocessors/technologies. sass, less, scss, stylus, and styled-components support available.
Never find yourself fixing browser issues. Includes browser fixes for a wide range of browsers.
No need debugging load time for Reseter.css. It's sized ~0.7kb. 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-sing: border-box set
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+ 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	✅	Partial	✅	❌
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

🚀 Get It Running Quick

You can find some templates for a faster experience in the templates section down below

Create A HTML File

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

Call Reseter.css

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

Star this repository, if you like the project! It means a lot to the development team, Those stars a boosting happiness for our team
How about reading a guide for best performance? Here's the link to optimizing reseter.css for production
Lastly you can view our wiki for best practices and performance guides
🥳 All Set Now

📚 Quick Templates

CodeSandBox
CodePen
More soon...

🌟 Installation

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

📦 Package Managers

💝 NPM

npm install reseter.css

🐱Yarn

yarn add reseter.css

⚡ CDN

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

✨ Get Using It

Reseter.css 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/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

✨ More

🚅 Optimize

Note all of these guidelines are for static websites, frameworks like react have their own guide (please refer them)

Never import reseter.css 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/reseter.css">
```

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

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

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

Find more at our wiki

📞 We're Ready To Support

Discord server (Coming Soon)
GitHub discussions
Stackoverflow
Bug handler

⌚ Roadmap

Comment Blocks In The Sources
Long Documentation
Guide

All of these are moved to the Benefits section once done

❤ Thanks to our supporters

⌚ Status

This project is currently being maintained. Please Consider Donating.

Recommend Projects