A Yeoman Generator for Bootstrap Projects:

• LESS
• Bootstrap mixins
• Lesshat mixins
• Font Awesome option
• Preconfigured Grunt tasks
• HTML Templating for better reuse of templates
• Live reload :)
• Coffee Script support for custom scripting (if you are coffee script fan... )

It can be used as a quick way to setup responsive bootstrap projects.

Getting Started

1. Install Yeoman

npm install -g yo

2. Install bootstrap project generator

To install generator-bs from npm, run:

npm install -g generator-bs

Finally, initiate the generator:

# create a project folder
mkdir project_dir && cd $_
yo bs

Start development.

# run grunt command to start development
grunt dev

Start editing the templates/index.html file

###Follow the mobile first approach ( read more )

Use css/less/variables.less to define less variables

Use css/less/styles.less to define your css

Use Mixins:

	// less/variables.less
	@my-btn-color:  #000;
	@my-btn-bg-color: #CCEEFF;
	@my-btn-border: #AAEECC;

	// less/styles.less
	.my-custom-btn{
    	.button-variant(@my-btn-color; @my-btn-bg-color; @my-btn-border);
    	.box-shadow(4px 4px 2px #888888);
    	font-weight : bold;
	}

	// templates/index.html
	<button class="btn my-custom-btn">My Button</button>
	

###Todo:

• Grunt task for distribution build
• Grouping media queries css together
• Pretty formatted distribution build
• Ability to choose responsive menu jquery plugin
• Support multiple pages instead of only index.html

###Issue Tracking: Please log any issues or suggesstions @ https://github.com/surajair/generator-bs/issues

License

MIT