andreymatin/scss-reset

SCSS reset compilation: modern + mayers + normalizer

SCSS Reset

Reset compilation = modern reset + meyer's reset + normalizer.

Demo: https://andreymatin.github.io/scss-reset/test/index.html

Features

• Based on Meyer's CSS Reset
• Modernized modern-css-reset
• Useful parts from normalize.css
• Typography by SCSS variables (REM, BEM(int))
• Expandable by prebuilded mixins (Accessability, HTML components)
• Mobile friendly optimization

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

yarn add scss-reset;

or

npm i scss-reset --save;

Usage

Please include into top of the main.scss:

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

or:

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

or shorter:

@import 'scss-reset/_reset.scss';

depends of your workspace configuration.

Typography Usage

• _variables.scss
• _typography.scss

_variables.scss and _typography.scss are optional.

Please copy them from

'node_modules/scss-reset/src/scss/_variables.scss';
'node_modules/scss-reset/src/scss/_typography.scss';

for additional modifications.

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

CDN

https://cdn.jsdelivr.net/gh/andreymatin/scss-reset/build/reset.css

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>

Technical Files

• Compressed CSS version: /dist/main.css
• Test Page: /test/index.html

GitHub

• https://github.com/andreymatin/scss-reset

Contributing

For issues, bugs or improvements please open an issue

License

MIT