Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acoustep/ember-cli-foundation-6-sass
https://github.com/acoustep/ember-cli-foundation-6-sass
ember ember-addon emberjs
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/acoustep/ember-cli-foundation-6-sass
- Owner: acoustep
- License: mit
- Archived: true
- Created: 2015-11-12T19:05:22.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-05-19T17:01:56.000Z (over 3 years ago)
- Last Synced: 2024-09-21T12:04:03.748Z (3 months ago)
- Topics: ember, ember-addon, emberjs
- Language: HTML
- Size: 1.99 MB
- Stars: 64
- Watchers: 4
- Forks: 33
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
```bash
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](https://github.com/acoustep/ember-cli-foundation-6-sass/issues/44) introduced by `[email protected]`, 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` mixin
into a `foundation-custom` file, and import that mixin instead of the `foundation-everything` mixin. Then you can adjust
what is and isn't included by editing the `foundation-custom` file. Warning: you will need to manage your dependencies
and styles manually if going this route.
## Javascript
To use Foundation's Javascript features add ```foundationJS``` to your Ember app's options.
```javascript
// 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 your
Ember app's options with an array of the elements to include. Remove the elements that
should not be included. Using this method will require managing the dependencies for each
component and making sure the appropriate `util.` files are included for the components
being included. Because Foundation since v6.2 has written the modules in ES6, they need
to be transpiled to ES5 (Ember does not transpile the vendors.js files).
```javascript
// 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 [email protected]
// '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:
```javascript
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:
```javascript
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:
```bash
npm install
ember serve
```
### Accordion Menu
Usage
```hbs
{{#zf-accordion-menu}}
Item 1
{{/zf-accordion-menu}}
```
### Accordion
Usage
```hbs
{{#zf-accordion}}
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accordion 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aliquid, optio ab!
Accordion 3
I would start in the open state, due to using the `is-active` state class.
{{/zf-accordion}}
```
### 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](https://github.com/poteto/ember-cli-flash) addon
(which provides a foundation5 styling option)
Usage with ember-cli-flash
```hbs
{{#each flashMessages.queue as |flash|}}
{{zf-callout flash=flash}}
{{/each}}
```
If you want to bring your own data and actions:
```hbs
{{zf-callout type="success" content="add content here"}}
```
Or use block params:
```hbs
{{#zf-callout}}
Oops, something happened, but I don't know what.
{{/zf-callout}}
```
### Drilldown Menu
Usage
```hbs
{{#zf-drilldown-menu}}
Item 1
{{/zf-drilldown-menu}}
```
### Dropdown Menu
Usage
```hbs
{{#zf-dropdown-menu class="vertical"}}
Item 1
{{/zf-dropdown-menu}}
```
### Dropdown
Usage
```hbs
Toggle Dropdown
{{#zf-dropdown id="example-dropdown"}}
Example form in a dropdown.
Name
Rank
{{/zf-dropdown}}
```
### Magellan
Usage
```hbs
{{#zf-magellan}}
{{/zf-magellan}}
```
### Off-canvas
There are several additional options outside of the documented options on the Zurb Foundation
site.
| 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 case
of 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.
```hbs
{{#zf-off-canvas showRightOffCanvas=true as |section| }}
{{#if section.isOffCanvasLeft}}
Example left off canvas content
{{else if section.isOffCanvasRight}}
Example right off canvas content
{{else}}
Toggle Off-canvas Left
Toggle Off-canvas Right
{{/if}}
{{/zf-off-canvas}}
```
### Orbit
The following options are not yet supported:
* animInFromRight
* animOutToRight
* animInFromLeft
* animOutToLeft
* useMUI
Usage
```hbs
{{#zf-orbit nav-buttons=true}}
Previous Slide◀
Next Slide▶
First slide details.
Current Slide
Second slide details.
Third slide details.
Fourth slide details.
{{/zf-orbit}}
```
### Reveal
The following options are not yet supported:
* animationIn
* animationOut
Usage
```hbs
{{#zf-reveal id="exampleModal" overlay=showDialogOverlay}}
Awesome. I Have It.
Your couch. It is mine.
I'm a cool paragraph that lives inside of an even cooler modal. Wins!
×
{{/zf-reveal}}
{{input type="checkbox" name="showDialogOverlay" checked=showDialogOverlay}} Show Overlay
```
### Slider
Usage
```hbs
{{#zf-slider}}
{{/zf-slider}}
```
### Tabs
Usage
```hbs
{{#zf-tabs id="example-tabs"}}
{{/zf-tabs}}
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus
ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est
bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie
vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis
nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
```
### Tooltip
The template option has been renamed to zf-template as this causes a collision with an existing
Ember component member.
Usage
```hbs
The {{#zf-tooltip title="Fancy word for a beetle."}}scarabaeus{{/zf-tooltip}} hung quite
clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand
immediately took the scythe, and cleared with it a circular space, three or four yards
in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to
let go the string and come down from the tree.
```
## Work to do
- [ ] Improve unit and integration tests
- [ ] Improve documentation
- [ ] Create an adapter so Liquid Fire can be used natively instead of Motion