-
Notifications
You must be signed in to change notification settings - Fork 4
/
grid.html
220 lines (211 loc) · 11.5 KB
/
grid.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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
---
layout: default
title: Grid
subnav:
- Grid
- Max-Width
- Nesting
- Gutters
- Centering
- Offsets
- Responsive
---
<section id="grid">
<h2 id="Grid" class="m-b-1-xs">The Grid</h2>
<p class="m-b-1-xs">We provide a mobile-first, fluid grid to help layout pages with ease. To start a new grid, create a div with the class of <code>.col-container</code>. Then add columns inside it using <code>.col .col-n-xs</code>, where n = 5-100 in increments of 5, with the addition of 33 to let us do columns in thirds.</p>
<p class="m-b-3-xs"><strong>Important:</strong> Column classes should generally be used on container elements. It's bad practice to apply grid-based widths directly to elements such as form fields, headers or images. Also, avoid applying styles directly to a column element. Instead, nest your content within the column and apply styling there.</p>
<div class="col-container">
<div class="col col-30-xs col-50-lg border-mid-xs">.col .col-30-xs</div>
<div class="col col-20-xs col-30-lg border-mid-xs">.col .col-20-xs</div>
<div class="col col-50-xs col-20-xl border-mid-xs">.col .col-50-xs</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container">
<div class="col col-30-xs border-mid-xs">.col .col-30-xs</div>
<div class="col col-20-xs border-mid-xs">.col .col-20-xs</div>
<div class="col col-50-xs border-mid-xs">.col .col-50-xs</div>
</div></code></pre>
</div>
<h2 id="Max-Width" class="m-b-1-xs">Grid Max-Width</h2>
<p class="m-b-1-xs">By default, our grid will span 100% of the browser viewport. If you want to control that, add <code>.col-max</code> next to your <code>.col-container</code> class. This will limit the width of the grid to <code>1260px</code>.</p>
<div class="col-container col-max">
<div class="border-dark-xs p-2-xs">1260px max-width</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container col-max">
<div class="border-dark-xs p-2-xs">1260px max-width</div>
</div></code></pre>
</div>
<h2 id="Nesting" class="m-b-1-xs">Nesting Columns</h2>
<p class="m-b-3-xs">Each column in our grid can hold another set of columns inside of it. To make things work properly nest another <code>.col-container</code> inside the <code>.col</code>.</p>
<div class="col-container">
<div class="col col-50-xs border-xs">
<span class="block-xs m-b-1-xs">.col .col-50-xs</span>
<div class="col-container">
<div class="col col-30-xs border-dark-xs">.col .col-30-xs</div>
<div class="col col-30-xs border-dark-xs">.col .col-30-xs</div>
<div class="col col-40-xs border-dark-xs">.col .col-40-xs</div>
</div>
</div>
<div class="col col-50-xs border-xs">
<span class="block-xs m-b-1-xs">.col .col-50-xs</span>
<div class="col-container">
<div class="col col-20-xs border-dark-xs">.col .col-20-xs</div>
<div class="col col-60-xs border-dark-xs">.col .col-60-xs</div>
<div class="col col-20-xs border-dark-xs">.col .col-20-xs</div>
</div>
</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container">
<div class="col col-50-xs border-xs">
<span class="block-xs m-b-1-xs">.col .col-50-xs</span>
<div class="col-container">
<div class="col col-30-xs border-dark-xs">.col .col-30-xs</div>
<div class="col col-30-xs border-dark-xs">.col .col-30-xs</div>
<div class="col col-40-xs border-dark-xs">.col .col-40-xs</div>
</div>
</div>
<div class="col col-50-xs border-xs">
<span class="block-xs m-b-1-xs">.col .col-50-xs</span>
<div class="col-container">
<div class="col col-20-xs border-dark-xs">.col .col-20-xs</div>
<div class="col col-60-xs border-dark-xs">.col .col-60-xs</div>
<div class="col col-20-xs border-dark-xs">.col .col-20-xs</div>
</div>
</div>
</div></code></pre>
</div>
<h2 id="Gutters" class="m-b-1-xs">Gutters</h2>
<p class="m-b-3-xs">The Leap grid doesn't include gutter by default. But there are times when you want to include gutters between your grid. For those times, we have <code>.col-gutters</code>, which can be added next to <code>.col-container</code> to automatically assign gutters to the internal columns. You may also choose to apply gutters manually (for a little more control) by using our padding utility classes next to the column classes.</p>
<h3 class="m-b-1-xs">Automatic Gutters</h3>
<p class="m-b-3-xs">Gutters will not be applied to nested columns unless applied to its parent container.</p>
<div class="col-container col-gutters">
<div class="col col-40-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-60-xs">
<div class="col-container">
<div class="col col-33-xs border-mid-xs">.col</div>
<div class="col col-33-xs border-mid-xs">.col</div>
<div class="col col-33-xs border-mid-xs">.col</div>
</div>
</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container col-gutters">
<div class="col col-40-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-60-xs">
<div class="col-container">
<div class="col col-33-xs border-mid-xs">.col</div>
<div class="col col-33-xs border-mid-xs">.col</div>
<div class="col col-33-xs border-mid-xs">.col</div>
</div>
</div>
</div></code></pre>
</div>
<h3 class="m-b-1-xs">Manual Gutters</h3>
<p class="m-b-3-xs">With manual gutters, any styling should be applied to a nested element, not the columns themselves.</p>
<div class="col-container">
<div class="col col-30-xs p-r-1-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-30-xs p-r-5-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-40-xs">
<div class="border-mid-xs">.col</div>
</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container">
<div class="col col-30-xs p-r-1-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-30-xs p-r-5-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-40-xs">
<div class="border-mid-xs">.col</div>
</div>
</div></code></pre>
</div>
<h2 id="Centering" class="m-b-1-xs">Centering Columns</h2>
<p class="m-b-3-xs">Sometimes you want to center a single column within its container. This is possible by adding <code>.col-center</code> next to your <code>.col col-n-xs</code> class. You may also control column centering by using our margin and float utility classes. Simply apply <code>.m-auto-xs .float-none-xs</code> and you'll get the same styles as <code>.col-center</code>.</p>
<div class="col-container border-xs p-1-xs m-b-1-xs">
<div class="col col-50-xs col-center border-dark-xs">.col .col-50-xs .col-center</div>
</div>
<div class="col-container border-xs p-1-xs">
<div class="col col-30-xs col-center border-dark-xs">.col .col-30-xs .col-center</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container border-xs p-1-xs m-b-1-xs">
<div class="col col-50-xs col-center border-dark-xs">.col .col-50-xs .col-center</div>
</div>
<div class="col-container border-xs p-1-xs">
<div class="col col-30-xs col-center border-dark-xs">.col .col-30-xs .col-center</div>
</div></code></pre>
</div>
<h2 id="Offsets" class="m-b-1-xs">Column Offsets</h2>
<p class="m-b-3-xs">Move columns over by different grid widths by using <code>.col-offset-n-xs</code>. Keep in mind that the columns and offsets used within a <code>.col-container</code> shouldn't add up to more than 100.</p>
<div class="col-container border-xs p-1-xs m-b-1-xs">
<div class="col col-40-xs border-dark-xs">.col-40-xs</div>
<div class="col col-40-xs col-offset-20-xs border-dark-xs">.col-40-xs .col-offset-30-xs</div>
</div>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><div class="col-container border-xs p-1-xs m-b-1-xs">
<div class="col col-40-xs border-dark-xs">.col-40-xs</div>
<div class="col col-40-xs col-offset-20-xs border-dark-xs">.col-40-xs .col-offset-30-xs</div>
</div></code></pre>
</div>
<h2 id="Responsive" class="m-b-1-xs">Responsive Breakpoint Classes</h2>
<p class="m-b-3-xs">Our mobile first grid comes with a set of breakpoint class suffixes that can be used to override columns across breakpoints. For example, if a div needs to take up the full width of the page across all display sizes, use <code>.col-100-xs</code>. If that same div needs to be half width at the medium breakpoint and a quarter at our large breakpoints, add <code>.col-50-md</code> and <code>.col-33-lg</code>. Resize the browser to see the effect in action. Note that there are also suffixes for small and extra large. You can learn more about the breakpoints in our <a href="responsive.html">responsive documentation</a></p>
<div class="col-container">
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
</div>
<div class="guide-code">
<pre><code class="language-html"><div class="col-container">
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
</div></code></pre>
</div>
</section>