https://github.com/tgdev/generator-inuit
A yeoman generator for the inuit css framework by Harry Roberts
https://github.com/tgdev/generator-inuit
Last synced: 11 months ago
JSON representation
A yeoman generator for the inuit css framework by Harry Roberts
- Host: GitHub
- URL: https://github.com/tgdev/generator-inuit
- Owner: tgdev
- License: mit
- Created: 2013-11-23T12:02:14.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-08-09T03:42:48.000Z (almost 12 years ago)
- Last Synced: 2024-11-20T00:49:46.520Z (over 1 year ago)
- Language: JavaScript
- Size: 355 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# generator-inuit
A [Yeoman](http://yeoman.io) generator for Harry Robert's [inuit](http://inuitcss.com) css framework.
**NOTE: Requires Sass 3.3**
## 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](http://csswizardry.com)
Below are 3 of the most helpful references to understanding Inuit and OOCSS concepts.
[MindBEMding – getting your head ’round BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
[The open/closed principle applied to CSS](http://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/)
[The single responsibility principle applied to CSS](http://csswizardry.com/2012/04/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](http://snook.ca) 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](http://smacss.com).
### Grunt support
[Grunt](http://gruntjs.com) 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](https://github.com/andismith/grunt-responsive-images), [HTML Partials](https://github.com/vanetix/grunt-includes), [Compass](https://github.com/gruntjs/grunt-contrib-compass), and [loads more](http://gruntjs.com/plugins), 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](http://yeoman.io)
## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License)
## Changelog
v0.6.5 - Found dependency in quotes sass module using !global (Sass 3.3)
v0.6.4 - Fixed error in gruntfile
v0.6.3 - Added missing grunt tasks to grunt build
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](https://github.com/ritchieanesco) for helping out with the inuit objects & abstrations feature
2. [Remy Bach](https://github.com/remybach) for [this article](http://remy.bach.me.uk/blog/2013/10/updating-existing-files-with-yeoman/) which enabled me to write content to the _vars.scss and style.scss files via a simple 'find hook and replace' solution.