Skip to content

Commit

Permalink
feat: migrate wiki
Browse files Browse the repository at this point in the history
  • Loading branch information
xkrishguptaa committed Sep 5, 2021
1 parent 162aa6a commit 592edfe
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 0 deletions.
63 changes: 63 additions & 0 deletions docs/Community.md
@@ -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>
29 changes: 29 additions & 0 deletions docs/Home.md
@@ -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
53 changes: 53 additions & 0 deletions docs/Performance.md
@@ -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
```
66 changes: 66 additions & 0 deletions docs/Usage.md
@@ -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.
`;
```

7 changes: 7 additions & 0 deletions docs/_Sidebar.md
@@ -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)

0 comments on commit 592edfe

Please sign in to comment.