Modular, easy to use boilerplate for building web applications. Official Repository
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Front-end Boilerplate.

Because repeating yourself is suck. Build Status devDependency Status Dependency Status

Alt text

Modular, easy to use boilerplate for building web applications


Frontend Boilerplate is a simple Gruntfile and directory structure for an easy starting point with web applications using: Grunt and Bower. It is designed to give you a quick and organized way to start developing web apps with best practices in mind.


As a developer, everytime you need to start a new web project you must follow the same steps. Write a lot of JavaScript code, using a CSS pre-processor, start a server, open your browser to see the page, go back to the editor made some changes, go back to the browser e repeat this flow many, many times a day. For this we created this repository to collect the best practice around the web community and put all together in one place. Be cool, share your experience too.


All code here are based on lessons learned and good practices, however many of them are fruits of research in several blog, tutorials, lectures and other sources.



Getting Started

To get you started you can simply clone or download the repository and install the dependencies, very simple! Quick start.

Also you can using the Yeoman Generator to start even fast.


You need Git to clone the repository.

Also you must have Node.js and its package manager (npm) installed.

And Bower the package manager

Installing frontendboilerplate

Clone the repository using git:

git clone
cd frontendboilerplate

If you just want to start from zero commit history, you need to do:

git clone --depth=1 <your-project-name>

The depth=1 tells git to only pull down one commit worth of historical data.

Install Dependencies

Open your Terminal window inside the project folder and type the following command:

npm install

The npm command will install all the dependencies listed on package.json file.

Your application is ready to go


The step-by-step is very simple but if you find some issue please let us know at: issues.

Application Directory Layout

We propose a folder structure for web projects from the scratch, because all web projects have CSS, JS and Images folders.

	assets/					--> all of the files to be used in production
		css					--> css files
		fonts				--> Font-face folder
		images				--> image files
		js/					--> javascript files
			vendor 			--> third party libraries copied from src/vendor
	lib/					--> 3rd party bower libraries
	src/					--> scripts for development
		scripts/			--> hand made JavaScript files, plugins and others
		preprocessor/		--> your choice for Sass or Less
		vendor/				--> third party libraries like: respond, mçodernizer
	test					--> test source files and libraries
		mocha				--> mocha folder structure for visual test results
			js/				--> testing frameworks file
		spec				--> specs for testing
			app-test.js		--> example on how to write tests
		test.html			--> visual page for tests
	index.html				--> base layout file
	Gruntfile.js			--> where the magic happens

Grunt commands available


grunt dev

This command will run two tasks:

  • connect
  • watch

Using the concurrent and livereload plugins.


grunt lint

This command will run two tasks:

  • jshint
  • csshint


grunt less
grunt sass

Using less task will compile less files, using sass task will compile sass files.


grunt test

This command will run one task:

  • mocha


grunt build

This command will run four tasks:

  • lint
  • concat
  • uglify
  • test

Helpers Tasks


grunt bower

Grunt will install all bower dependencies from the bower.json file.


grunt injector

Grunt will inject all bower dependencies from the bower.json file into index.html.

After include some bower denpendecy on bower.json file, optionally run grunt bower and grunt injector.