Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
162aa6a
commit 592edfe
Showing
5 changed files
with
218 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
## 📞 We're Ready To Support | ||
|
||
- [ ] Discord server (Coming Soon) | ||
- [x] [GitHub discussions](https://github.com/krishdevdb/reseter.css/discussions) | ||
- [x] [Stackoverflow](https://stackoverflow.com/questions/ask?tags=resetercss%20css%20webdev) | ||
- [x] [Bug handler](https://github.com/krishdevdb/reseter.css/issues) | ||
|
||
<br> | ||
|
||
## 📖Blogs | ||
|
||
Coming Soon | ||
|
||
<br> | ||
|
||
## 📰 Newsletters | ||
- [Frontend Focus](https://frontendfoc.us/issues/485) | ||
- [Specky Boy](https://speckyboy.com/weekly-news-for-designers-589/) | ||
- [wweb.dev](https://wweb.dev/weekly/63/) | ||
- [Web tools Weekly](https://mailchi.mp/webtoolsweekly/web-tools-406) | ||
- More... | ||
|
||
<br> | ||
|
||
## 📚 Templates | ||
|
||
- [CodeSandBox](https://codesandbox.io/s/resetercss-26kzw) | ||
- [CodePen](https://codepen.io/krishdevdb/pen/XWppdvK) | ||
- More soon... | ||
|
||
<br> | ||
|
||
## ♥ Feedback | ||
|
||
<a href="https://www.producthunt.com/posts/reseter-css?utm_source=badge-review&utm_medium=badge&utm_souce=badge-reseter-css#discussion-body" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/review.svg?post_id=285799&theme=light" alt="Reseter.css - A futuristic CSS reset and normalize | Product Hunt" width="250" height="54" /></a> | ||
|
||
<br> | ||
|
||
## 🧑 Authors | ||
|
||
| <img src="https://avatars.githubusercontent.com/u/76587897?s=500" alt="krishdevdb" width="100" /> | | ||
| :----------------------------------------------------------: | | ||
| Krish | | ||
| [Github](https://github.com/krishdevdb) | | ||
| [Email](mailto:krishdevdb@gmail.com) | | ||
|
||
<br> | ||
|
||
## ❤ Thanks to our supporters | ||
|
||
### ⭐ Stargazers | ||
|
||
<a href="https://github.com/krishdevdb/reseter.css/stargazers"> | ||
<img src="https://reporoster.com/stars/krishdevdb/reseter.css"></a> | ||
|
||
<br> | ||
|
||
### 🍴 Forkers | ||
|
||
<a href="https://github.com/krishdevdb/reseter.css/fork"> | ||
<img src="https://reporoster.com/forks/krishdevdb/reseter.css"></a> | ||
|
||
<br> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
# Reseter.css Wiki | ||
|
||
> These docs are automatically deployed [here](https://github.com/resetercss/reseter.css/wiki) using github action | ||
Hey there! Welcome to the Reseter.css wiki. This wiki is our documentation. We have usage guides, performance optimizations and contributing guidelines. | ||
|
||
### What is in the wiki? | ||
|
||
* [Static Usage](https://github.com/krishdevdb/reseter.css#-get-using-it) | ||
* [Framework Usage](https://github.com/krishdevdb/reseter.css/wiki/Usage) | ||
* [Basic Performance](https://github.com/krishdevdb/reseter.css#-optimize) | ||
* [Advanced Performance](https://github.com/krishdevdb/reseter.css/wiki/Performance) | ||
* [Meet Our Community](https://github.com/krishdevdb/reseter.css/wiki/Community) | ||
|
||
### Basics | ||
This wiki is not meant for any kind of basics, we have all our basics in the [readme](https://github.com/krishdevdb/reseter.css#readme). This is more frequently updated, and contains most guidelines for begginers. In the wiki, we cover all the advanced topics! | ||
|
||
### Mission | ||
|
||
CSS Resets were declining, the maintaince was getting poor, css resets were on the verge of eradication! I was really a fan of css resets, they were a great idea. I personally used all of the css resets to find my match, none of them successed but the industry standard normalize.css took my attention. It wasn't soon the maintaince was getting poor, none updates were being published, the flavor was gone. At that time I was learning advanced css, I wanted more of the taste in a css reset, this was where reseter.css was born. It is been 2 years since the birth, but 3 months since the release. You might got to know that reseter.css must have been widely tested and improved over time! Yes it was and is improving over time! I want a css reset that can change people's thoughts upons css resets. I want a css reset that can sustain forever! | ||
|
||
### Join the development | ||
The easiest way to join the development is reporting for issues and fixing them, to reduce spam and malicious activity all folks are behind a wall of pull requests. | ||
|
||
1. Fork the repository | ||
2. Make changes in your fork | ||
3. Add a pull request to our repo | ||
4. We will review your changes | ||
5. We will merge them and you are successfully a part of the crew |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
These are tricks and tips, for speed with reseter.css. These do not include the ones mentioned in the readme. The ones in the readme are the most efficient ones, I suggest having a look at theme first! Read the [Readme's Optimizations Section](https://github.com/krishdevdb/reseter.css#-optimize) | ||
|
||
### Purging CSS | ||
|
||
Purging css is a method that allows you to only keep the code of elements you use. This can result in 30% size reduce | ||
|
||
Read the documentation here: [purgecss.com](https://purgecss.com/) | ||
|
||
### Minification | ||
|
||
As of version 1.1.0, reseter.css is completely minified before export. | ||
|
||
### Brotli | ||
|
||
1. Install [Git](https://git-scm.com/) and [Nodejs](https://nodejs.org/) | ||
|
||
2. Clone this repository (The cloning process will make a directory named 'reseter/css' in your current directory, thus move to a safe directory before) | ||
```bash | ||
git clone https://github.com/krishdevdb/reseter.css | ||
``` | ||
|
||
3. Change the directory | ||
```bash | ||
cd reseter.css | ||
``` | ||
|
||
4. Install development tools. | ||
```bash | ||
npm install | ||
``` | ||
|
||
5. Configure to use brotli, to configure brotli, you need to edit the .bundlewatch.config.json change the default compression to brotli | ||
```diff | ||
{ | ||
"files": [ | ||
{ | ||
"path": "css/reseter.css", | ||
"maxSize": "3kb" | ||
}, | ||
{ | ||
"path": "css/reseter.min.css", | ||
"maxSize": "3kb" | ||
} | ||
], | ||
- "defaultCompression": "gzip" | ||
+ "defaultCompression": "brotli" | ||
} | ||
``` | ||
|
||
6. Build the source | ||
```bash | ||
npm run npm:build | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
## 🐍 Django | ||
|
||
1. Download reseter.css into the static directory | ||
|
||
2. Find your template file | ||
|
||
3. Call reseter.css with a link tag | ||
```html | ||
<link rel="stylesheet" href="{{ STATIC_URL }}/path/to/reseter.css" /> | ||
``` | ||
|
||
## ⚛ ReactJs | ||
|
||
1. Install reseter.css | ||
```bash | ||
npm i reseter.css | ||
``` | ||
|
||
2. Import in you main file | ||
```jsx | ||
import "reseter.css"; | ||
``` | ||
|
||
## ✌ VueJs | ||
|
||
1. Install reseter.css | ||
```bash | ||
npm i reseter.css | ||
``` | ||
|
||
2. Import in you main file | ||
```jsx | ||
import "reseter.css"; | ||
``` | ||
|
||
## ⏭ Next.js | ||
|
||
1. Install reseter.css | ||
```bash | ||
npm i reseter.css | ||
``` | ||
|
||
2. Import in you _App.js file | ||
```jsx | ||
import "reseter.css"; | ||
``` | ||
|
||
## 💅 Styled Components | ||
|
||
1. Install reseter.css | ||
```bash | ||
npm i reseter.css | ||
``` | ||
|
||
2. Create a global style | ||
```jsx | ||
import { createGlobalStyle } from "styled-components"; | ||
import resetercss from "node_modules/reseter.css/src/styled-components/js/reseter.js"; | ||
|
||
export const GlobalStyle = createGlobalStyle` | ||
${resetercss} | ||
// You can continue writing global styles here if you want. | ||
`; | ||
``` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
### Reseter.css Wiki | ||
|
||
* [Static Usage](https://github.com/krishdevdb/reseter.css#-get-using-it) | ||
* [Framework Usage](https://github.com/krishdevdb/reseter.css/wiki/Usage) | ||
* [Basic Performance](https://github.com/krishdevdb/reseter.css#-optimize) | ||
* [Advanced Performance](https://github.com/krishdevdb/reseter.css/wiki/Performance) | ||
* [Meet Our Community](https://github.com/krishdevdb/reseter.css/wiki/Community) |