Ember CLI Foundation 6 SASS
Looking for maintainer
Sadly I am no longer able to maintain this project due to time constraints and no longer working with Foundation. I am happy to review pull requests but ideally I am looking for a new maintainer. If you're interested send me a message. New maintainer must already have reasonably popular packages, ideally within the Ember community.
Installation
npm install --save-dev ember-cli-sass
ember install ember-cli-foundation-6-sass
Getting Started
Run the generator to install the dependencies
ember g ember-cli-foundation-6-sass
Then, either let the generator add the app.scss file, or include the following in your existing one:
// For foundation-sites <= 6.3.0
// @import 'foundation';
// For foundation-sites >= 6.3.0
@include foundation-everything;
Note - Due to issue introduced by foundation-sites@6.3.0, you should use the following in your app.scss until the issue resolved.
@import "foundation-sites/foundation";
Also, if you encountered error Error: File to import not found or unreadable: util/util., you need to include
@import "foundation-sites/util/util";
See Foundation 6 documentation for details.
http://foundation.zurb.com/sites/docs/
If you want to include just the partials that you are actually using in your app, copy the foundation-everything mixininto a foundation-custom file, and import that mixin instead of the foundation-everything mixin. Then you can adjustwhat is and isn't included by editing the foundation-custom file. Warning: you will need to manage your dependenciesand styles manually if going this route.
Javascript
To use Foundation's Javascript features add foundationJS to your Ember app's options.
// ember-cli-build.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
'ember-cli-foundation-6-sass': {
'foundationJs': 'all'
}
});
return app.toTree();
};
Javascript Partials
To use only parts of Foundation's Javascript features add foundationJS to yourEmber app's options with an array of the elements to include. Remove the elements thatshould not be included. Using this method will require managing the dependencies for eachcomponent and making sure the appropriate util. files are included for the componentsbeing included. Because Foundation since v6.2 has written the modules in ES6, they needto be transpiled to ES5 (Ember does not transpile the vendors.js files).
// ember-cli-build.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
'ember-cli-foundation-6-sass': {
'foundationJs': [
'core',
'util.box',
'util.keyboard',
'util.mediaQuery',
'util.motion',
'util.nest',
// Renamed from util.timerAndImageLoader to util.timer in foundation-sites@6.4
// 'util.timerAndImageLoader',
'util.timer'
'util.touch',
'util.triggers',
'abide',
'accordion',
'accordionMenu',
'drilldown',
'dropdown',
'dropdownMenu',
'equalizer',
'interchange',
'magellan',
'offcanvas',
'orbit',
'responsiveMenu',
'responsiveToggle',
'reveal',
'slider',
'sticky',
'tabs',
'toggler',
'tooltip'
]
},
}
});
return app.toTree();
};
Change Log
> 0.0.24
foundation-sites is imported and usage of Foundation global has been deprecated. Custom wrappers that triggers the Foundation jQuery plugin will need to import foundation-sites in order for the Foundation jQuery plugin to be available.
Example:
import Ember from "ember";
import "foundation-sites";
export default Ember.Component.extend({
didInsertElement() {
this.$().foundation();
}
});
Included components
Majority of the Foundation components which require Javascript have been turned into Ember components.
The vast majority of the Foundation Javascript options have been exposed as component parameters.See the Zurb Foundation for Sites documentation for any specifics.
Any exceptions are documented below.
Each Foundation Javascript widget can be directly accessed through the zfUi property. For example,the following would call the open method on the reveal component:
myRevealComponent.get('zfUi').open();
A full sample is available in tests/dummy/app/templates/application.hbs
To run the sample, clone this repo and run:
npm install
ember serve
Accordion Menu
Usage
Accordion
Usage
Callout (With ember-cli-flash Integration)
This addon tends to avoid markup-only related components, this component is a special case.This is a good way to easily provide a flash-message-style component to your Ember app.
This is designed to integrate with the ember-cli-flash addon(which provides a foundation5 styling option)
Usage with ember-cli-flash
If you want to bring your own data and actions:
Or use block params:
Drilldown Menu
Usage
Dropdown Menu
Usage
Dropdown
Usage
Magellan
Usage
Off-canvas
There are several additional options outside of the documented options on the Zurb Foundationsite.
| Option | Description |
|---|---|
| showLeftOffCanvas | Show left off-canvas element |
| showRightOffCanvas | Show right off-canvas element |
Accessing the zf widget directly is a bit different with the off-canvas component. In the caseof a single off canvas element (i.e. left or right ) the zfUi element can be accessed. However,if both the showLeftOffCanvas and showRightOffCanvas flags are set, this is a bit problematic.An array containing both of the elements can be accessed as the zfUiList member.
Usage. This illustrates both a left and right off-canvas widget.
Orbit
The following options are not yet supported:
- animInFromRight
- animOutToRight
- animInFromLeft
- animOutToLeft
- useMUI
Usage
Reveal
The following options are not yet supported:
- animationIn
- animationOut
Usage
Slider
Usage
Tabs
Usage
Tooltip
The template option has been renamed to zf-template as this causes a collision with an existingEmber component member.
Usage
Work to do
- Improve unit and integration tests
- Improve documentation
- Create an adapter so Liquid Fire can be used natively instead of Motion
-
Ember CLI 是一个 Ember.js 命令行工具，提供了由 broccoli 提供的快速的资源管道和项目结构。 Ember CLI 基于 Ember App Kit Project 目前已经废弃。 Assets Compilation Ember CLI asset compilation is based on broccoli. Broccoli has support for: Ha
-
This repository is no longer maintained. As a replacement check out: https://github.com/sir-dunxalot/ember-tooltips Ember CLI Tooltipster An Ember CLI add-on that wraps Tooltipster into an ember compo
-
ember-cli-updater This ember-cli addon helps you update your ember-cli application or addon. The idea of this addon is to automate some parts of the upgrade process so it's simplified. Not every chang
-
Ember-cli-yadda This Ember CLI addon facilitates writing BDD tests in the Gherkin language and executing them against your Ember app. @mschinis (Micheal Schinis) Did a great talk at @emberlondon BDD a
-
Ember-cli-simditor Ember component wrapper for simditor. Changes 0.0.7 Different from previous version, you must wrap content in object. See issue 6 for why. Getting Started Installation In your ember
-
ember-cli-chai Chai assertions for Ember.js. Deprecated This package is deprecated. Please use ember-auto-import to use chai and chai plugins directly. If you'd like to use chai, or were previously us