meteor-README.md

   1 # [Foundation for Sites](http://foundation.zurb.com) (v6.5.2)
   2
   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.
   4
   5 ## Usage in Meteor
   6
   7 - [Scss guide](meteor-README.md/#scss-guide)
   8 - [JavaScript guide](meteor-README.md/#javascript-guide)
   9
  10
  11 ## Scss Guide
  12
  13 ### 1. Add the package
  14
  15 ```
  16 meteor add zurb:foundation-sites
  17 ```
  18
  19 ### 2. In your main .scss file (in your app):
  20
  21 Import foundation:
  22
  23 ```
  24 @import '{zurb:foundation-sites}/scss/foundation';
  25 ```
  26
  27 Each component has an export mixin which prints out the CSS for that component. If you're cool with having everything, you just need one line of code:
  28
  29 ```
  30 @include foundation-everything;
  31 ```
  32
  33 Or you can comment out the components you don't need:
  34
  35 ```
  36 @import 'foundation';
  37
  38 // Global styles
  39 @include foundation-global-styles;
  40 @include foundation-forms;
  41 @include foundation-typography;
  42
  43 // Grids (choose one)
  44 @include foundation-xy-grid-classes;
  45 // @include foundation-grid;
  46 // @include foundation-flex-grid;
  47
  48 // Generic components
  49 @include foundation-button;
  50 @include foundation-button-group;
  51 @include foundation-close-button;
  52 @include foundation-label;
  53 @include foundation-progress-bar;
  54 @include foundation-slider;
  55 @include foundation-switch;
  56 @include foundation-table;
  57 // Basic components
  58 @include foundation-badge;
  59 @include foundation-breadcrumbs;
  60 @include foundation-callout;
  61 @include foundation-card;
  62 @include foundation-dropdown;
  63 @include foundation-pagination;
  64 @include foundation-tooltip;
  65
  66 // Containers
  67 @include foundation-accordion;
  68 @include foundation-media-object;
  69 @include foundation-orbit;
  70 @include foundation-responsive-embed;
  71 @include foundation-tabs;
  72 @include foundation-thumbnail;
  73 // Menu-based containers
  74 @include foundation-menu;
  75 @include foundation-menu-icon;
  76 @include foundation-accordion-menu;
  77 @include foundation-drilldown-menu;
  78 @include foundation-dropdown-menu;
  79
  80 // Layout components
  81 @include foundation-off-canvas;
  82 @include foundation-reveal;
  83 @include foundation-sticky;
  84 @include foundation-title-bar;
  85 @include foundation-top-bar;
  86
  87 // Helpers
  88 @include foundation-float-classes;
  89 // @include foundation-flex-classes;
  90 @include foundation-visibility-classes;
  91 // @include foundation-prototype-classes;
  92 ```
  93
  94 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.
  95
  96 ### 3. Overwrite Foundation settings
  97
  98 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):
  99
 100 ```
 101 @import 'settings'; // example when the _settings.scss file is in the same folder as your main .scss file
 102 @import '{zurb:foundation-sites}/scss/foundation';
 103
 104 @include foundation-everything; // or individual ones
 105
 106 ```
 107
 108 **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'`
 109
 110 ## JavaScript Guide
 111
 112 You can use `$(document).foundation()` when you want to initialize some plugins in one Meteor Template. You could do something like:
 113
 114 ```
 115 Template.main.onRendered(function () {
 116   $(document).foundation();
 117 });
 118 ```
 119
 120 **But in Meteor it is better to have more control over it. So, you could use Foundation plugins API.**
 121
 122 Let's take a look at the example with the Reveal plugin.
 123
 124
 125 #### HTML part
 126
 127 ```html
 128 <body>
 129   {{> myReveal}}
 130 </body>
 131 ```
 132
 133 ```html
 134 <template name="myReveal">
 135   <p><a data-open="myReveal">Click me for a modal</a></p>
 136
 137   <div class="reveal" id="myReveal">
 138     <h1>Awesome. I Have It.</h1>
 139     <p class="lead">Your couch. It is mine.</p>
 140     <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
 141     <button class="close-button" data-close aria-label="Close reveal" type="button">
 142       <span aria-hidden="true">&times;</span>
 143     </button>
 144   </div>
 145 </template>
 146 ```
 147
 148 #### JavaScript part
 149
 150 ```javascript
 151 Template.myReveal.onRendered(function () {
 152   this.myRevealInstance = new Foundation.Reveal($('#myReveal'));
 153 });
 154
 155 Template.myReveal.onDestroyed(function () {
 156   let reveal = this.myRevealInstance;
 157   if (reveal) {
 158     reveal.destroy();
 159   }
 160 });
 161 ```
 162
 163 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.
 164
 165 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/)
 166
 167 #### Known problems
 168
 169 1. **Conflicts with Meteor events**.
 170 Solution: Try to always wrap Foundation's DOM nodes into another ones in your Meteor templates. This applies only to nodes on which are initialized Foundation's JS plugins and which are the first nodes in the Meteor templates with attached custom Meteor events. For more details read the last comments here: [#7248](https://github.com/zurb/foundation-sites/issues/7248)