From: Julian Ćwirko Date: Sat, 21 Nov 2015 15:29:26 +0000 (+0100) Subject: meteor package fixes and documentation update X-Git-Tag: v6.0.4~2^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F7113%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git meteor package fixes and documentation update --- diff --git a/meteor-README.md b/meteor-README.md index 19cd5d770..0c3c6ac55 100644 --- a/meteor-README.md +++ b/meteor-README.md @@ -1,9 +1,15 @@ -# [Foundation for Sites](http://foundation.zurb.com) (v6.0) +# [Foundation for Sites](http://foundation.zurb.com) (v6.0.3) Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototype to production, building sites or apps that work on any kind of device with Foundation. Includes layout constructs, like a fully customizable, responsive grid, commonly used JavaScript plugins, and full A11Y support. ## Usage in Meteor +- [Scss guide](#scss-guide) +- [JavaScript guide](#javascript-guide) + + +## Scss Guide + ### 1. Add the package ``` @@ -64,6 +70,8 @@ Or you can comment out the components you don't need: @include foundation-top-bar; ``` +Note: For now there is a Motion-UI library added in the package (css, js files). It is needed for some Foundation plugins. Maybe in the future it will be separated package. + ### 3. Overwrite Foundation settings If you want you can copy `_settings.scss` file into your project. You can change settings and import it in your main .scss file (in your app): @@ -77,3 +85,60 @@ If you want you can copy `_settings.scss` file into your project. You can change ``` **Important:** In the _settings.scss (the copied one in your app) you need to replace `@import 'util/util'` with `@import '{zurb:foundation-sites}/scss/util/util'` + +## JavaScript Guide + +You can use `$(document).foundation()` when you want to initialize some plugins in one Meteor Template. You could do something like: + +``` +Template.main.onRendered(function () { + $(document).foundation(); +}); +``` + +**But in Meteor it is better to have more control over it. So, you could use Foundation plugins API.** + +Let's take a look at the example with the Reveal plugin. + + +#### HTML part + +```html + + {{> myReveal}} + +``` + +```html + +``` + +#### JavaScript part + +```javascript +Template.myReveal.onRendered(function () { + this.myRevealInstance = new Foundation.Reveal($('#myReveal')); +}); + +Template.myReveal.onDestroyed(function () { + let reveal = this.myRevealInstance; + if (reveal) { + reveal.destroy(); + } +}); +``` + +As you can see it is better to create small templates for plugins and initiate the plugins separately in the `onRendered` lifecycle hook. You should also remember to destroy the plugin using `onDestroyed`lifecycle hook on its template. + +You will find more info about particular plugins on its docs page here: [http://foundation.zurb.com/sites/docs/](http://foundation.zurb.com/sites/docs/) diff --git a/package.js b/package.js index cf905d5a7..9d05f0cb6 100644 --- a/package.js +++ b/package.js @@ -6,17 +6,22 @@ Package.describe({ documentation: 'meteor-README.md' }); -Npm.depends({'what-input': '1.1.2'}); +Npm.depends({ + 'motion-ui': '1.1.0' +}); Package.onUse(function(api) { api.versionsFrom('1.2.1'); api.imply('fourseven:scss@3.4.1'); - api.use(['ecmascript', 'jquery@2.1.0', 'fourseven:scss@3.4.1'], 'client'); + api.use(['ecmascript', 'jquery', 'fourseven:scss@3.4.1'], 'client'); + api.addFiles('.npm/package/node_modules/motion-ui/dist/motion-ui.css', 'client'); + api.addFiles('.npm/package/node_modules/motion-ui/dist/motion-ui.js', 'client'); + api.addFiles('dist/foundation.js', 'client'); api.addFiles([ 'scss/foundation.scss', 'scss/_global.scss', - 'scss/_settings.scss', + 'scss/settings/_settings.scss', 'scss/components/_accordion-menu.scss', 'scss/components/_accordion.scss',