1 # [Foundation for Sites](https://get.foundation) (v6.6.1)
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.
7 - [Scss guide](meteor-README.md/#scss-guide)
8 - [JavaScript guide](meteor-README.md/#javascript-guide)
13 ### 1. Add the package
16 meteor add zurb:foundation-sites
19 ### 2. In your main .scss file (in your app):
24 @import '{zurb:foundation-sites}/scss/foundation';
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:
30 @include foundation-everything;
33 Or you can comment out the components you don't need:
39 @include foundation-global-styles;
40 @include foundation-forms;
41 @include foundation-typography;
44 @include foundation-xy-grid-classes;
45 // @include foundation-grid;
46 // @include foundation-flex-grid;
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;
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;
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;
81 @include foundation-off-canvas;
82 @include foundation-reveal;
83 @include foundation-sticky;
84 @include foundation-title-bar;
85 @include foundation-top-bar;
88 @include foundation-float-classes;
89 // @include foundation-flex-classes;
90 @include foundation-visibility-classes;
91 // @include foundation-prototype-classes;
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.
96 ### 3. Overwrite Foundation settings
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):
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';
104 @include foundation-everything; // or individual ones
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'`
112 You can use `$(document).foundation()` when you want to initialize some plugins in one Meteor Template. You could do something like:
115 Template.main.onRendered(function () {
116 $(document).foundation();
120 **But in Meteor it is better to have more control over it. So, you could use Foundation plugins API.**
122 Let's take a look at the example with the Reveal plugin.
134 <template name="myReveal">
135 <p><a data-open="myReveal">Click me for a modal</a></p>
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">×</span>
151 Template.myReveal.onRendered(function () {
152 this.myRevealInstance = new Foundation.Reveal($('#myReveal'));
155 Template.myReveal.onDestroyed(function () {
156 let reveal = this.myRevealInstance;
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.
165 You will find more info about particular plugins on its docs page here: [https://get.foundation/sites/docs/](https://get.foundation/sites/docs/)
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/foundation/foundation-sites/issues/7248)