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

by yarn

yarn add scss-reset --dev

by pnpm

pnpm i scss-reset --dev

Usage

Please include at the top of the main.scss:

@use 'scss-reset';

or:

@import 'scss-reset';

Troubleshooting Usage

@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 for Web Components

Please, use _total-reset.scss for Web Components or for modern JavaScript Apps where need to ❗deep reset all properties of the ❗Shadow DOM elements without reset Document styles.

Import Total Reset SCSS file

@use 'scss-reset/total-reset';

Light Reset

@use 'scss-reset/light-reset';

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;
}

Technical Files

• Compressed CSS version: /build/reset.css
• Test Pages List: /test/index.html

Contributing

For issues, bugs or improvements please open an issue

MIT License