Due to lack of time, we are currently unable to maintain this project. We are, however, happy to continue accepting pull requests.
- Tests
Tested against ember-cli > v2.0.0 If you want to use it with ember-cli >=0.1.2, use v1.2.0 of the addon. If you want to use it with ember-cli >=0.0.44, use v0.3.3 of the addon.
This addon automates the steps to include SASS with Foundation 5.5.0 into your ember-cli app using ember-cli-sass as well as simplifying the customization of the settings and which components you want to include.
It also installs broccoli-clean-css, purely for convenience since it generally seems to lead to the best minification results: http://goalsmashers.github.io/css-minification-benchmark/.
ember install ember-cli-foundation-sass
npm install ember-cli-foundation-sass --save-devember g ember-cli-foundation-sass- If you clone an existing project with this addon, just run
npm i && bower i.
Running the blueprint installs Foundation 5.5.0 via Bower, copies over the _settings.scss as well as the foundation.scss to your app/styles folder.
It also creates a default app.scss that imports the _settings.scss as well as the _foundation.scss, so you can serve the app immediately. Lastly, it installs the already mentioned dependencies ember-cli-sass and broccoli-clean-css.
This setup is made so you don't have to worry about how to customize Foundation, but just lets you do it. Furthermore ember-cli-sass helps that the foundation import statements (in the _foundation.scss) 'just' work.
This addon provides an API to simplify adding the Foundation JavaScript modules and dependencies:
//Brocfile.js
//Includes modernizr, fastclick and the full foundation.js with all modules
var app = new EmberApp({
'ember-cli-foundation-sass': {
'modernizr': true,
'fastclick': true,
'foundationJs': 'all'
}
});
//Includes the core foundation.js with the tab, topbar, orbit and dropdown module
var app = new EmberApp({
'ember-cli-foundation-sass': {
'foundationJs': ['tab', 'topbar', 'orbit', 'dropdown']
}
});
//Includes just the core foundation.js without any modules
var app = new EmberApp({
'ember-cli-foundation-sass': {
'foundationJs': true
}
});Whenever you use any foundation JS module in your code, make sure that view/component includes the following:
import Ember from 'ember';
export default Ember.View.extend({ //or Ember.Component.extend
didInsertElement: function() {
this.$().foundation(); //or Ember.$(document).foundation();
}
});