-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid.html
316 lines (311 loc) · 19.1 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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/b231ceea11.js" crossorigin="anonymous"></script>
<!-- Font awesome cdnjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<title>Grid</title>
</head>
<body>
<h1 class="center red-text text-lighten-2">Grids</h1>
<div class="divider"></div>
<br>
<div class="container">
<div class="row">
<div class="col s12 m9">
<p>We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.</p>
<div id="container" class="section scrollspy">
<!-- Container -->
<h3 class="red-text text-lighten-2">Container</h3>
</div>
<p>The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.</p>
<p class="flow-text">Demo</p>
<p>Try the button below to see what the page looks like without containers.</p>
<a href="" class="btn waves-effect-light">Turn Off Container</a>
<br><br>
<img src="images/img6_container_turn-off.png" alt="" class="responsive-img">
<br><br>
<a href="" class="btn waves-effect-light">Turn On Container</a>
<br><br>
<img src="images/img7_container_turn-on.png" alt="" class="responsive-img">
<br>
<p>To add a container just put your content inside a <code class="language-markup"> <'div'> </code> tag with a container class. Here's an example of how your page might be set up.</p>
<!-- Introduction -->
<div id="introduction" class="section scrollspy">
<h3 class="red-text text-lighten-2">Introduction</h3>
</div>
<p>Take a look at this section to quickly understand how the grid works!</p>
<p class="flow-text">12 Columns</p>
<p>Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.</p>
<div class="row">
<div class="card-panel col s12 m3 l6 xl1 yellow">
<p class="center black-text">1</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 yellow lighten-2">
<p class="center black-text">2</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 green">
<p class="center black-text">3</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 green lighten-2">
<p class="center black-text">4</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 cyan">
<p class="center black-text">5</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 cyan lighten-2">
<p class="center black-text">6</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 purple">
<p class="center black-text">7</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 purple lighten-2">
<p class="center black-text">8</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 pink">
<p class="center black-text">9</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 pink lighten-2">
<p class="center black-text">10</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 orange">
<p class="center black-text">11</p>
</div>
<div class="card-panel col s12 m3 l6 xl1 orange lighten-2">
<p class="center black-text">12</p>
</div>
</div>
<p>To get a feel of how the grid is used in HTML, take a look at the code below which will produce a similar result to the one above.</p>
<p>Note: For now, just know that the s1 stands for small-1 which in plain English means "1 column on small screens".</p>
<!-- Columns live inside Rows -->
<p class="flow-text">Columns live Inside Rows</p>
<p>Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns</p>
<div class="row center white-text">
<div class="col s12 card-panel pink lighten-1">
<p>This div is 12-columns wide on all screen sizes</p>
</div>
<div class="col s6 card-panel yellow lighten-1">
<p>6-columns (one-half)</p>
</div>
<div class="col s6 card-panel cyan lighten-1">
<p>6-columns (one-half)</p>
</div>
</div>
<!-- Offset -->
<div id="offsets" class="section scrollspy">
<h3 class="red-text text-lighten-2">Offsets</h3>
</div>
<p>To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.</p>
<div class="row white-text center">
<div class="col s12 card-panel purple lighten-1">
<p>This div is 12-columns wide on all screen sizes</p>
</div>
<div class="col s6 offset-s6 card-panel orange lighten-1">
<p>6-columns (offset-by-6)</p>
</div>
</div>
<!-- Push and Pull -->
<div id="push-pull" class="section scrollspy">
<h3 class="red-text text-lighten-2">Push and Pull</h3>
<p>You can easily change the order of your columns with push and pull. Simply add push-s2 or pull-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.</p>
<div class="row white-text center">
<div class="col s7 push-s5 m7 l12 card-panel green lighten-1">
<p>This div is 7-columns wide on pushed to the right by 5-columns.</p>
</div>
<div class="col s5 pull-s7 m5 l12 card-panel grey">
<p>5-columns wide pulled to the left by 7-columns.</p>
</div>
</div>
</div>
<!-- Creating Layouts -->
<div id="creating-layouts" class="section scrollspy">
<h3 class="red-text text-lighten-2">Creating Layouts</h3>
<p>Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.</p>
<div class="row">
<div class="col s12 m6">
<p class="flow-tex">Section</p>
<p>The section class is used for simple top and bottom padding. Just add the section class to your div's containing large blocks of content.</p>
</div>
<div class="col s12 m6">
<p class="flow-tex">Divider</p>
<p>Dividers are 1 pixel lines that help break up your content. Just add the divider to a div in between your content.</p>
</div>
<div class="col s12">
<p class="flow-text">Examples section and Dividers</p>
<div class="divider"></div>
<p class="flow-text">Section 1</p>
<p>Stuff</p>
<div class="divider"></div>
<p class="flow-text">Section 2</p>
<p>Stuff</p>
<div class="divider"></div>
<p class="flow-text">Section 3</p>
<p>Stuff</p>
</div>
</div>
<!-- Example Promotional Table-->
<p class="flow-text">Example Promotional Table</p>
<p>If we want 3 divs that are equal size, we define the divs with a width of 4-columns, as 4+4+4 nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've modified it slightly for the sake of this example.</p>
<br>
<div class="row center">
<div class="col s12 m4">
<i class="fa-solid fa-bolt-lightning large yellow-text"></i>
<h5>Speeds up development</h5>
<p>We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.</p>
</div>
<div class="col s12 m4">
<i class="fa-solid fa-user-group large blue-text"></i>
<h5>User Experience Focused</h5>
<p>By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.</p>
</div>
<div class="col s12 m4">
<i class="fa-solid fa-gear large grey-text"></i>
<h5>Easy to work with</h5>
<p>We have provided detailed documentation as well as specific code examples to help new users get started.</p>
</div>
</div>
<!-- Example Side Navigation Layout -->
<p class="flow-text">Example Side Navigation Layout</p>
<p>You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for an even layout.</p>
<img src="images/img9_sidenavlayout.png" alt="" class="responsive-img">
<br><br>
</div>
<!-- Creating Responsive Layouts -->
<div id="creating-responsive-layouts" class="section scrollspy">
<h3 class="red-text text-lighten-2">Creating Responsive Layouts</h3>
<p>Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.</p>
<p class="flow-text">Screen Sizes</p>
<table class="highlight">
<thead>
<tr>
<th></th>
<th>Mobile Devices <= 600px</th>
<th>Tablet Devices > 600px</th>
<th>Desktop Devices > 992px</th>
<th>Large Desktop Devices > 1200px</th>
</tr>
</thead>
<tbody>
<tr>
<td>Class Prefix</td>
<td>.s</td>
<td>.m</td>
<td>.l</td>
<td>.xl</td>
</tr>
<tr>
<td>Container Width</td>
<td>90%</td>
<td>85%</td>
<td>70%</td>
<td>70%</td>
</tr>
<tr>
<td>Number of Columns</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
</tbody>
</table>
<br>
<!-- Adding Responsiveness -->
<p class="flow-text">Adding Responsiveness</p>
<p>In the previous examples, we only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive.</p>
<div class="row white-text center">
<div class="grid-example col s12 card-panel pink lighten-2">
<span class="flow-text">I am always full-width (col s12)</span>
</div>
<div class="grid-example col s12 m6 card-panel teal lighten-1">
<span class="flow-text">I am full-width on mobile (col s12 m6)</span>
</div>
</div>
<!-- Responsive Side Navigation Layout -->
<p class="flow-text">Responsive Side Navigation Layout</p>
<p>In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.</p>
<img src="images/img10_ressidenavlayout.png" alt="" class="responsive-img">
<br>
<!-- More Responsive Grid Examples -->
<p class="flow-text">More Responsive Grid Examples</p>
<div class="row">
<div class="col s12 card-panel purple lighten-2 center-align"><p>s12</p>
</div>
<div class="col s12 m4 l2 card-panel yellow lighten-1 center-align"><p>s12 m4</p>
</div>
<div class="col s12 m4 l8 card-panel yellow lighten-2 center-align"><p>s12 m4</p>
</div>
<div class="col s12 m4 l2 card-panel yellow lighten-1 center-align"><p>s12 m4</p>
</div>
<div class="col s12 m6 l3 card-panel orange lighten-1 center-align"><p>s12 m6 l3</p>
</div>
<div class="col s12 m6 l3 card-panel orange lighten-2 center-align"><p>s12 m6 l3</p>
</div>
<div class="col s12 m6 l3 card-panel orange lighten-1 center-align"><p>s12 m6 l3</p>
</div>
<div class="col s12 m6 l3 card-panel orange lighten-2 center-align"><p>s12 m6 l3</p>
</div>
</div>
</div>
</div>
<!-- Stock Image -->
<div class="col m3 DNS-stock hide-on-small-only">
<img src="images/img8.png" alt="" class="responsive-img stock-img">
<a href="https://www.nslookup.io/dns-course?aff=yK4em" target="_blank" class="red-text text-lighten-1 stock-link"><br>I've spent 2 years</a>
<br>
<a href="https://www.nslookup.io/dns-course?aff=yK4em" target="_blank" class="red-text text-lighten-1 stock-link">learning DNS while</a>
<br>
<a href="https://www.nslookup.io/dns-course?aff=yK4em" target="_blank" class="red-text text-lighten-1 stock-link">building NSLookup.io.</a>
<br>
<a href="https://www.nslookup.io/dns-course?aff=yK4em" target="_blank" class="red-text text-lighten-1 stock-link">Now, I'm teaching</a>
<br>
<a href="https://www.nslookup.io/dns-course?aff=yK4em" target="_blank" class="red-text text-lighten-1 stock-link">everything I know.</a>
<br>
<span>
<a href="https://www.carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon" target="_blank" class="red-text text-lighten-1 stock-link">ads via Carbon</a>
</span>
<!-- ScrollSpy -->
<ul class="section table-of-contents">
<li>
<a href="#container">Container</a>
</li>
<li>
<a href="#introduction">Introduction</a>
</li>
<li>
<a href="#offsets">Offsets</a>
</li>
<li>
<a href="#push-pull">Push and Pull</a>
</li>
<li>
<a href="#creating-layouts">Creating Layouts</a>
</li>
<li>
<a href="#creating-responsive-layouts">Responsive Layouts</a>
</li>
</ul>
</div>
</div>
</div>
<div style="height: 1000px;"></div>
<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
</script>
</body>
</html>