Bemo is a Sass-based project starter meant to be a starting point and structural guide rather than a full framework. It's bare enough to not interfere with your custom styles or scripts, but yet has enough functioning modules to jumpstart a project in no time.
Bemo strictly follows the BEM naming methodology, and is heavily inspired by the inuit.css framework.
Bemo is accompanied by a couple of CLI tools let you easily generate:
- a basic bemo skeleton
- custom icon webfonts starting from a set of SVGs
A Bemo project will look like this:
.
├── fonts
│ └── svg
└── stylesheets
├── blocks
├── formats
├── functions
├── keyframes
├── mixins
├── variables
└── application.sass
The fulcrum of the whole tree lies in the stylesheets/blocks directory,
which will contain all the blocks that compose your frontend styling.
A preview of the BEM blocks available with Bemo is available here: http://cantierecreativo.github.io/bemo/
Just type this into you project folder:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/cantierecreativo/bemo/master/installer/install)"
Please take a look at the following repositories if you want to setup build tools manually:
- https://github.com/cantierecreativo/bemo-scaffold
- https://github.com/cantierecreativo/bemo-webfonts
npm install
npm link
cd docs && npm link grunt-bemo
npm install
bower install
grunt dev
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.