generator-inuit

generator-inuit

A Yeoman generator for Harry Robert's inuit css framework.

Getting Started

Installing and running the inuit generator

To install generator-inuit from npm, run:

npm install -g generator-inuit

Then, from your projects directory, initiate the generator:

yo inuit

Helpful articles from CSS Wizardry

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

Inuit Objects & Abstractions

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.

SMACSS support

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.

Grunt support

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

Sass module sub-generator

yo inuit:sassmod "module-name"

How it works

• Creates partial sass file in css/src/modules/_[module-name].scss
• Adds @import "src/modules/[module-name]"; into style.scss

Note: you will be prompted by the sub-generator to overwrite style.scss with the new changes. Please choose yes and then enter.

Yeoman Info

What is Yeoman?

Yeoman is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.

Find out more at yeoman.io

License

MIT License

Changelog

v0.6.0 - Restructured scaffolding to separate files into app and dist. Added additional grunt tasks (autoprefixer, cssmin and rigger)

v0.5.2 - Fixed livereload issue and upgraded imagemin grunt package

v0.5.0 - Create partial sass files with sub-generator

v0.4.0 - Activate inuit modules

v0.3.0 - Grunt option/support

v0.2.0 - SMACSS option/support

v0.1.0 - Basic bowser install of inuit.css

Thank yous

Two people deserve a mention for helping me get a couple of the features done in one way or another.

1. Ritchie Anesco for helping out with the inuit objects & abstrations feature

2. Remy Bach for this article which enabled me to write content to the _vars.scss and style.scss files via a simple 'find hook and replace' solution.