|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>CSS Grids</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 <a href="#toc" class="jump">Jump to Table of Contents</a> |
|
24 |
|
25 |
|
26 <h1>CSS Grids</h1> |
|
27 <div class="yui3-g"> |
|
28 <div class="yui3-u-3-4"> |
|
29 <div id="main"> |
|
30 <div class="content"> <div class="intro"> |
|
31 <p class="deprecated"><em> |
|
32 <strong>Note:</strong> The file "grids.css" is deprecated, use "cssgrids.css" instead. |
|
33 </em></p> |
|
34 <p>The foundational CSS Grids provides a simple system for laying out content. The basic components are "grids" and "units". A "grid" (<code>yui3-g</code>) contains one or more "units" (<code>yui3-u</code>). The type of "unit" chosen describes how it should be sized (e.g. "yui3-u-1-2" takes up half the grid, "yui3-u-1-3" takes up one-third, et cetera). The only constraints for YUI3 Grids are that all "units" are children of a "grid". All you need to do is define a grid, one or more units inside it, and specify widths for them. Then stack and nest as required.</p> |
|
35 </div> |
|
36 |
|
37 <h2 id="start">Getting Started</h2> |
|
38 |
|
39 <h3 id="dependencies">Include Dependencies</h3> |
|
40 |
|
41 <p>To use CSS Grids, include the following source file in your web page with the link element.</p> |
|
42 |
|
43 <pre class="code prettyprint"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssgrids/cssgrids-min.css"></pre> |
|
44 |
|
45 <p>If you want responsive behavior, pull down <a href="#responsive">Responsive Grids</a> instead.</p> |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 <h2 id="using">Using YUI CSS Grids</h2> |
|
52 |
|
53 <h3 id="unit-sizes">Unit Sizes</h3> |
|
54 <p>All of the sizing for YUI Grids is done using "units". Units can be subdivided up to 1/24 of the available width. The following table gives the various unit classes that can be applied.</p> |
|
55 <table class="auto"> |
|
56 <thead> |
|
57 <tr> |
|
58 <th>Class</th> |
|
59 <th>Description</th> |
|
60 </tr> |
|
61 </thead> |
|
62 <tbody> |
|
63 <tr> |
|
64 <td><code>.yui3-u</code></td> |
|
65 <td>Shrinks to fit unless a width is applied.</td> |
|
66 </tr> |
|
67 <tr> |
|
68 <td><code>.yui3-u-1</code></td> |
|
69 <td>Fills 100% of the available width.</td> |
|
70 </tr> |
|
71 <tr> |
|
72 <td><code>.yui3-u-1-2</code></td> |
|
73 <td>Fills 1/2 of available width.</td> |
|
74 </tr> |
|
75 <tr> |
|
76 <td><code>.yui3-u-1-3</code></td> |
|
77 <td>Fills 1/3 of available width.</td> |
|
78 </tr> |
|
79 <tr> |
|
80 <td><code>.yui3-u-2-3</code></td> |
|
81 <td>Fills 2/3 of available width.</td> |
|
82 </tr> |
|
83 <tr> |
|
84 <td><code>.yui3-u-1-4</code></td> |
|
85 <td>Fills 1/4 of available width.</td> |
|
86 </tr> |
|
87 <tr> |
|
88 <td><code>.yui3-u-3-4</code></td> |
|
89 <td>Fills 3/4 of available width.</td> |
|
90 </tr> |
|
91 <tr> |
|
92 <td><code>.yui3-u-1-5</code></td> |
|
93 <td>Fills 1/5 of available width.</td> |
|
94 </tr> |
|
95 <tr> |
|
96 <td><code>.yui3-u-2-5</code></td> |
|
97 <td>Fills 2/5 of available width.</td> |
|
98 </tr> |
|
99 <tr> |
|
100 <td><code>.yui3-u-3-5</code></td> |
|
101 <td>Fills 3/5 of available width.</td> |
|
102 </tr> |
|
103 <tr> |
|
104 <td><code>.yui3-u-4-5</code></td> |
|
105 <td>Fills 4/5 of available width.</td> |
|
106 </tr> |
|
107 <tr> |
|
108 <td><code>.yui3-u-1-6</code></td> |
|
109 <td>Fills 1/6 of available width.</td> |
|
110 </tr> |
|
111 <tr> |
|
112 <td><code>.yui3-u-5-6</code></td> |
|
113 <td>Fills 5/6 of available width.</td> |
|
114 </tr> |
|
115 <tr> |
|
116 <td><code>.yui3-u-1-8</code></td> |
|
117 <td>Fills 1/8 of available width.</td> |
|
118 </tr> |
|
119 <tr> |
|
120 <td><code>.yui3-u-3-8</code></td> |
|
121 <td>Fills 3/8 of available width.</td> |
|
122 </tr> |
|
123 <tr> |
|
124 <td><code>.yui3-u-5-8</code></td> |
|
125 <td>Fills 5/8 of available width.</td> |
|
126 </tr> |
|
127 <tr> |
|
128 <td><code>.yui3-u-7-8</code></td> |
|
129 <td>Fills 7/8 of available width.</td> |
|
130 </tr> |
|
131 <tr> |
|
132 <td><code>.yui3-u-1-12</code></td> |
|
133 <td>Fills 1/12 of available width.</td> |
|
134 </tr> |
|
135 <tr> |
|
136 <td><code>.yui3-u-5-12</code></td> |
|
137 <td>Fills 5/12 of available width.</td> |
|
138 </tr> |
|
139 <tr> |
|
140 <td><code>.yui3-u-7-12</code></td> |
|
141 <td>Fills 7/12 of available width.</td> |
|
142 </tr> |
|
143 <tr> |
|
144 <td><code>.yui3-u-11-12</code></td> |
|
145 <td>Fills 11/12 of available width.</td> |
|
146 </tr> |
|
147 <tr> |
|
148 <td><code>.yui3-u-1-24</code></td> |
|
149 <td>Fills 1/24 of available width.</td> |
|
150 </tr> |
|
151 <tr> |
|
152 <td><code>.yui3-u-5-24</code></td> |
|
153 <td>Fills 5/24 of available width.</td> |
|
154 </tr> |
|
155 <tr> |
|
156 <td><code>.yui3-u-7-24</code></td> |
|
157 <td>Fills 7/24 of available width.</td> |
|
158 </tr> |
|
159 <tr> |
|
160 <td><code>.yui3-u-11-24</code></td> |
|
161 <td>Fills 11/24 of available width.</td> |
|
162 </tr> |
|
163 <tr> |
|
164 <td><code>.yui3-u-13-24</code></td> |
|
165 <td>Fills 13/24 of available width.</td> |
|
166 </tr> |
|
167 <tr> |
|
168 <td><code>.yui3-u-17-24</code></td> |
|
169 <td>Fills 17/24 of available width.</td> |
|
170 </tr> |
|
171 <tr> |
|
172 <td><code>.yui3-u-19-24</code></td> |
|
173 <td>Fills 19/24 of available width.</td> |
|
174 </tr> |
|
175 <tr> |
|
176 <td><code>.yui3-u-23-24</code></td> |
|
177 <td>Fills 23/24 of available width.</td> |
|
178 </tr> |
|
179 </tbody> |
|
180 </table> |
|
181 |
|
182 <h3 id="page_width">Building a Page Template</h3> |
|
183 |
|
184 <p>The sizing of "units" is done using percentages, so in order to build a "page" template, a width on the outermost container is required. The simplest approach to fixing your page size is to apply a width directly to the body element. Optionally, the page can be centered in the viewport by setting the <code>margin</code> to <code>auto</code>. The following creates a 960px, centered layout.</p> |
|
185 |
|
186 <pre class="code prettyprint">body { |
|
187 margin: auto; /* center in viewport */ |
|
188 width: 960px; |
|
189 }</pre> |
|
190 |
|
191 |
|
192 <p>The next step is to decide on the size of each "column" and choose the appropriate "unit". Remember, units sizes are percentage-based, so a bit of math may be required when designing with pixels rather than proportions. To create a 200 pixel wide sidebar, assuming a 960px layout, we would use a 5/24 unit ("yui3-u-5-24") for the narrow column, and a 19/24 ("yui3-19-24") for the main column.</p> |
|
193 |
|
194 <pre class="code prettyprint"><head> |
|
195 <style> |
|
196 body { |
|
197 margin: auto; /* center in viewport */ |
|
198 width: 960px; |
|
199 } |
|
200 |
|
201 </style> |
|
202 </head> |
|
203 |
|
204 <body> |
|
205 <div class="yui3-g"> |
|
206 <div class="yui3-u-5-24"> |
|
207 |
|
208 </div> |
|
209 <div class="yui3-u-19-24"> |
|
210 |
|
211 </div> |
|
212 </div> |
|
213 </body></pre> |
|
214 |
|
215 <h3 id="pixels">Pixel Units</h3> |
|
216 <p>Some layouts have precise sizing requirements that may not always be fulfilled by percentage-based units. Custom unit sizes may be applied using the generic unit ("yui3-u"). Rather than overriding the YUI units, custom sizing should be done using your own semantic markup. To recreate the previous example with custom units, we will add IDs to the column containers. This examples uses "nav" and "main", but these should be tailored to your content.</p> |
|
217 |
|
218 <pre class="code prettyprint"><head> |
|
219 <style> |
|
220 body { |
|
221 margin: auto; /* center in viewport */ |
|
222 width: 960px; |
|
223 } |
|
224 |
|
225 #nav { |
|
226 width: 200px; |
|
227 } |
|
228 |
|
229 #main { |
|
230 width: 760px; |
|
231 } |
|
232 |
|
233 </style> |
|
234 </head> |
|
235 |
|
236 <body> |
|
237 <div class="yui3-g"> |
|
238 <div class="yui3-u" id="nav"> |
|
239 |
|
240 </div> |
|
241 <div class="yui3-u" id="main"> |
|
242 |
|
243 </div> |
|
244 </div> |
|
245 </body></pre> |
|
246 |
|
247 |
|
248 <pre class="code prettyprint"><head> |
|
249 <style> |
|
250 body { |
|
251 margin: auto; /* center in viewport */ |
|
252 width: 960px; |
|
253 } |
|
254 |
|
255 #nav { |
|
256 width: 200px; |
|
257 } |
|
258 |
|
259 #main { |
|
260 width: 760px; |
|
261 } |
|
262 |
|
263 </style> |
|
264 </head> |
|
265 |
|
266 <body> |
|
267 <div class="yui3-g"> |
|
268 <div class="yui3-u" id="nav"> |
|
269 |
|
270 </div> |
|
271 <div class="yui3-u" id="main"> |
|
272 |
|
273 </div> |
|
274 </div> |
|
275 </body></pre> |
|
276 |
|
277 |
|
278 |
|
279 <h2 id="responsive">Responsive Grids</h2> |
|
280 |
|
281 <p>To pull down Responsive Grids, include this link element on your page:</p> |
|
282 <pre class="code prettyprint"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssgrids-responsive/cssgrids-responsive-min.css"></pre> |
|
283 |
|
284 |
|
285 <p>YUI Responsive Grids builds on top of the existing YUI Grids implementation. It adds a single new class name called <code>.yui3-g-r</code>. You can use this instead of using <code>.yui3-g</code> as you normally do. All elements with a class name of <code>.yui3-u-*-*</code> will automatically become responsive if they are direct descendents of a <code>.yui3-g-r</code>. Images will shrink to fit the viewport, and units will collapse to 100% width when the viewport is 767px or below.</p> |
|
286 |
|
287 <p>For example, consider the two HTML snippets below. The first gist shows how regular YUI grids are written. These grids are unresponsive. They’ll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>yui3-g</code> with <code>yui3-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p> |
|
288 |
|
289 <pre class="code prettyprint"><div class='yui3-g'> |
|
290 <div class="yui3-u-1-3">...</div> |
|
291 <div class="yui3-u-1-3">...</div> |
|
292 <div class="yui3-u-1-3">...</div> |
|
293 </div></pre> |
|
294 |
|
295 |
|
296 <pre class="code prettyprint"><div class='yui3-g-r'> |
|
297 <div class="yui3-u-1-3">...</div> |
|
298 <div class="yui3-u-1-3">...</div> |
|
299 <div class="yui3-u-1-3">...</div> |
|
300 </div></pre> |
|
301 |
|
302 |
|
303 <p>If you want some HTML elements to remain in a grid even on smaller screens, wrap them in the standard <code>.yui3-g</code></p> |
|
304 |
|
305 |
|
306 <h3 id="media-queries">Media Queries</h3> |
|
307 |
|
308 <p>Responsive Grids listens to the following media queries. All <code>yui3-u-*</code> elements inside a <code>yui3-g-r</code> become 100% width at 767px or below.</p> |
|
309 |
|
310 <table> |
|
311 <thead> |
|
312 <tr> |
|
313 <th>Type of Display</th> |
|
314 <th>Media Query Widths</th> |
|
315 </tr> |
|
316 </thead> |
|
317 <tbody> |
|
318 <tr> |
|
319 <td>Default Displays</td> |
|
320 <td>980px and up</td> |
|
321 </tr> |
|
322 <tr> |
|
323 <td>Large Tablets</td> |
|
324 <td>768px to 979px</td> |
|
325 </tr> |
|
326 <tr> |
|
327 <td>Smaller Tablets and Large Phones</td> |
|
328 <td>767px and below</td> |
|
329 </tr> |
|
330 <tr> |
|
331 <td>Phones</td> |
|
332 <td>480px and below</td> |
|
333 </tr> |
|
334 </tbody> |
|
335 </table> |
|
336 |
|
337 <p>Responsive Grids also comes with the following helper classes to show or hide content at different screen widths. Remember that to optimize performance and page load time, you should ideally determine what to show and hide on the server, instead of on the client.</p> |
|
338 |
|
339 <table> |
|
340 <thead> |
|
341 <tr> |
|
342 <th>Helper Class Name</th> |
|
343 <th>Description</th> |
|
344 </tr> |
|
345 </thead> |
|
346 <tbody> |
|
347 <tr> |
|
348 <td><code>yui3-hidden-phone</code></td> |
|
349 <td>Content marked with this class will be hidden below 768px</td> |
|
350 </tr> |
|
351 <tr> |
|
352 <td><code>yui3-hidden-tablet</code></td> |
|
353 <td>Content marked with this class will be hidden between 768px and 979px</td> |
|
354 </tr> |
|
355 <tr> |
|
356 <td><code>yui3-hidden-desktop</code></td> |
|
357 <td>Content marked with this class will be hidden above 980px</td> |
|
358 </tr> |
|
359 </tbody> |
|
360 </table> |
|
361 |
|
362 </div> |
|
363 </div> |
|
364 </div> |
|
365 |
|
366 <div class="yui3-u-1-4"> |
|
367 <div class="sidebar"> |
|
368 |
|
369 <div id="toc" class="sidebox"> |
|
370 <div class="hd"> |
|
371 <h2 class="no-toc">Table of Contents</h2> |
|
372 </div> |
|
373 |
|
374 <div class="bd"> |
|
375 <ul class="toc"> |
|
376 <li> |
|
377 <a href="#start">Getting Started</a> |
|
378 <ul class="toc"> |
|
379 <li> |
|
380 <a href="#dependencies">Include Dependencies</a> |
|
381 </li> |
|
382 </ul> |
|
383 </li> |
|
384 <li> |
|
385 <a href="#using">Using YUI CSS Grids</a> |
|
386 <ul class="toc"> |
|
387 <li> |
|
388 <a href="#unit-sizes">Unit Sizes</a> |
|
389 </li> |
|
390 <li> |
|
391 <a href="#page_width">Building a Page Template</a> |
|
392 </li> |
|
393 <li> |
|
394 <a href="#pixels">Pixel Units</a> |
|
395 </li> |
|
396 </ul> |
|
397 </li> |
|
398 <li> |
|
399 <a href="#responsive">Responsive Grids</a> |
|
400 <ul class="toc"> |
|
401 <li> |
|
402 <a href="#media-queries">Media Queries</a> |
|
403 </li> |
|
404 </ul> |
|
405 </li> |
|
406 </ul> |
|
407 </div> |
|
408 </div> |
|
409 |
|
410 |
|
411 |
|
412 <div class="sidebox"> |
|
413 <div class="hd"> |
|
414 <h2 class="no-toc">Examples</h2> |
|
415 </div> |
|
416 |
|
417 <div class="bd"> |
|
418 <ul class="examples"> |
|
419 |
|
420 |
|
421 <li data-description="Each unit has a className that provides its percentage width."> |
|
422 <a href="cssgrids-units.html">Using Grid Units</a> |
|
423 </li> |
|
424 |
|
425 |
|
426 |
|
427 <li data-description="This is a template for creating fixed-width layouts."> |
|
428 <a href="cssgrids-fixed.html">Fixed Page Template</a> |
|
429 </li> |
|
430 |
|
431 |
|
432 |
|
433 <li data-description="This is a template for creating fluid layouts."> |
|
434 <a href="cssgrids-fluid.html">Fluid Page Template</a> |
|
435 </li> |
|
436 |
|
437 |
|
438 |
|
439 <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units."> |
|
440 <a href="cssgrids-align.html">Aligning Grid Units</a> |
|
441 </li> |
|
442 |
|
443 |
|
444 |
|
445 <li data-description="A responsive layout that looks like a newspaper"> |
|
446 <a href="cssgrids-magazine.html">Responsive Newspaper Layout</a> |
|
447 </li> |
|
448 |
|
449 |
|
450 |
|
451 |
|
452 |
|
453 |
|
454 |
|
455 |
|
456 |
|
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 |
|
463 |
|
464 </ul> |
|
465 </div> |
|
466 </div> |
|
467 |
|
468 |
|
469 |
|
470 <div class="sidebox"> |
|
471 <div class="hd"> |
|
472 <h2 class="no-toc">Examples That Use This Component</h2> |
|
473 </div> |
|
474 |
|
475 <div class="bd"> |
|
476 <ul class="examples"> |
|
477 |
|
478 |
|
479 |
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 <li data-description="Creating left navigation using the MenuNav Node Plugin."> |
|
490 <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a> |
|
491 </li> |
|
492 |
|
493 |
|
494 |
|
495 <li data-description="Creating top navigation using the MenuNav Node Plugin"> |
|
496 <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a> |
|
497 </li> |
|
498 |
|
499 |
|
500 |
|
501 <li data-description="Creating menu button navigation using the MenuNav Node Plugin"> |
|
502 <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a> |
|
503 </li> |
|
504 |
|
505 |
|
506 |
|
507 <li data-description="Creating split button navigation using the MenuNav Node Plugin"> |
|
508 <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a> |
|
509 </li> |
|
510 |
|
511 |
|
512 |
|
513 <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin"> |
|
514 <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a> |
|
515 </li> |
|
516 |
|
517 |
|
518 |
|
519 <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin"> |
|
520 <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a> |
|
521 </li> |
|
522 |
|
523 |
|
524 |
|
525 <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr"> |
|
526 <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a> |
|
527 </li> |
|
528 |
|
529 |
|
530 </ul> |
|
531 </div> |
|
532 </div> |
|
533 |
|
534 </div> |
|
535 </div> |
|
536 </div> |
|
537 </div> |
|
538 |
|
539 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
540 <script>prettyPrint();</script> |
|
541 |
|
542 <script> |
|
543 YUI.Env.Tests = { |
|
544 examples: [], |
|
545 project: '../assets', |
|
546 assets: '../assets/cssgrids', |
|
547 name: 'cssgrids', |
|
548 title: 'CSS Grids', |
|
549 newWindow: '', |
|
550 auto: false |
|
551 }; |
|
552 YUI.Env.Tests.examples.push('cssgrids-units'); |
|
553 YUI.Env.Tests.examples.push('cssgrids-fixed'); |
|
554 YUI.Env.Tests.examples.push('cssgrids-fluid'); |
|
555 YUI.Env.Tests.examples.push('cssgrids-align'); |
|
556 YUI.Env.Tests.examples.push('cssgrids-magazine'); |
|
557 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
558 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
559 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
560 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
561 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
562 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
563 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
564 |
|
565 </script> |
|
566 <script src="../assets/yui/test-runner.js"></script> |
|
567 |
|
568 |
|
569 |
|
570 </body> |
|
571 </html> |