UNPKG

16 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="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Documentation - 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="mdi-navigation-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"><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="typography.html">Typography</a></li>
60 </ul>
61 </div>
62 </li>
63 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
64 <div class="collapsible-body">
65 <ul>
66 <li><a href="badges.html">Badges</a></li>
67 <li><a href="buttons.html">Buttons</a></li>
68 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
69 <li><a href="cards.html">Cards</a></li>
70 <li><a href="chips.html">Chips</a></li>
71 <li><a href="collections.html">Collections</a></li>
72 <li><a href="footer.html">Footer</a></li>
73 <li><a href="forms.html">Forms</a></li>
74 <li><a href="icons.html">Icons</a></li>
75 <li><a href="navbar.html">Navbar</a></li>
76 <li><a href="pagination.html">Pagination</a></li>
77 <li><a href="preloader.html">Preloader</a></li>
78 </ul>
79 </div>
80 </li>
81 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
82 <div class="collapsible-body">
83 <ul>
84 <li><a href="collapsible.html">Collapsible</a></li>
85 <li><a href="dialogs.html">Dialogs</a></li>
86 <li><a href="dropdown.html">Dropdown</a></li>
87 <li><a href="media.html">Media</a></li>
88 <li><a href="modals.html">Modals</a></li>
89 <li><a href="parallax.html">Parallax</a></li>
90 <li><a href="pushpin.html">Pushpin</a></li>
91 <li><a href="scrollfire.html">ScrollFire</a></li>
92 <li><a href="scrollspy.html">Scrollspy</a></li>
93 <li><a href="side-nav.html">SideNav</a></li>
94 <li><a href="tabs.html">Tabs</a></li>
95 <li><a href="transitions.html">Transitions</a></li>
96 <li><a href="waves.html">Waves</a></li>
97 </ul>
98 </div>
99 </li>
100 </ul>
101 </li>
102 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
103 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
104 </ul>
105 </header>
106 <main>
107 <div class="section no-pad-bot" id="index-banner">
108 <div class="container">
109 <h1 class="header center-on-small-only">Materialize</h1>
110 <div class='row center'>
111 <h4 class ="header col s12 light center">A modern responsive front-end framework based on Material Design</h4>
112 </div>
113 <div class="row center">
114 <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light">Get Started</a>
115 </div>
116 <div class="row center"><a class="red-text text-lighten-4" href="https://github.com/Dogfalo/materialize">alpha release v0.97.2</a></div>
117
118 <div class="buysellads-header row center">
119 <!-- CarbonAds Zone Code -->
120 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
121 </div>
122 <br>
123
124 </div>
125 <div class="github-commit">
126 <div class="container">
127 <div class="commit">
128 Latest Commit on Github:
129 &nbsp;&nbsp;
130 <a href="" class="sha"></a>
131 &nbsp;&nbsp;
132 <span class="date"></span>
133 <a id="github-button" href="https://github.com/Dogfalo/materialize" class="btn-flat right grey-text text-lighten-5 waves-effect waves-light hide-on-small-only">Github</a>
134 </div>
135 </div>
136 </div>
137 </div>
138
139 <div class="container">
140 <div class="section">
141
142 <div class="row">
143 <div class="col s12 m8 offset-m2">
144 <br>
145 <img id="responsive-img" src="images/responsive.png">
146 </div>
147 </div>
148
149 <div class="row">
150 <h3 class="col s12 light center header">Materialize simplifies life for developers and the users they serve.</h3>
151 </div>
152
153 <!-- Promo Section -->
154 <div class="row">
155 <div class="col s12 m4">
156 <div class="center promo">
157 <i class="material-icons">flash_on</i>
158 <p class="promo-caption">Speeds up development</p>
159 <p class="light center">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
160 </div>
161 </div>
162
163 <div class="col s12 m4">
164 <div class="center promo">
165 <i class="material-icons">group</i>
166 <p class="promo-caption">User Experience Focused</p>
167 <p class="light center">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
168 </div>
169 </div>
170
171 <div class="col s12 m4">
172 <div class="center promo">
173 <i class="material-icons">settings</i>
174 <p class="promo-caption">Easy to work with</p>
175 <p class="light center">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
176 </div>
177 </div>
178 </div>
179
180 </div>
181 <div class="divider"></div>
182 <div class="section">
183 <div class="row center">
184 <h3 class="light header">Materialize Showcase</h3>
185 <p class="col s8 offset-s2 caption">Checkout what people are creating with Materialize. Get inspired by these beautiful sites and you can even submit your own website to be showcased here.</p>
186 <a href="http://materializecss.com/showcase.html" class="btn-large waves-effect waves-light">Explore our Showcase</a>
187 </div>
188 </div>
189 </div>
190
191
192 </main> <footer class="page-footer">
193 <div class="container">
194 <div class="row">
195 <div class="col l4 s12">
196 <h5 class="white-text">Help Materialize Grow</h5>
197 <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>
198 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
199<input type="hidden" name="cmd" value="_s-xclick">
200<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
201">
202<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
203</button>
204</form>
205
206 </div>
207 <div class="col l4 s12">
208 <h5 class="white-text">Join the Discussion</h5>
209 <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>
210 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
211 </div>
212 <div class="col l4 s12" style="overflow: hidden;">
213 <h5 class="white-text">Connect</h5>
214 <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>
215 <br>
216 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
217 <br>
218 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
219 </div>
220 </div>
221 </div>
222 <div class="footer-copyright">
223 <div class="container">
224 © 2014-2015 Materialize, All rights reserved.
225 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
226 </div>
227 </div>
228 </footer>
229 <!-- Scripts-->
230 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
231 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
232 </script>
233 <script src="js/jquery.timeago.min.js"></script>
234 <script src="js/prism.js"></script>
235 <script src="jade/lunr.min.js"></script>
236 <script src="jade/search.js"></script>
237 <script src="bin/materialize.js"></script>
238 <script src="js/init.js"></script>
239 <!-- Twitter Button -->
240 <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>
241
242 <!-- Google Plus Button-->
243 <script src="https://apis.google.com/js/platform.js" async defer></script>
244
245 <!-- Google Analytics -->
246 <script>
247 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
248 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
249 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
250 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
251
252 ga('create', 'UA-56218128-1', 'auto');
253 ga('require', 'displayfeatures');
254 ga('send', 'pageview');
255 </script>
256 </body>
257</html>
\No newline at end of file