Reset compilation = modern reset + meyer's reset + normalizer.
Demo: https://andreymatin.github.io/scss-reset/test/index.html
- Based on Meyer's CSS Reset
- Modernized modern-css-reset
- Useful parts from normalize.css
- Typography normalization by SCSS variables (REM, BEM(int))
- Expandable by Accessability and Responsive mixins
- Mobile friendly optimization
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.
I recommend to use copies of _typography.scss and _variables.scss for design systems and themes extending.
yarn add scss-reset;
or
npm i scss-reset --save;
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';_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.
Ready to use HTML template with all necessary includes is there:
- _variables.scss
- _typography.scss
- disableAnimation
- acDisableAnimation
- acModeBW
- acModeContrast
- meterReset
- progressReset
Disable animation
@include disableAnimation;Disable animation by Browser Configuration
@include acDisableAnimation;Grayscale Mode
@include acModeBW;Contrast Mode with Inverted colors
@include acModeContrast;Styles reset for <meter>
@include meterReset;Styles reset for <progress>
@include progressReset;- Compressed CSS version: /dist/main.css
- Test Page: /test/index.html
For issues, bugs or imporvements please open an issue
MIT