meteor-zf5

Foundation for Sites 5.5.1 with Scss for Meteor 1.0.*

Demo

http://zf5.meteor.com

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." update: It seems that this problem dosen't exist with newest version of Meteor, but I am not sure..
From version 1.0.0 paths are changed. You need to adjust your styles imports. Example below.

Usage

meteor add juliancwirko:zf5

Recommended way to use it

You can use special scss.json file (thanks to fourseven:scss package) to configure your main path. Just add scss.json file in your root folder (and restart your app).

{
    "includePaths": [
        ".meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/"
    ]
}

You can also turn on Autoprefixer here etc. Docs: fourseven:scss

Then you will be able to import all (or chosen) Foundation partials in your main .scss file:

@charset "UTF-8";

@import "normalize.scss";

//local Foundation settings file. Copy it from git repo -> scss/foundation/_settings.scss near main .scss file. Then Uncomment the line below.
// @import "settings"

@import "foundation/components/grid.scss";
@import "foundation/components/accordion.scss";
@import "foundation/components/alert-boxes.scss";
@import "foundation/components/block-grid.scss";
@import "foundation/components/breadcrumbs.scss";
@import "foundation/components/button-groups.scss";
@import "foundation/components/buttons.scss";
@import "foundation/components/clearing.scss";
@import "foundation/components/dropdown.scss";
@import "foundation/components/dropdown-buttons.scss";
@import "foundation/components/flex-video.scss";
@import "foundation/components/forms.scss";
@import "foundation/components/icon-bar.scss";
@import "foundation/components/inline-lists.scss";
@import "foundation/components/joyride.scss";
@import "foundation/components/keystrokes.scss";
@import "foundation/components/labels.scss";
@import "foundation/components/magellan.scss";
@import "foundation/components/orbit.scss";
@import "foundation/components/pagination.scss";
@import "foundation/components/panels.scss";
@import "foundation/components/pricing-tables.scss";
@import "foundation/components/progress-bars.scss";
@import "foundation/components/range-slider.scss";
@import "foundation/components/reveal.scss";
@import "foundation/components/side-nav.scss";
@import "foundation/components/split-buttons.scss";
@import "foundation/components/sub-nav.scss";
@import "foundation/components/switches.scss";
@import "foundation/components/tables.scss";
@import "foundation/components/tabs.scss";
@import "foundation/components/thumbs.scss";
@import "foundation/components/tooltips.scss";
@import "foundation/components/top-bar.scss";
@import "foundation/components/type.scss";
@import "foundation/components/offcanvas.scss";
@import "foundation/components/visibility.scss";

// your project styles goes here

Other usage option is without using `scss.json` file.

Then you should include these long paths in your main .scss project file.

In your main scss file (for example if it is in client/stylesheet folder) copy and paste code below: (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

@charset "UTF-8";

@import "../../.meteor/local/build/programs/server/assets/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/server/assets/packages/juliancwirko_zf5/scss/foundation/components/grid.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/accordion.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/alert-boxes.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/block-grid.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/breadcrumbs.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/button-groups.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/buttons.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/clearing.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/dropdown.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/dropdown-buttons.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/flex-video.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/forms.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/icon-bar.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/inline-lists.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/joyride.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/keystrokes.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/labels.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/magellan.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/orbit.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/pagination.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/panels.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/pricing-tables.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/progress-bars.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/range-slider.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/reveal.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/side-nav.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/split-buttons.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/sub-nav.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/switches.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/tables.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/tabs.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/thumbs.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/tooltips.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/top-bar.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/type.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/offcanvas.scss";
@import "../../.meteor/local/build/programs/server/assets/packages/juliancwirko_zf5/scss/foundation/components/visibility.scss";

// your main styles goes here:

remember that you can choose components you want

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

v1.0.1 - fourseven:scss update, scss.json usage readme update
v1.0.0 - Foundation 5.5.1, Scss assets moved to the server (paths changed)
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

spencern/meteor-zf5