2

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.

Chance
  • 11,043
  • 8
  • 61
  • 84

1 Answers1

4

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

kiwiupover
  • 1,782
  • 12
  • 26
  • Thanks man. I've only ever used LESS so the whole 'compass install foundation' thing kinda threw me for a loop. I figured there had to be more to it than just the scss/sass files. +1 – Chance Sep 18 '13 at 23:23
  • What is it about compass that you need to use? If you don't need it just use sass. The sass npm module included in the ember app kit is really fast. – kiwiupover Sep 19 '13 at 02:59
  • I assumed Foundation needed it. I pulled the ripcord and went back to less. – Chance Sep 19 '13 at 19:30