Kick-off is a web project prototype that's based on HTML5 Boilerplate and Pure CSS. This tool was developed for those who need a boilerplate oriented to modules (css and js) to start a new project.

1. Writed in Sass + Compass
2. Uses Grunt to automate tasks like jshint, concat, uglify, minify and compile
3. Uses Bower to manage package dependencies (jQuery and Modernizr are included)
4. Sprites are generated automatically by Compass (believe me, this is awesome)
5. Comes with the homepage as blog and is responsive

1. Setup a PHP enviroment (PHP is only used to include partials pages)
2. Install Node.js
3. Install Ruby
4. Install Grunt.js
5. Install Bower
6. Install Sass
7. Install Compass
8. Clone the git repo - git clone git:https://github.com/rafaelcardoso/kick-off.git - or download it
9. Move the extracted directory to your PHP environment
10. Run npm install from your kick-off/ root folder to install the development dependencies
11. Run bower install from your kick-off/ root folder to install the javascript dependencies
12. Finally, enjoy :)

1. Before editing any .html, .css or .js file run grunt w from your kick-off/ root folder to Grunt watch the modifications and compile, lint and uglify your files automatically.

The structure of the folders is given in the following way:

└── src
	├── assets
	│	├── css
	│	├── font
	│	├── img
	│	│ 	├── dynamics
	│	│ 	├── favicons
	│	│ 	└── sprites
	│	├── js
	│	│ 	├── modules
	│	│ 	├── vendor
	│	│ 	│	├── modernizr
	│	│ 	│	└── jquery
	│	└── sass
	│	 	├── components
	│	 	│	├── default
	│		│	└── extended
	│	 	├── misc
	│	 	├── partials
	│	 	└── vendor
	│			└── font-awesome
	├── pages/ 
	└── structure/ 

Contains configurations files (Grunt, Bower and Compass).

Contains all files of the project

Contains all sass, css, javascript, images and fonts

Contains the only .css generated by Sass (main.css)

Contains all the fonts used on the project

Contains all the images used on the project.

Contains all mages generated dinamically by your application.

Contains the favicons files

Contains the images that compose sprites. Everytime that you add images in this folder, edit and save any .scss file, Compass will generate a new sprite automatically and will put him in the src/assets/img folder, overwriting the old image.

Contains all the javascript files by your application.

Contains all the javascript modules. Everytime that you save any .js file in this folder, grunt will hint, concat all the modules in a new file, hint the concatenated file and uglify him. The concatenated file will be put in the src/assets/js folder, overwriting the old file.

Contains all the .sass and .scss files. In this folder exists a file called main.scss, this file is responsible for call all modules of your style sheet architecture. Everytime that you edit and save any .sass or .scss file in this folder or subfolders, Sass will compile a new css file called 'main.css' and put him on the folder src/assets/css, overwriting the old file.

Contains all the components of your style sheet architecture separated in modules.

Contains the default modules of your style sheet architecture, like buttons, forms, grids and tables.

Contains the extended modules of your style sheet architecture, like blog posts, related posts, etc.

Contains miscellaneous files, like color palette, helpers, mixins and sprites.

If exists any css rules that should be applied only to one single page, should be placed in this directory. In this folder exists a file called structure.scss, this file is responsible for include all modules of your style sheet architecture. (this file is called at the main.scss)

Contains third-party libs and frameworks that you want to use, like font-awesome.

Contains all the .html files, you will probably move this directory to suit your need.

Contains the .html from header and footer of the pages (just for don't repeat in every page, you will probably change this also)

To Do: Explain the development guides

Improve the Gruntfile.js to generate a optimized build Improve the tag's indentation of .html files in src/pages

Check CONTRIBUTING.md