Mossflower is a global reset CSS utility for both LESS and SASS
- Both robust and bare-bones; you won't find yourself fighting against this utility
- It is free to use and modify as you please.
- Both LESS (.less) and SASS (.scss) versions are available.
- It sets a single standard for sizing (REM) so you can do all sizing off 1REM = 10PX
$ git clone https://github.com/herereadthis/mossflower.git $ cd mossflower/ $ npm install $ npm run bower $ npm run grunt
Recommended (A): Add Mossflower as an NPM package
$ npm install --save mossflower
If you add Mossflower as an NPM package, then it will default to the
.less version if you are using commonJS modules
// ECMAScript 5 require('mossflower'); // ES6 import 'mossflower';
Recommended (B): Add Mossflower as a Bower dependency
$ bower install --save mossflower
Alternative: Add Mossflower as a submodule
$ cd my_repo $ git submodule add https://github.com/herereadthis/mossflower.git $ git add mossflower .gitmodules $ git commit -m "adds Mossflower submodule"
As LESS: Add to your imports
As SASS: Add to your imports
What about Normalize CSS?
Mossflower was created as an alternative to Normalize because of several reasons:
- Normalize doesn't use a consistent font sizing setup. Sometimes things are defined by percentages, sometimes by EM units and sometimes by pixels. Mossflower just uses REM units.
- Normalize defines a lot of HTML elements that most developers won't be using anyway (such as the
h1) and you'll end up writing overrides for it - which defeats the purpose of having a global reset.
- Normalize also contains a lot of overrides to remove Mac/Apple styling on forms. It will probably confuse Mac users who notice their forms look different than what they're most accustomed to seeing.