How do I add foundation with grunt to a ember.js app kit project

Question

I'm trying to setup my first Ember.js app with Ember AppKit, grunt, and compass. The appkit ships with support of compass out of the box via grunt-contrib-compass but I can't figure out for the life of me how to install Zurb-Foundation, or at least not "properly."

As far as I can tell, grunt-contrib-compass doesn't provide a wrapper around compass's install method. I could duplicate the compass.js task settings for a compass config file but it seems like there should be a way to do this without duplicating the data.

Alternatively, I guess I could just copy everything over manually but that cuts off my path for easy upgrades.

Any help would much much appreciated.

Answer 1

This is how I added foundation to my ember-app-kit project.

bower.json

{
  "name": "ember-app-kit",
  "dependencies": {
    "ember": "http://builds.emberjs.com.s3.amazonaws.com",
    "handlebars": "1.0.0",
    "jquery": "~1.9.1",
    "qunit": "~1.12.0",
    "foundation": "~4.3.2",
    "momentjs": "~2.1",
  }
}

bower install

The sass task looks like this:

module.exports = {
  compile: {
    files: {
      'tmp/public/assets/app.css': 'app/styles/app.scss'
    }
  }
};

I'm only compiling one file.

The app.scss file:

@import "foundation_config";
@import "foundation_includes";
@import "mixins/index";
@import "fonts/index";
... truncated for brevity

The _foundation_config.scss file is the foundation variables

The _foundation_includes.scss file is where I include the modules that I'm using.

@import "../../vendor/foundation/scss/normalize";
@import "../../vendor/foundation/scss/foundation/components/global";
@import "../../vendor/foundation/scss/foundation/components/grid";
@import "../../vendor/foundation/scss/foundation/components/visibility";
@import "../../vendor/foundation/scss/foundation/components/block-grid";
@import "../../vendor/foundation/scss/foundation/components/type";
@import "../../vendor/foundation/scss/foundation/components/buttons";
@import "../../vendor/foundation/scss/foundation/components/forms";
@import "../../vendor/foundation/scss/foundation/components/custom-forms";
// @import "../../vendor/foundation/scss/foundation/components/button-groups";
// @import "../../vendor/foundation/scss/foundation/components/dropdown-buttons";
// @import "../../vendor/foundation/scss/foundation/components/split-buttons";
// @import "../../vendor/foundation/scss/foundation/components/flex-video";
@import "../../vendor/foundation/scss/foundation/components/section";
@import "../../vendor/foundation/scss/foundation/components/top-bar";
... truncated for brevity 

I hope this is helpful.

Cheers Dave