https://github.com/black-axis/reset-zone
A modern CSS reset for modern web applications!
https://github.com/black-axis/reset-zone
css css-reset reset reset-zone scss scss-reset
Last synced: 17 days ago
JSON representation
A modern CSS reset for modern web applications!
- Host: GitHub
- URL: https://github.com/black-axis/reset-zone
- Owner: Black-Axis
- License: mit
- Created: 2024-10-26T15:23:49.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-01-29T19:58:15.000Z (3 months ago)
- Last Synced: 2025-03-16T01:21:35.054Z (about 1 month ago)
- Topics: css, css-reset, reset, reset-zone, scss, scss-reset
- Language: SCSS
- Homepage: https://www.npmjs.com/package/reset-zone
- Size: 150 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Security: SECURITY.md
- Authors: AUTHORS.md
Awesome Lists containing this project
README
# reset-zone
**reset-zone** is a lightweight CSS reset designed to provide a consistent starting point for web projects. This CSS reset resets browser styling and removes default margins, padding, and other styles, giving you full control over the appearance of your elements across all major browsers.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Features](#features)
- [Contributing](#contributing)
- [License](#license)
## Installation
You can easily add **reset-zone** to your project via npm or directly include it in your HTML.
via `npm`:
```bash
npm install reset-zone
```
Or using `yarn`:
```bash
yarn add reset-zone
```
## Usage
After installation, you can simply import the CSS file at the top of your main stylesheet if using npm, or directly in your HTML if you downloaded it.
If you're using a bundler like Webpack, import it at the top of your main CSS or SCSS file (or any CSS preprocessor):
For using SCSS regular version:
```scss
@use "/go/to/node_modules/reset-zone/src/reset-zone.regular.scss" as ResetZoneLibraryWithCSSRegular;
```
For using SCSS layer version:
```scss
@use "/go/to/node_modules/reset-zone/src/reset-zone.layer.scss" as ResetZoneLibraryWithCSSLayer;
```
⭕ But the previous ways is not recommended.
✅ The recommended ways to use the version of CSS because of vendor prefixes in CSS files:
For using regular version:
```css
@import '/go/to/node_modules/reset-zone/dist/reset-zone.regular.css';
```
And minified version of regular version:
```css
@import '/go/to/node_modules/reset-zone/dist/reset-zone.regular.min.css';
```
For using layer version:
```css
@import '/go/to/node_modules/reset-zone/dist/reset-zone.layer.css';
```
And minified version of layer version:
```css
@import '/go/to/node_modules/reset-zone/dist/reset-zone.layer.min.css';
```
Or, if using JavaScript to manage styles:
```javascript
import '/go/to/node_modules/reset-zone/dist/reset-zone.{layer/regular}.{min.css|.css}';
```
Or, you can use it into link tag of your HTML:
For using regular version:
```html
```
For using minified regular version:
```html
```
For using layer version:
```html
```
For using minified layer version:
```html
```
This will apply the reset styles globally, ensuring a consistent baseline across browsers.
## Features
- `Removes Default Margins and Padding`: Strips away all default browser styles, including margins and paddings, to create a level playing field.
- `Consistent Typography`: Sets up base font styles, including font size and line height.
- `Improved Accessibility`: Sets a clear focus outline and maintains usability for keyboard navigation.
- `Enhanced Layout Control`: Reduces browser-specific quirks that interfere with layout styling, such as `box-sizing`.
## Contributing
Contributions, issues, and feature requests are welcome!
Please feel free to open an `issue` or submit a `pull request` in the [GitHub repository]("https://github.com/Black-Axis/reset-zone") or read the [CONTRIBUTING.md]("https://github.com/Black-Axis/reset-zone/blob/master/CONTRIBUTING.md")
## License
This project is licensed under the `MIT License`.
See the [LICENSE.md]("https://github.com/Black-Axis/reset-zone/blob/master/LICENSE.md") file for more details.
So, enjoy a consistent and clean starting point with reset-zone!