]>
Commit | Line | Data |
---|---|---|
413ee100 GK |
1 | --- |
2 | title: Installation | |
3 | description: There are many ways to install Foundation, but if you're just getting started, we have a few suggestions. | |
32b6dbf2 | 4 | video: '6KwsGcEHVTE' |
413ee100 GK |
5 | --- |
6 | ||
9e0769e7 | 7 | ## Install with Package Managers |
9bec15fb | 8 | |
9e0769e7 NC |
9 | Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors. |
10 | ||
91b9f43a CM |
11 | <div class="grid-x grid-margin-x"> |
12 | <div class="cell small-2 text-right"> | |
9e0769e7 NC |
13 | <a href="https://www.npmjs.com/package/foundation-sites"> |
14 | <img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-npm.svg" alt="NPM"> | |
15 | </a> | |
16 | </div> | |
91b9f43a | 17 | <div class="cell small-10"> |
9e0769e7 NC |
18 | <div class="docs-code"> |
19 | <code class="bash"> | |
20 | npm install foundation-sites | |
21 | </code> | |
22 | </div> | |
23 | </div> | |
24 | ||
91b9f43a | 25 | <div class="cell small-2 text-right"> |
9e0769e7 NC |
26 | <a href="https://yarnpkg.com/en/package/foundation-sites"> |
27 | <img class="docs-install-vendor-icon" src="{{root}}assets/img/icons/logo-yarn.svg" alt="Yarn"> | |
28 | </a> | |
29 | </div> | |
91b9f43a | 30 | <div class="cell small-10"> |
9e0769e7 NC |
31 | <div class="docs-code"> |
32 | <code class="bash"> | |
3c2e9036 | 33 | yarn add foundation-sites |
9e0769e7 NC |
34 | </code> |
35 | </div> | |
36 | </div> | |
37 | ||
9e0769e7 NC |
38 | </div> |
39 | ||
40 | Here's what comes in the package. | |
9bec15fb | 41 | |
9e0769e7 NC |
42 | ``` |
43 | ├─ scss Source Sass files. Use this folder as a load path in Sass. | |
44 | ├─ js Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first. | |
45 | └─ dist Compiled files: | |
46 | ├─ css * Compiled CSS files. Includes minified and unminified files. | |
47 | ├─ js * Concatenated JavaScript files. Includes minified and unminified files. | |
48 | └─ plugins * Standalone JavaScript plugins. | |
413ee100 GK |
49 | ``` |
50 | ||
9e0769e7 NC |
51 | --- |
52 | ||
53 | ## Install with Foundation CLI | |
54 | ||
55 | Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. | |
56 | ||
57 | Install Foundation CLI: | |
5a8e7a3f JV |
58 | |
59 | ```bash | |
9e0769e7 NC |
60 | npm install --global foundation-cli |
61 | # or sudo npm install --global foundation-cli | |
5a8e7a3f JV |
62 | ``` |
63 | ||
9e0769e7 NC |
64 | <div class="callout info"> |
65 | Depending on how your machine is configured, the command may fail with an `EACCESS` error. To get around this, run the commands with `sudo` at the beginning. | |
420a7d2d GK |
66 | </div> |
67 | ||
9e0769e7 | 68 | Then use to create a new Foundation project: |
413ee100 GK |
69 | |
70 | ```bash | |
71 | foundation new | |
72 | ``` | |
73 | ||
9e0769e7 NC |
74 | After you selected "Foundation for Sites", Foundation CLI will ask you which template you want to use. You can choose between: |
75 | ||
91b9f43a CM |
76 | <div class="grid-x grid-margin-x"> |
77 | <div class="cell small-6"> | |
9e0769e7 NC |
78 | <h3>Basic template</h3> |
79 | <p> | |
80 | <b>Recommended for beginners</b><br> | |
81 | A basic template to begin to use Foundation. It includes: | |
82 | <ul> | |
83 | <li> | |
84 | Foundation for Sites pre-configured. | |
85 | </li> | |
86 | <li> | |
87 | Sass compilation<br> | |
88 | A tool to convert your SASS/SCSS files to CSS. | |
89 | </li> | |
90 | <li> | |
91 | Starter HTML file<br> | |
92 | A basic file to help you to use basic Foundation component (including the new XY grid !) | |
93 | </li> | |
94 | </ul> | |
95 | </p> | |
96 | </div> | |
97 | ||
91b9f43a | 98 | <div class="cell small-6"> |
9e0769e7 NC |
99 | <h3>ZURB template</h3> |
100 | <p> | |
101 | <b>Recommended for experienced (or curious) users</b><br> | |
102 | A more advanced project including Foundation and a build process with: | |
103 | <ul> | |
104 | <li>Handlebars HTML templates with Panini</li> | |
105 | <li>Sass compilation and prefixing</li> | |
106 | <li>JavaScript module bundling with webpack</li> | |
107 | <li>Built-in BrowserSync</li> | |
108 | <li>Production build with CSS, Javascript and Image compression</li> | |
109 | </ul> | |
110 | </p> | |
111 | </div> | |
112 | </div> | |
413ee100 | 113 | |
9e0769e7 | 114 | <p class="text-center"> |
2672a045 | 115 | <a href="starter-projects.html" class="button">See advanced Template installations</a> |
9e0769e7 | 116 | </p> |
d2560390 | 117 | |
9e0769e7 NC |
118 | <div class="callout info"> |
119 | <p><strong>Foundation 5 users</strong>: if you already have the Foundation 5 CLI on your machine, you will only be able to access one of the commands, depending on how your command line environment is configured.</p> | |
d2560390 | 120 | |
b86328e8 | 121 | <p>To remove the Foundation 5 CLI, run <code>gem uninstall foundation</code>. After testing the Foundation 6 CLI, if you want to remove it to go back to the old CLI, run <code>npm uninstall foundation-cli --global</code>.</p> |
9e0769e7 | 122 | </div> |
d2560390 | 123 | |
e2216b9c S |
124 | <div class="callout info"> |
125 | <p><strong>Windows users</strong>: make sure you've python v2.7 available in your node environment since it's required by the node-gyp tool. There are two way to achieve this</p> | |
126 | ||
127 | <ol> | |
128 | <li>Install the <a href="https://github.com/felixrieseberg/windows-build-tools">windows-build-tools</a> (recommended) and make python afterwards accessible via <code>npm config set python "%USERPROFILE%\.windows-build-tools\python27\python.exe"</code></li> | |
129 | <li>Install <a href="https://www.python.org/downloads/">python</a> (not recommended) and add it to your system environment variables</li> | |
130 | </ol> | |
a719556c | 131 | |
551f3a11 | 132 | <p>The first way is recommended if you've not installed python v2.7 yet as it doesn't affect your machine outside the node environment. In case you've already installed python v2.7 you may of course skip both ways and start using foundationc-cli immediately.</p> |
e2216b9c S |
133 | </div> |
134 | ||
9e0769e7 | 135 | --- |
d2560390 | 136 | |
9e0769e7 NC |
137 | ## Download |
138 | ||
91b9f43a CM |
139 | <div class="grid-x grid-margin-x"> |
140 | <div class="cell small-6"> | |
9e0769e7 NC |
141 | <div class="responsive-embed widescreen mb1"> |
142 | <iframe width="560" height="315" src="https://www.youtube.com/embed/lFrpnk0Oo_8" frameborder="0" allowfullscreen></iframe> | |
143 | <a id="docs-mobile-video-link" class="docs-mobile-video" target="_blank" href="https://youtu.be/lFrpnk0Oo_8"></a> | |
144 | </div> | |
145 | </div> | |
146 | ||
91b9f43a | 147 | <div class="cell small-6"> |
9e0769e7 NC |
148 | <p> |
149 | If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting `index.html` file for you to hack on. Just unzip and get coding! | |
150 | </p> | |
151 | <p class="text-center"> | |
a719556c | 152 | <a href="https://static.foundationcss.com/sites-css-latest" class="button">Download Foundation</a> |
9e0769e7 NC |
153 | </p> |
154 | </div> | |
155 | </div> | |
d2560390 | 156 | |
9e0769e7 | 157 | --- |
d2560390 | 158 | |
9e0769e7 | 159 | ## CDN Links |
d2560390 | 160 | |
9565a5e2 | 161 | The folks at [jsDelivr](https://www.jsdelivr.com) host the compressed Foundation CSS and JavaScript for us. Just drop one of these `<script>` tags into your HTML and you're set: |
d2560390 | 162 | |
9e0769e7 NC |
163 | ```html |
164 | <!-- Compressed CSS --> | |
a46c9998 | 165 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation.min.css" crossorigin="anonymous"> |
d2560390 | 166 | |
9e0769e7 | 167 | <!-- Compressed JavaScript --> |
a46c9998 | 168 | <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/js/foundation.min.js" crossorigin="anonymous"></script> |
d2560390 JH |
169 | ``` |
170 | ||
fad9c252 | 171 | From Foundation 6.4, flex is enabled by default and **only the new XY Grid is available**. However, others CSS versions are available for backward compatibility and the most common usage cases. For others uses and advanced customization, we recommand to build Foundation with custom settings (see others installation methods). |
d2560390 | 172 | |
9e0769e7 | 173 | ```html |
9565a5e2 | 174 | <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> |
a46c9998 | 175 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation-float.min.css" crossorigin="anonymous"> |
d2560390 | 176 | |
9565a5e2 | 177 | <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> |
a46c9998 | 178 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> |
d2560390 | 179 | |
9565a5e2 | 180 | <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction --> |
a46c9998 | 181 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> |
d2560390 JH |
182 | ``` |
183 | ||
9e0769e7 | 184 | <div class="text-center"> |
9565a5e2 | 185 | <a href="https://www.jsdelivr.com/package/npm/foundation-sites?path=dist" class="button" target="_blank">See all CDN files and versions</a> |
b66202b6 R |
186 | </div> |
187 | ||
413ee100 GK |
188 | --- |
189 | ||
2151c880 | 190 | ## HTML Starter Template |
847e7f15 | 191 | Start with this HTML template and adapt it to your needs. Be sure to include the `.no-js` class on the `html` tag of your template. Adding this class prevents [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) for a number of foundation components. |
2151c880 AB |
192 | |
193 | ```html | |
194 | <!doctype html> | |
195 | <html class="no-js" lang="en"> | |
196 | <head> | |
197 | <meta charset="utf-8" /> | |
198 | <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
199 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
200 | <title>Foundation Starter Template</title> | |
201 | <link rel="stylesheet" href="css/foundation.css" /> | |
202 | </head> | |
203 | <body> | |
204 | <h1>Hello, world!</h1> | |
d20d9c8d | 205 | |
640028ef | 206 | <script src="js/vendor/jquery.js"></script> |
207 | <script src="js/vendor/what-input.js"></script> | |
208 | <script src="js/vendor/foundation.min.js"></script> | |
2151c880 AB |
209 | <script> |
210 | $(document).foundation(); | |
211 | </script> | |
212 | ||
213 | </body> | |
214 | </html> | |
215 | ||
216 | ``` | |
217 | ||
218 | --- | |
219 | ||
413ee100 GK |
220 | ## Other Integrations |
221 | ||
04fb804c | 222 | The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our [resources page](https://get.foundation/sites/resources) to find even more ways to use Foundation. |