Skip to content
Automatically sets up Foundation 5 SASS in your Ember CLI app.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Repo currently unmaintained!

Due to lack of time, we are currently unable to maintain this project. We are, however, happy to continue accepting pull requests.

Especially welcome:

  • Tests

Ember CLI Foundation SASS Addon

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:



  • ember install ember-cli-foundation-sass

Installation (ember-cli < 0.1.5)

  • npm install ember-cli-foundation-sass --save-dev
  • ember g ember-cli-foundation-sass
  • If you clone an existing project with this addon, just run npm i && bower i.

What It Does

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:

//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();
You can’t perform that action at this time.