krishdevdb / Reseter.css
Licence: mit
Reseter.css - A Futuristic CSS Reset/Normalizer
Stars: ✭ 225
Projects that are alternatives of or similar to Reseter.css
Zero To Mastery Website
A website to track the status of the OpenSource Projects that our groups will be working on, with links to the github profiles of the contributors.
Stars: ✭ 175 (-22.22%)
Mutual labels: css3
Micron
a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power
Stars: ✭ 2,252 (+900.89%)
Mutual labels: css3
Sbuttons
💡 Simple buttons you can use easily for your next project.
Stars: ✭ 207 (-8%)
Mutual labels: css3
Spellbook Of Modern Webdev
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
Stars: ✭ 13,450 (+5877.78%)
Mutual labels: css3
Css Camera
New way to see a web page with CSS3 3D transform
Stars: ✭ 195 (-13.33%)
Mutual labels: css3
Hardcandy Jekyll
一款清新 糖果色🍬 的 ‘Jekyll’ 主题。A candy-colored 🍬 ‘Jekyll’ theme.
Stars: ✭ 202 (-10.22%)
Mutual labels: css3
Bahunya
10KB classless CSS framework with responsive typography, navbar, syntax highlighting, etc.
Stars: ✭ 170 (-24.44%)
Mutual labels: css3
Youtube Dl Gui
A cross-platform GUI for youtube-dl made in Electron and node.js
Stars: ✭ 183 (-18.67%)
Mutual labels: css3
Startpages.github.io
A curated list of startpages for your browser.
Stars: ✭ 228 (+1.33%)
Mutual labels: css3
Css Examples
Code examples that accompany the MDN CSS documentation
Stars: ✭ 203 (-9.78%)
Mutual labels: css3
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.
Table Of Contents
- Table Of Contents
- Features
- Why Use Reseter.css (Must Read)
- Quick Start
- Installation
- Usage
- Get Support
- Support Us
- Roadmap
- Authors
- Supporters
- Thanks
- License
- Status
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
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 |
|---|---|---|
 |
 |
 |
Quick Start
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">
-
Now you are all set and you can view the page
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
Meteor - Another NodeJs Based Package Manager
meteor add krishdevdb:resetercss
Composer - The PHP Package Manager
composer require krishdevdb/reseter.css
Bower - A Package Manager For The Web
bower install krishdevdb/reseter.css
CDN
JsDelivir
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css">
Unpkg
<link rel="stylesheet" href="https://unpkg.com/reseter.css">
Github
<link rel="stylesheet" href="https://github.com/krishdevdb/reseter.css/raw/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
Clone Repository
Using Git
git clone https://github.com/krishdevdb/reseter.css.git
Github Cli
gh repo clone krishdevdb/reseter.css
<a >Back To Top</a>
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">
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>
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";
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>,
);
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>
);
}
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>
);
}
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} />
}
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>
)
}
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>
)
}
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
Spread
- Twitter:
- 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
 |
|---|
| Krish |
| Github |
Supporters
Stargazers
Forks
Thanks
Stars
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].