Foundation for Apps: Bootstrapping with ng-boilerplate and Grunt

I will list down the steps that are required to bootstrap an AngularJS application with Foundation for Apps, along with ng-boilerplate & Grunt.

Clone the ng-boilerplate repository from https://github.com/ngbp/ngbp

Do a `bower install -save foundation-apps`. If prompted, resolve to the latest version of AngularJS. Update angular-mocks to latest version, if `grunt build` fails after this step.

Do a `bower install -save foundation`.

Now we need to add a Sass pipeline with our Grunt task runner.

Start by first creating a `src/scss` folder and copy `main.scss` and `_settings.scss` files from Foundation for Apps default scaffold.

Install the `grunt-contrib-sass` plugin.

Update your Gruntfile.js and build.config.js to take into account the new folders.

You need to also update the `karma/karma-unit.tpl.js` to add foundation-css in test scripts.

You need to also update app.js to add `foundation` module dependency in the main app module.

Initialize foundation javascript using jQuery.

Copy iconic and fonts to add icon and foundation-icon-font support.

Like what you read? Give Saket Saurabh a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.