CSS global reset that will make your life easier
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.bowerrc
.gitignore
.npmignore
.travis.yml
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

Mossflower

Bower version Build Status devDependency Status npm version

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

Build

$ git clone https://github.com/herereadthis/mossflower.git
$ cd mossflower/
$ npm install
$ npm run bower
$ npm run grunt

CSS importing

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
@import "/PATH_TO/../mossflower/src/less/mossflower.less";
As SASS: Add to your imports
@import "/PATH_TO/../mossflower/src/sass/mossflower.scss";

What about Normalize CSS?

Mossflower was created as an alternative to Normalize because of several reasons:

  1. 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.
  2. Normalize defines a lot of HTML elements that most developers won't be using anyway (such as the small, figure, and h1) and you'll end up writing overrides for it - which defeats the purpose of having a global reset.
  3. 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.