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
$ 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';
$ bower install --save mossflower
$ cd my_repo
$ git submodule add https://github.com/herereadthis/mossflower.git
$ git add mossflower .gitmodules
$ git commit -m "adds Mossflower submodule"
@import "/PATH_TO/../mossflower/src/less/mossflower.less";
@import "/PATH_TO/../mossflower/src/sass/mossflower.scss";
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
small
,figure
, andh1
) 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.