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