ember-cli-foundation-sass

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: http://goalsmashers.github.io/css-minification-benchmark/.

Usage

Installation

• 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.

Options

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();
  }
});