nadavshatz / ember-cli-foundation-sass

Automatically sets up Foundation 5 SASS in your Ember CLI app.
https://www.npmjs.org/package/ember-cli-foundation-sass
MIT License
68 stars 18 forks source link

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:

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

Installation (ember-cli < 0.1.5)

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