UNPKG

26.6 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Learn how to quickly get started using our CSS framework. We have guides for a variety of skill levels.">
9 <title>Getting Started - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only"><i class="material-icons">menu</i></a></div>
36 <ul id="nav-mobile" class="side-nav fixed">
37 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
38 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
39 <li class="search">
40 <div class="search-wrapper card">
41 <input id="search"><i class="material-icons">search</i>
42 <div class="search-results"></div>
43 </div>
44 </li>
45 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
46 <li class="bold active"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
47 <li class="no-padding">
48 <ul class="collapsible collapsible-accordion">
49 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
50 <div class="collapsible-body">
51 <ul>
52 <li><a href="color.html">Color</a></li>
53 <li><a href="grid.html">Grid</a></li>
54 <li><a href="helpers.html">Helpers</a></li>
55 <li><a href="media-css.html">Media</a></li>
56 <li><a href="sass.html">Sass</a></li>
57 <li><a href="shadow.html">Shadow</a></li>
58 <li><a href="table.html">Table</a></li>
59 <li><a href="css-transitions.html">Transitions</a></li>
60 <li><a href="typography.html">Typography</a></li>
61 </ul>
62 </div>
63 </li>
64 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
65 <div class="collapsible-body">
66 <ul>
67 <li><a href="badges.html">Badges</a></li>
68 <li><a href="buttons.html">Buttons</a></li>
69 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
70 <li><a href="cards.html">Cards</a></li>
71 <li><a href="chips.html">Chips</a></li>
72 <li><a href="collections.html">Collections</a></li>
73 <li><a href="footer.html">Footer</a></li>
74 <li><a href="forms.html">Forms</a></li>
75 <li><a href="icons.html">Icons</a></li>
76 <li><a href="navbar.html">Navbar</a></li>
77 <li><a href="pagination.html">Pagination</a></li>
78 <li><a href="preloader.html">Preloader</a></li>
79 </ul>
80 </div>
81 </li>
82 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
83 <div class="collapsible-body">
84 <ul>
85 <li><a href="carousel.html">Carousel</a></li>
86 <li><a href="collapsible.html">Collapsible</a></li>
87 <li><a href="dialogs.html">Dialogs</a></li>
88 <li><a href="dropdown.html">Dropdown</a></li>
89 <li><a href="media.html">Media</a></li>
90 <li><a href="modals.html">Modals</a></li>
91 <li><a href="parallax.html">Parallax</a></li>
92 <li><a href="pushpin.html">Pushpin</a></li>
93 <li><a href="scrollfire.html">ScrollFire</a></li>
94 <li><a href="scrollspy.html">Scrollspy</a></li>
95 <li><a href="side-nav.html">SideNav</a></li>
96 <li><a href="tabs.html">Tabs</a></li>
97 <li><a href="transitions.html">Transitions</a></li>
98 <li><a href="waves.html">Waves</a></li>
99 </ul>
100 </div>
101 </li>
102 </ul>
103 </li>
104 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
105 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
106 </ul>
107 </header>
108 <main><div class="section" id="index-banner">
109 <div class="container">
110 <div class="row">
111 <div class="col s12 m9">
112 <h1 class="header center-on-small-only">Getting Started</h1>
113 <h4 class ="light red-text text-lighten-4 center-on-small-only">Learn how to easily start using Materialize in your website.</h4>
114 </div>
115 <div class="col s12 m3">
116 <!-- BuySellAds Zone Code -->
117 <div class="buysellads-header center-on-small-only">
118 <!-- CarbonAds Zone Code -->
119 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
120 </div>
121 <!-- End BuySellAds Zone Code -->
122 </div>
123 </div>
124 </div>
125</div>
126
127<div class="container">
128 <!-- Outer row -->
129 <div class="row">
130
131 <div class="section col s12 m9 l10">
132 <div id="download" class="row scrollspy">
133 <h2 class="col s12 header">Download</h2>
134 <p class="caption col s12">Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.</p>
135
136 <div class="col s12 m6">
137 <p class="promo-caption">Materialize</p>
138 <p>This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass.</p>
139 <a id="download-source" class="btn waves-effect waves-light" href="http://materializecss.com/bin/materialize-v0.98.0.zip">Materialize<i class="material-icons right">file_download</i></a>
140 </div>
141 <div class="col s12 m6">
142 <p class="promo-caption">Sass</p>
143 <p>This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.</p>
144 <a id="download-sass" class="btn waves-effect waves-light" href="http://materializecss.com/bin/materialize-src-v0.98.0.zip">Source<i class="material-icons right">file_download</i></a>
145 </div>
146 <div class="col s12">
147 <br>
148 <p class="promo-caption">CDN</p>
149 <p>You can find all the versions of the CDN at <a href="https://cdnjs.com/libraries/materialize">cdnjs</a>.</p>
150 <pre><code class="language-markup">
151 &lt;!-- Compiled and minified CSS -->
152 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
153
154 &lt;!-- Compiled and minified JavaScript -->
155 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js">&lt;/script>
156 </code></pre>
157 </div>
158 <div class="col s12">
159 <br>
160 <p class="promo-caption">NPM</p>
161 <p>You can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.</p>
162 <pre><code class="language-bash">
163 npm install materialize-css
164 </code></pre>
165 </div>
166 <div class="col s12">
167 <br>
168 <p class="promo-caption">Bower</p>
169 <p>You can also get the latest release using bower. This release contains source files as well as the compiled CSS and JavaScript files.</p>
170 <pre><code class="language-bash">
171 bower install materialize
172 </code></pre>
173 </div>
174 </div>
175
176 <div id="download-thanks" class="row">
177 <h2 class="col s12 header">Thanks for Downloading!</h2>
178 <p class="caption col s12">We hope you find Materialize useful in your next project. We would appreciate if you helped us spread the word about Materialize on our Social Media. Also if you want to support the development, you can donate to us.</p>
179 <div class="row">
180 <div class="col l3 s12 center">
181 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
182 <input type="hidden" name="cmd" value="_s-xclick">
183 <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
184 ">
185 <button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
186 </button>
187 </form>
188 <br>
189 </div>
190 <div class="col l3 s12 center" style="overflow: hidden;">
191 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
192 <br>
193 </div>
194 <div class="col l3 s12 center" style="overflow: hidden;">
195 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
196 <br>
197 </div>
198 <div class="col l3 s12 center" style="overflow: hidden;">
199 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
200 <br>
201 </div>
202 </div>
203 </div>
204
205 <div id="setup" class="row scrollspy">
206 <div class="col s12">
207 <h2 class="header">Setup</h2>
208 <h4 >Project Structure</h4>
209 <p>After downloading, extract the files into the directory where your website is located. Your directory will look something like this.</p>
210 <p>You'll notice that there are two sets of the files. The <code class="language-markup">min</code> means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.</p>
211
212 <pre><code class="language-markup directory-markup">
213 MyWebsite/
214 |--css/
215 | |--materialize.css
216 |
217 |--fonts/
218 | |--roboto/
219 |
220 |--js/
221 | |--materialize.js
222 |
223 |--index.html
224 </code></pre>
225 </div>
226 <div class="col s12">
227 <h4>HTML Setup</h4>
228 <p>Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Materialize into your webpage.</p>
229 <p> One last thing to note is that you have to import jQuery before importing materialize.js!</p>
230 <pre><code class="language-markup">
231 &lt;!DOCTYPE html>
232 &lt;html>
233 &lt;head>
234 &lt;!--Import Google Icon Font-->
235 &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
236 &lt;!--Import materialize.css-->
237 &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
238
239 &lt;!--Let browser know website is optimized for mobile-->
240 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/>
241 &lt;/head>
242
243 &lt;body>
244 &lt;!--Import jQuery before materialize.js-->
245 &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">&lt;/script>
246 &lt;script type="text/javascript" src="js/materialize.min.js">&lt;/script>
247 &lt;/body>
248 &lt;/html>
249 </code></pre>
250 </div>
251 </div>
252
253 <div id="templates" class="row scrollspy">
254 <h2 class="col s12 header">Templates</h2>
255 <p class="caption col s12">We have created some starter templates so you can easily start designing your website with minimal setup up time. Browse through our collection and download your best fit. </p>
256
257 <div class="col s12 m6">
258 <p class="promo-caption">Starter Template</p>
259 <a href="templates/starter-template/preview.html"><img class="z-depth-1" style="width: 100%;" src="images/starter-template.gif"></a>
260 <p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features. </p>
261 <a class="btn waves-effect waves-light" href="templates/starter-template/preview.html">Demo<i class="material-icons right">search</i></a>
262 <a class="btn waves-effect waves-light" href="templates/starter-template.zip">Download<i class="material-icons right">file_download</i></a>
263 </div>
264
265 <div class="col s12 m6">
266 <p class="promo-caption">Parallax Template</p>
267 <a href="templates/parallax-template/preview.html"><img class="z-depth-1" style="width: 100%;" src="images/parallax-template.jpg"></a>
268 <p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features. </p>
269 <a class="btn waves-effect waves-light" href="templates/parallax-template/preview.html">Demo<i class="material-icons right">search</i></a>
270 <a class="btn waves-effect waves-light" href="templates/parallax-template.zip">Download<i class="material-icons right">file_download</i></a>
271 </div>
272 </div>
273
274
275 <!-- Third Party Options -->
276 <div id="third-party-options" class="row scrollspy">
277 <div class="col s12">
278 <h2 class="header">Third-party Options</h2>
279 <p class="caption">There are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date.</p>
280 <p class="promo-caption">Ruby Gem</p>
281 <p>See <a href="https://github.com/mkhairi/materialize-sass">here</a> for documentation on this gem.</p>
282 <pre><code class="language-bash">
283 gem 'materialize-sass'
284 </code></pre>
285 <p class="promo-caption">Meteor Package</p>
286 <pre><code class="language-bash">
287 meteor add materialize:materialize
288 </code></pre>
289 <p class="promo-caption">Ember Package</p>
290 <pre><code class="language-bash">
291 # install via npm
292 $ npm install ember-cli-materialize --save-dev
293 # make ember-cli fetch internal dependencies
294 $ ember g ember-cli-materialize
295 </code></pre>
296
297 </div>
298 </div>
299
300 <div id="sass" class="row scrollspy">
301 <div class="col s12">
302 <h2 class="header">Sass Setup</h2>
303 <p class="caption">This section is only relevant if you chose to download the Sass version of Materialize.</p>
304 <h4>Compiling Sass</h4>
305 <p>Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.</p>
306
307 <pre><code class="language-markup directory-markup">
308 MyWebsite/
309 |--css/
310 | |--materialize.css &lt;-- compiled from scss/materialize.scss
311 |
312 |--fonts/
313 | |--roboto/
314 |
315 |--js/
316 | |--materialize.js
317 |
318 |--scss/
319 | |--materialize.scss
320 | |--components/
321 |
322 |--index.html
323 </code></pre>
324 </div>
325 </div>
326
327 </div>
328 <!-- Table of contents -->
329 <div class="col hide-on-small-only m3 l2">
330 <div class="toc-wrapper">
331 <div style="height: 1px;">
332 <ul class="table-of-contents">
333 <li><a href="#download">Download</a></li>
334 <li><a href="#setup">Setup</a></li>
335 <li><a href="#templates">Templates</a></li>
336 <li><a href="#third-party-options">Third-party Options</a></li>
337 <li><a href="#sass">Sass</a></li>
338 </ul>
339 </div>
340 </div>
341 </div>
342
343 </div>
344</div>
345
346 </main> <footer class="page-footer">
347 <div class="container">
348 <div class="row">
349 <div class="col l4 s12">
350 <h5 class="white-text">Help Materialize Grow</h5>
351 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
352 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
353<input type="hidden" name="cmd" value="_s-xclick">
354<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
355">
356<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
357</button>
358</form>
359
360 </div>
361 <div class="col l4 s12">
362 <h5 class="white-text">Join the Discussion</h5>
363 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
364 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
365 </div>
366 <div class="col l4 s12" style="overflow: hidden;">
367 <h5 class="white-text">Connect</h5>
368 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
369 <br>
370 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
371 <br>
372 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
373 </div>
374 </div>
375 </div>
376 <div class="footer-copyright">
377 <div class="container">
378 © 2014-2017 Materialize, All rights reserved.
379 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
380 </div>
381 </div>
382 </footer>
383
384 <!-- Scripts-->
385 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
386 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
387 </script>
388 <script src="js/jquery.timeago.min.js"></script>
389 <script src="js/prism.js"></script>
390 <script src="jade/lunr.min.js"></script>
391 <script src="jade/search.js"></script>
392 <script src="bin/materialize.js"></script>
393 <script src="js/init.js"></script>
394 <!-- Twitter Button -->
395 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
396
397 <!-- Google Plus Button-->
398 <script src="https://apis.google.com/js/platform.js" async defer></script>
399
400 <!-- Google Analytics -->
401 <script>
402 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
403 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
404 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
405 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
406
407 ga('create', 'UA-56218128-1', 'auto');
408 ga('require', 'displayfeatures');
409 ga('send', 'pageview');
410 </script>
411
412 <script>
413 $('#download-source, #download-sass').on('click', function () {
414 $('#download').slideUp(
415 { duration: 500,
416 easing: "easeOutQuart",
417 queue: false,
418 complete: function()
419 { $('#download-thanks').slideDown({ duration: 300,
420 easing: "easeOutQuart"}); }
421 });
422
423 });
424 </script>
425 </body>
426</html>
\No newline at end of file