meteor-zf5
Foundation for Sites 5.5.0 with Scss for Meteor 1.0.*
Demo
Usage
meteor add juliancwirko:zf5
SCSS part
In your main scss file (for example if it is in client/stylesheet folder) copy and paste this: (you can choose components you want - grid.scss is mandatory)
Full length paths on GitHub (Atmosphere cuts it..): https://github.com/juliancwirko/meteor-zf5/blob/master/README.md#scss-part
I will try to figure it out how to do this better (without this long ugly paths).
@charset "UTF-8"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/normalize.scss"; //this is your local Foundation settings file copy it from git repo -> scss/foundation/_settings.scss into your client/stylesheet // @import "settings" @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/grid.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/accordion.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/alert-boxes.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/block-grid.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/breadcrumbs.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/button-groups.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/buttons.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/clearing.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/dropdown.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/dropdown-buttons.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/flex-video.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/forms.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/icon-bar.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/inline-lists.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/joyride.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/keystrokes.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/labels.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/magellan.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/orbit.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/pagination.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/panels.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/pricing-tables.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/progress-bars.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/range-slider.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/reveal.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/side-nav.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/split-buttons.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/sub-nav.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/switches.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/tables.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/tabs.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/thumbs.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/tooltips.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/top-bar.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/type.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/offcanvas.scss"; @import "../../.meteor/local/build/programs/web.browser/packages/juliancwirko_zf5/scss/foundation/components/visibility.scss"; // your main styles goes here:
remember that you can choose components you want
Important note
Quoting guys from Meteoric (this is the same scss case here)
"Due to a current limitation of the Meteor packaging system, the above paths may not exist the first time you run your Meteor app after installing this package. This will cause an error saying the file to import was not found. This may also occur if you run meteor reset
. Restarting your app should fix this problem. See meteor/meteor#2606 and meteor/meteor#2796 for more info."
JavaScript part
There is no simple way to init foundation js once :/ but you have a couple of options, you can:
Run Foundation reflow each time you will be loading templates with Foundation js plugins:
Template.subtemplateOflayout.rendered = function () { $(document).foundation('reflow'); }
You can call foundation reflow on templates which use Foundation js plugins like reveal, top bars etc.
Run Foundation init when subtemplates are rendered but only for specific plugins like:
Template.subtemplateOflayout.rendered = function () { $(document).foundation({ reveal : { animation_speed: 500 }, tooltip : { disable_for_touch: true }, topbar : { custom_back_text: false, is_hover: false, mobile_show_parent_link: true } }); }
You will find more info at: Foundation JavaScript Docs
If you are using Iron Router you can use
Router.onAfterAction(function () { $(document).foundation(); // or single plugin });
More: Iron Router Hooks Docs
The basic logic is to run initialization or init with reflow on element actually presented in the DOM. With Meteor this isn't so simple. It needs some time to use to it.
Change log
- v0.1.3 - Foundation 5.5.0
- v0.1.2 - Foundation 5.4.7
- v0.1.1 - Back to old version of the Scss package (we need to wait for Foundation 5 updates)
- v0.1.0 - Scss package version bump
- v0.0.16 - Foundation 5.4.6
- v0.0.15 - Foundation5 versions bump
- v0.0.14 - Foundation 5.4.5
- v0.0.13 - Foundation 5.4.4
- v0.0.12 - Foundation 5.4.3
- v0.0.10, v0.0.11 - attempts to integrate with Meteor 0.9.0
- v0.0.9 - Foundation 5.4.0
- v0.0.8 - Foundation 5.3.2, 5.3.3
- v0.0.6 - Foundation 5.3.1
- v0.0.5 - Foundation 5.3.0
- v0.0.3 - Foundation 5.2.3
- v0.0.2 - Foundation 5.2.2