A Yeoman generator for Harry Robert's inuit.css framework with SMACSS and grunt support
npm install generator-inuit
npm install -g generator-inuit
`
Then, from your projects directory, initiate the generator:
`
yo inuit
`
$3
Below are 3 of the most helpful references to understanding Inuit and OOCSS concepts.
MindBEMding – getting your head ’round BEM syntax
The open/closed principle applied to CSS
The single responsibility principle applied to CSS
Features
$3
Choose which inuit objects/abstractions you want to use in your project.
To skip this step, simply press enter as these can be configured manually once your project has been generated via the _vars.scss file.
$3
Jonathan Snook's SMACSS guide helps organise your site's CSS into flexible, maintainable chunks.
Files created are;
- 1-base.scss
- 2-layout.scss
- 3-states.scss
- 4-theme.scss
These files are placed in the css/src directory and automatically imported into css/style.scss.
Two more directories are added place your Sass partials into;
- css/src/modules
- css/src/plugins
For more info on SMACSS, visit SMACSS website.
$3
Grunt helps automate your workflow.
####Tasks
Development
`
grunt serve
`
- activates livereload
- opens site in browser (http://localhost:9000)
- watches files for changes
`
grunt watch
`
- watches for changes on all html files and assets (sass & js)
Production
`
grunt build
`
- Generates minified site stylesheet
- Optimises images
- Concatinates and minifies js
- Places all build assets (css, js & imgs) in dist directory
- Copies all other build files (.ico, html & web fonts) to dist directory
There are way more things you can do with grunt like Responsive Images, HTML Partials, Compass, and loads more, so feel free to add more to your gruntfile and package.json.
NOTE: Saying no to grunt option will generate a basic watch file to watch for Sass changes via the command line
$3
`
yo inuit:sassmod "module-name"
``