Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frontend-layers/scss-reset
SCSS reset compilation: modern + mayers + normalizer
https://github.com/frontend-layers/scss-reset
css front-end normalize reset sass scss shopify typography
Last synced: 2 days ago
JSON representation
SCSS reset compilation: modern + mayers + normalizer
- Host: GitHub
- URL: https://github.com/frontend-layers/scss-reset
- Owner: Frontend-Layers
- License: mit
- Created: 2019-10-10T20:28:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-08T20:29:02.000Z (16 days ago)
- Last Synced: 2025-01-13T01:06:51.954Z (11 days ago)
- Topics: css, front-end, normalize, reset, sass, scss, shopify, typography
- Language: SCSS
- Homepage: https://frontend-layers.github.io/scss-reset/test/index.html
- Size: 428 KB
- Stars: 22
- Watchers: 3
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# SCSS Reset
[](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/scss-reset)
[](https://www.npmjs.com/package/scss-reset)
_Reset compilation = modern reset + Meyer's reset + normalizer_
Demo: https://frontend-layers.github.io/scss-reset/test/index.html
## Features
- Based on [Meyer's CSS Reset](https://meyerweb.com/eric/tools/css/reset/)
- Modernized [modern-css-reset](https://github.com/hankchizljaw/modern-css-reset)
- Useful parts from [normalize.css](https://necolas.github.io/normalize.css/)
- Optional typography and mobile friendly definitions by SCSS variables (REM, BEM(int))
- Expandable by prebuilded mixins and ports (Accessability, HTML and Web Components, etc.)
## Why
To instantly fix some persistent CSS issues and add missing parts for popular CSS resets.
It is also compatible with other HTML/CSS frameworks like Twitter Bootstrap, Tailwind CSS, etc.
You can extend reset styles by a mixin collection and easily improve it.
## Install
```shell
npm i scss-reset --save-dev
```
## Usage
Please include at the top of the `main.scss`:
```scss
@use 'scss-reset';
```
## Ports
| Title | Usage | Description |
|--------------------|------------------------------|-------------------------------------------------------------------------------------------------------------------|
| total-reset.scss | @use 'scss-reset/total'; | Provides a deep CSS reset, ideal for web components and plugins to ensure consistent styling across environments. |
| light-reset.scss | @use 'scss-reset/light'; | Offers a lightweight reset with maximum compatibility for use alongside popular CSS frameworks. |
## Troubleshooting
### Install variations
by yarn
```shell
yarn add scss-reset --dev
```
by pnpm
```shell
pnpm i scss-reset --dev
```
#### Import variations
```scss
@import 'scss-reset';
```
or
```scss
@use 'scss-reset/reset';
```
or depending on your workspace configuration, this will work too:
```scss
@use '../node_modules/scss-reset/src/scss/_reset.scss';
```
or:
```scss
@use '../node_modules/scss-reset/_reset.scss';
```
or by the (mostly) deprecated way:
or
```scss
@import 'scss-reset/reset';
```
## CDN
Optimized and compressed CSS version for _reset.scss
```html
```
Transferred size: 3.62 kB
## Typography Usage
- _variables.scss
- _typography.scss
⚠️ _variables.scss and _typography.scss are optional.
You can copy them from to development folder for additional custom modifications
```
'node_modules/scss-reset/src/scss/_variables.scss';
'node_modules/scss-reset/src/scss/_typography.scss';
```
### Usage with Shopify Dawn theme
- Please copy the `reset-shopify-down.css` file from the `/res` npm folder to the `/assets` theme folder.
- Please include the `reset-shopify-down.css` file in `layout/theme.liquid/` after `base.css`.
```liquid
{{ 'reset-shopify-down.css' | asset_url | stylesheet_tag }}
```
## Total Reset
`total-reset.scss` Designed for Web Components, modern JavaScript applications, or browser extensions.
Ideal when you need to ❗**deep reset all properties**❗ of Shadow DOM elements without **resetting document styles**.
```scss
@use 'scss-reset/total';
```
## Light Reset
`light-reset.scss` -- Ideal for use with popular CSS frameworks and offering maximum compatibility
```scss
@use 'scss-reset/light';
```
## Mixins
Please include into necessary module:
```scss
@use 'scss-reset/reset-mixins' as *;
```
### Available Mixins
| Mixins | Include | Description |
|--------------------|------------------------------|---------------------------------------------------|
| disableAnimation | @include disableAnimation; | Disable CSS animation |
| acDisableAnimation | @include acDisableAnimation; | Disable CSS animation depends of OS configuration |
| acModeBW | @include acModeBW; | Grayscale Mode |
| acModeContrast | @include acModeContrast; | Contrast Mode with Inverted colors |
| meterReset | @include meterReset; | Styles reset for `````` |
| progressReset | @include progressReset; | Styles reset for `````` |
| inputColorReset | @include inputColorReset; | Rest for input type:color |
| offx | @include offx; | Prevent horizontal overflow issues for elements |
| offxAll | @include offxAll; | offx for whole document |
### @mixin offxAll
This mixin adds the following snippet:
```css
html, body {
overflow-x: hidden
}
```
Please be careful. You'll get scroll fix for whole page, but:
- However, this can cause accessibility issues because it permanently hides overflow content
- CSS property `position: sticky;` doesn't work because an ancestor element (`html, body`) has overflow property set.
Please use `@include offx;` for selected block elements instead of to avoid CSS 'sticky' and UX issues.
For example:
```scss
.page-content {
@include offx;
}
```
## Contributing
For issues, bugs or improvements please open an [issue](https://github.com/frontend-layers/scss-reset/issues/new)
---
[MIT License](LICENSE)