npm install scss-reset


_Reset compilation = modern reset + Meyer's reset + normalizer_
Demo: https://frontend-layers.github.io/scss-reset/test/index.html
- Based on Meyer's CSS Reset
- Modernized modern-css-reset
- Useful parts from 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.)
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.
``shell`
npm i scss-reset --save-dev
Please include at the top of the main.scss:
`scss`
@use 'scss-reset';
| 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. |
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';
Optimized and compressed CSS version for _reset.scss
`html`
Transferred size: 3.62 kB
- _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';
- Please copy the reset-shopify-down.css file from the /res npm folder to the /assets theme folder.reset-shopify-down.css
- Please include the file in layout/theme.liquid/ after base.css.
`liquid`
{{ 'reset-shopify-down.css' | asset_url | stylesheet_tag }}
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.scss -- Ideal for use with popular CSS frameworks and offering maximum compatibility
`scss`
@use 'scss-reset/light';
Please include into necessary module:
`scss`
@use 'scss-reset/reset-mixins' as *;
| 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 |
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;
}
For issues, bugs or improvements please open an issue
---
MIT License