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
• 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.)

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

npm i scss-reset --save-dev

Usage

Please include at the top of the main.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

yarn add scss-reset --dev

by pnpm

pnpm i scss-reset --dev

Import variations

@import 'scss-reset';

or

@use 'scss-reset/reset';

or depending on your workspace configuration, this will work too:

@use '../node_modules/scss-reset/src/scss/_reset.scss';

or:

@use '../node_modules/scss-reset/_reset.scss';

or by the (mostly) deprecated way:

or

@import 'scss-reset/reset';

CDN

Optimized and compressed CSS version for _reset.scss

<link rel="stylesheet" href="https://unpkg.com/scss-reset/reset.css">

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.

{{ '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.

@use 'scss-reset/total';

Light Reset

light-reset.scss -- Ideal for use with popular CSS frameworks and offering maximum compatibility

@use 'scss-reset/light';

Mixins

Please include into necessary module:

@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 <meter> | | progressReset | @include progressReset; | Styles reset for <progress> | | 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:

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:

.page-content {
  @include offx;
}

Contributing

For issues, bugs or improvements please open an issue

MIT License