-
Notifications
You must be signed in to change notification settings - Fork 46
/
css_helpers.html
180 lines (161 loc) · 6.15 KB
/
css_helpers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
---
layout: admin
title: CSS - Helpers
section: css
module: css_helpers
header:
icon: aspect_ratio
title: Helpers
description: Improve your productivity with helper classes and utilities
stylesheets:
- css/pages/css_helpers.css
---
<section id="css_helpers">
<!-- ######### -->
<!-- Alignment -->
<!-- ######### -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Alignment</h4>
<p>We have easy to use classes to help you align your content.</p>
<h5 class="margin-top-35">Vertical Align</h5>
<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>
<div class="valign-demo valign-wrapper">
<h6 class="valign center">This should be vertically aligned</h6>
</div>
<pre>
<code class="language-markup">
<div class="valign-wrapper">
<h5 class="valign">This should be vertically aligned</h5>
</div>
</code>
</pre>
<h5 class="margin-top-40">Text Align</h5>
<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>
<div class="talign-demo">
<h6 class="left-align">This should be left aligned</h6>
</div>
<br>
<div class="talign-demo">
<h6 class="right-align">This should be right aligned</h6>
</div>
<br>
<div class="talign-demo">
<h6 class="center-align">This should be center aligned</h6>
</div>
<pre>
<code class="language-markup">
<div>
<h6 class="left-align">This should be left aligned</h6>
</div>
<div>
<h6 class="right-align">This should be right aligned</h6>
</div>
<div>
<h6 class="center-align">This should be center aligned</h6>
</div>
</code>
</pre>
<h5 class="margin-top-40">Quick Floats</h5>
<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>
<pre>
<code class="language-markup">
<div class="left">...</div>
<div class="right">...</div>
</code>
</pre>
</div>
</div>
<!-- ############## -->
<!-- Hiding Content -->
<!-- ############## -->
<div id="hiding-content-wrapper" class="row margin-top-25">
<div class="col s12">
<h4 class="main-text lighten-1">Hiding Content</h4>
<p>We provide easy to use classes to hide content on specific screen sizes.</p>
<table class="striped">
<thead>
<tr>
<th></th>
<th>Screen Range</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-markup"><strong>.hide</strong></code></td>
<td>Hidden for all Devices</td>
</tr>
<tr>
<td><code class="language-markup"><strong>.hide-on-small-only</strong></code></td>
<td>Hidden for Mobile Only</td>
</tr>
<tr>
<td><code class="language-markup"><strong>.hide-on-med-only</strong></code></td>
<td>Hidden for Tablet Only</td>
</tr>
<tr>
<td><code class="language-markup"><strong>.hide-on-med-and-down</strong></code></td>
<td>Hidden for Tablet and Below</td>
</tr>
<tr>
<td><code class="language-markup"><strong>.hide-on-med-and-up</strong></code></td>
<td>Hidden for Tablet and Above</td>
</tr>
<tr>
<td><code class="language-markup"><strong>.hide-on-large-only</strong></code></td>
<td>Hidden for Desktop Only</td>
</tr>
</tbody>
</table>
<h5 class="margin-top-25">Usage</h5>
<pre>
<code class="language-markup">
<div class="hide-on-small-only"></div>
</code>
</pre>
</div>
</div>
<!-- ########## -->
<!-- Formatting -->
<!-- ########## -->
<div class="row margin-top-25">
<div class="col s12">
<h4 class="main-text lighten-1">Formatting</h4>
<p>These classes help format various content on your site.</p>
<h5 class="margin-top-40">Truncation</h5>
<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>
<div id="truncate-demo-wrapper" class="row no-gutter">
<div class="col s4">
<div class="card-panel">
<h6 class="truncate">This is an extremely long title that will be truncated, so, it has to be a really long long title</h6>
</div>
</div>
</div>
<pre>
<code class="language-markup">
<h6 class="truncate">This is an extremely long title that will be truncated</h6>
</code>
</pre>
<h5 class="margin-top-40">Hover</h5>
<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>
<div id="hoverable-demo-wrapper" class="row no-gutter">
<div class="col s8 m6">
<div class="card hoverable small">
<div class="card-image">
<img src="img/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<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>
</div>
</div>
</div>
</div>
<pre>
<code class="language-markup">
<div class="card-panel hoverable">Hoverable Card Panel</div>
</code>
</pre>
</div>
</div>
</section>