UNPKG

19.7 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>Helpers - 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 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Helpers</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li class="active"><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118 <!-- Valign Section-->
119 <div id="valign" class="section scrollspy">
120 <h2 class="header">Alignment</h2>
121 <p class="caption">We have easy to use classes to help you align your content.</p>
122
123 <h5 class="light">Vertical Align</h5>
124 <p>You can easily vertically center things by adding the class <code class="language-markup">valign-wrapper</code> to the container holding the items you want to vertically align.</p>
125 <div class="valign-demo valign-wrapper">
126 <h5 class="valign center" style="width: 100%;">This should be vertically aligned</h5>
127 </div>
128 <pre><code class="language-markup">
129&lt;div class="valign-wrapper">
130 &lt;h5 class="valign">This should be vertically aligned&lt;/h5>
131&lt;/div>
132 </code></pre><br>
133
134 <h5 class="light">Text Align</h5>
135 <p>These classes are for horizontally aligning content. We have <code class="language-markup">.left-align</code>, <code class="language-markup">.right-align</code> and <code class="language-markup">.center-align</code></p>
136 <div class="talign-demo">
137 <br>
138 <h5 class="left-align">This should be left aligned</h5>
139 </div>
140 <br>
141 <div class="talign-demo">
142 <br>
143 <h5 class="right-align">This should be right aligned</h5>
144 </div>
145 <br>
146 <div class="talign-demo">
147 <br>
148 <h5 class="center-align">This should be center aligned</h5>
149 </div>
150 <pre><code class="language-markup">
151 &lt;div>
152 &lt;h5 class="left-align">This should be left aligned&lt;/h5>
153 &lt;/div>
154 &lt;div>
155 &lt;h5 class="right-align">This should be right aligned&lt;/h5>
156 &lt;/div>
157 &lt;div>
158 &lt;h5 class="center-align">This should be center aligned&lt;/h5>
159 &lt;/div>
160 </code></pre><br>
161
162 <h5 class="light">Quick Floats</h5>
163 <p>Quickly float things by adding the class <code class="language-markup">left</code> or <code class="language-markup">right</code> to the element. <code class="language-markup">!important</code> is used to avoid specificity issues.</p>
164 <pre><code class="language-markup">
165&lt;div class="left">...&lt;/div>
166&lt;div class="right">...&lt;/div>
167 </code></pre><br>
168
169 </div><!-- End Valign Section -->
170
171 <!-- Hiding Section-->
172 <div id="hiding" class="section scrollspy">
173 <h2 class="header">Hiding Content</h2>
174 <p>We provide easy to use classes to hide content on specific screen sizes. </p>
175 <table class="striped">
176 <thead>
177 <tr>
178 <th></th>
179 <th>Screen Range</th>
180 </tr>
181 </thead>
182 <tbody>
183 <tr>
184 <td><code class="language-markup"><strong>.hide</strong></code></td>
185 <td>Hidden for all Devices</td>
186 </tr>
187 <tr>
188 <td><code class="language-markup"><strong>.hide-on-small-only</strong></code></td>
189 <td>Hidden for Mobile Only</td>
190 </tr>
191 <tr>
192 <td><code class="language-markup"><strong>.hide-on-med-only</strong></code></td>
193 <td>Hidden for Tablet Only</td>
194 </tr>
195 <tr>
196 <td><code class="language-markup"><strong>.hide-on-med-and-down</strong></code></td>
197 <td>Hidden for Tablet and Below</td>
198 </tr>
199 <tr>
200 <td><code class="language-markup"><strong>.hide-on-med-and-up</strong></code></td>
201 <td>Hidden for Tablet and Above</td>
202 </tr>
203 <tr>
204 <td><code class="language-markup"><strong>.hide-on-large-only</strong></code></td>
205 <td>Hidden for Desktop Only</td>
206 </tr>
207 </tbody>
208 </table>
209 <br>
210 <h5 class="light">Usage</h5>
211 <pre><code class="language-markup">
212 &lt;div class="hide-on-small-only">&lt;/div>
213 </code></pre><br>
214
215 </div><!-- End Hiding Section -->
216
217
218
219 <!-- Formatting Section-->
220 <div id="formatting" class="section scrollspy">
221 <h2 class="header">Formatting</h2>
222 <p>These classes help format various content on your site.</p>
223
224 <h5 class="light">Truncation</h5>
225 <p>To truncate long lines of text in an ellipsis, add the class <code class="language-markup">truncate</code> to the tag which contains the text. See an example below of a header being truncated inside a card.</p>
226
227 <div class="row">
228 <div class="col s6 offset-s3 m6 offset-m3">
229 <div class="card-panel">
230 <h4 class="truncate">This is an extremely long title that will be truncated</h4>
231 </div>
232 </div>
233 </div>
234
235 <pre><code class="language-markup">
236 &lt;h4 class="truncate">This is an extremely long title that will be truncated&lt;/h4>
237 </code></pre><br>
238
239 <h5 class="light">Hover</h5>
240 <p>The <code class="language-markup">hoverable</code> is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.</p>
241 <div class="card hoverable small">
242 <div class="card-image">
243 <img src="images/sample-1.jpg">
244 <span class="card-title">Card Title</span>
245 </div>
246 <div class="card-content">
247 <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
248 </div>
249 <div class="card-action">
250 <a href="#">This is a link</a>
251 </div>
252 </div>
253
254 <pre><code class="language-markup">
255 &lt;div class="card-panel hoverable"> Hoverable Card Panel&lt;/div>
256 </code></pre>
257
258 </div><!-- End Formatting Section -->
259
260 <!-- Browser Default Section-->
261 <div id="browser-default" class="section scrollspy">
262 <h2 class="header">Browser Defaults</h2>
263 <p>Because we override many of the default browser styles and elements, we provide the <code class="language-markup">.browser-default</code> class to revert these elements to their original state.</p>
264
265 <table class="striped">
266 <thead>
267 <tr>
268 <th>Name of Element</th>
269 <th>Reverted Style</th>
270 </tr>
271 </thead>
272 <tbody>
273 <tr>
274 <td>UL</td>
275 <td>Bullet points</td>
276 </tr>
277 <tr>
278 <td>SELECT</td>
279 <td>Browser default select element</td>
280 </tr>
281 </tbody>
282 </table>
283 </div><!-- End Browser Default Section -->
284
285
286 </div>
287
288 <div class="col hide-on-small-only m3 l2">
289 <div class="toc-wrapper">
290 <div class="buysellads hide-on-small-only">
291 <!-- CarbonAds Zone Code -->
292 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
293 </div>
294 <div style="height: 1px;">
295 <ul class="section table-of-contents">
296 <li><a href="#valign">Alignment</a></li>
297 <li><a href="#hiding">Hiding Content</a></li>
298 <li><a href="#formatting">Formatting</a></li>
299 <li><a href="#browser-default">Browser Defaults</a></li>
300 </ul>
301 </div>
302 </div>
303 </div>
304
305 </div>
306</div>
307
308 </main> <footer class="page-footer">
309 <div class="container">
310 <div class="row">
311 <div class="col l4 s12">
312 <h5 class="white-text">Help Materialize Grow</h5>
313 <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>
314 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
315<input type="hidden" name="cmd" value="_s-xclick">
316<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
317">
318<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
319</button>
320</form>
321
322 </div>
323 <div class="col l4 s12">
324 <h5 class="white-text">Join the Discussion</h5>
325 <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>
326 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
327 </div>
328 <div class="col l4 s12" style="overflow: hidden;">
329 <h5 class="white-text">Connect</h5>
330 <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>
331 <br>
332 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
333 <br>
334 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
335 </div>
336 </div>
337 </div>
338 <div class="footer-copyright">
339 <div class="container">
340 © 2014-2017 Materialize, All rights reserved.
341 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
342 </div>
343 </div>
344 </footer>
345
346 <!-- Scripts-->
347 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
348 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
349 </script>
350 <script src="js/jquery.timeago.min.js"></script>
351 <script src="js/prism.js"></script>
352 <script src="jade/lunr.min.js"></script>
353 <script src="jade/search.js"></script>
354 <script src="bin/materialize.js"></script>
355 <script src="js/init.js"></script>
356 <!-- Twitter Button -->
357 <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>
358
359 <!-- Google Plus Button-->
360 <script src="https://apis.google.com/js/platform.js" async defer></script>
361
362 <!-- Google Analytics -->
363 <script>
364 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
365 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
366 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
367 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
368
369 ga('create', 'UA-56218128-1', 'auto');
370 ga('require', 'displayfeatures');
371 ga('send', 'pageview');
372 </script>
373
374 </body>
375</html>
\No newline at end of file