-# [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
```
@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):
```
**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
+<body>
+ {{> myReveal}}
+</body>
+```
+
+```html
+<template name="myReveal">
+ <p><a data-open="myReveal">Click me for a modal</a></p>
+
+ <div class="reveal" id="myReveal">
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close reveal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+</template>
+```
+
+#### 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/)
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',
projects / thirdparty / foundation / foundation-sites.git / commitdiff
