From 0fe718afdeb8c3eb817c437603bbf4d0e472a18a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Julian=20=C4=86wirko?= Date: Sat, 21 Nov 2015 16:29:26 +0100 Subject: [PATCH] meteor package fixes and documentation update --- meteor-README.md | 67 +++++++++++++++++++++++++++++++++++++++++++++++- package.js | 11 +++++--- 2 files changed, 74 insertions(+), 4 deletions(-) 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', -- 2.47.2