frontend-layers/scss-reset

SCSS reset compilation: modern + mayers + normalizer

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 compoents, etc.)

Why

For 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 styles reset by 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 into top of the main.scss:

@use 'scss-reset/reset';

or depends of your workspace configuration will works too:

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

or:

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

or by (mostly) depricated way:

@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 reset-shopify-down.css from '/res' npm folder to '/assets' theme folder
• Please, include reset-shopify-down.css into '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.

Imoprt Total Reset SCSS file

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

Mixins

Please include into necessary module:

@use 'scss-reset/reset-mixins' as *;

Mixins List

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 will add this snippet:

html, body {
  overflow-x: hidden
}

Please be careful. You'll got scroll fix for whole page, but:

• It isn't good for accessibility because it hides overflowed content permanently
• CSS poperty position: sticky; doesn't work because an ancestor element (html, body) has overflow property set.

Please use @include offx; for selected block elements instead 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