|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Using Grid Units</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 |
|
24 <h1>Example: Using Grid Units</h1> |
|
25 <div class="yui3-g"> |
|
26 <div class="yui3-u-3-4"> |
|
27 <div id="main"> |
|
28 <div class="content"><div class="intro"> |
|
29 <p>Creating a layout using grids requires a <code>yui3-g</code> container |
|
30 and any number of <code>yui3-u-*</code> units. |
|
31 To create a layout that splits the available width into 2 equal parts, |
|
32 use two <code>yui3-u-1-2</code> units. The last two numbers of the class name, "1-2", represent |
|
33 1/2.</p> |
|
34 |
|
35 </div> |
|
36 |
|
37 <div class="example newwindow"> |
|
38 <a href="cssgrids-units-example.html" target="_blank" class="button"> |
|
39 View Example in New Window |
|
40 </a> |
|
41 </div> |
|
42 |
|
43 <h4>Note</h4> |
|
44 <p>The only child elements (e.g. direct descendants) of a <code>yui3-g</code> should be <code>yui-3-u-*</code> elements. Any elements within a <code>yui3-g</code> need to be wrapped in a <code>yui3-u-*</code> of some kind, otherwise you may experience side-effects due to the layout system being used.</p> |
|
45 <h3>Basic Markup Structure</h3> |
|
46 |
|
47 <pre class="code prettyprint"><div class="yui3-g"> |
|
48 <div class="yui3-u-1-2"></div> |
|
49 <div class="yui3-u-1-2"></div> |
|
50 </div></pre> |
|
51 |
|
52 |
|
53 <h3>Provide a Content Container</h3> |
|
54 <p>Styling should be applied to a container within the unit, rather than the unit itself. This allows you to set borders, padding, margins (gutters), etc. without worrying about breaking the layout. For this demo we will give the content a class of <code>content</code>, but can be called whatever you like.</p> |
|
55 |
|
56 <pre class="code prettyprint"><div class="yui3-g"> |
|
57 <div class="yui3-u-1-2"> |
|
58 <div class="content"> |
|
59 |
|
60 </div> |
|
61 </div> |
|
62 <div class="yui3-u-1-2"> |
|
63 <div class="content"> |
|
64 |
|
65 </div> |
|
66 </div> |
|
67 </div></pre> |
|
68 |
|
69 |
|
70 <h3>Adding a Gutter</h3> |
|
71 <p>All units align edge to edge, with zero space in between. You can add space ("gutter"), by simply adding a margin to your content. This is where additional content styling, such as borders, padding, colors, etc. can be applied as well.</p> |
|
72 |
|
73 <pre class="code prettyprint"><style> |
|
74 .yui3-g .content { |
|
75 border: 2px solid #000; |
|
76 margin-right:10px; /* "column" gutters */ |
|
77 padding: 1em; |
|
78 } |
|
79 </style></pre> |
|
80 |
|
81 |
|
82 <h3>Available Units</h3> |
|
83 |
|
84 <table class="auto"> |
|
85 <thead> |
|
86 <tr class="odd"> |
|
87 <th>Class</th> |
|
88 <th>Description</th> |
|
89 </tr> |
|
90 </thead> |
|
91 <tbody> |
|
92 <tr> |
|
93 <td><code>.yui3-u</code></td> |
|
94 <td>shrinks to fit content (unless given an explicit size)</td> |
|
95 </tr> |
|
96 <tr class="odd"> |
|
97 <td><code>.yui3-u-1</code></td> |
|
98 <td>fills entire width of container</td> |
|
99 </tr> |
|
100 <tr> |
|
101 <td><code>.yui3-u-1-2</code></td> |
|
102 <td>fills 1/2 the container</td> |
|
103 </tr> |
|
104 <tr class="odd"> |
|
105 <td><code>.yui3-u-1-3</code></td> |
|
106 <td>fills 1/3 the container</td> |
|
107 </tr> |
|
108 <tr> |
|
109 <td><code>.yui3-u-2-3</code></td> |
|
110 <td>fills 2/3 the container</td> |
|
111 </tr> |
|
112 <tr class="odd"> |
|
113 <td><code>.yui3-u-1-4</code></td> |
|
114 <td>fills 1/4 the container</td> |
|
115 </tr> |
|
116 <tr> |
|
117 <td><code>.yui3-u-3-4</code></td> |
|
118 <td>fills 3/4 the container</td> |
|
119 </tr> |
|
120 <tr class="odd"> |
|
121 <td><code>.yui3-u-1-5</code></td> |
|
122 <td>fills 1/5 the container</td> |
|
123 </tr> |
|
124 <tr> |
|
125 <td><code>.yui3-u-2-5</code></td> |
|
126 <td>fills 2/5 the container</td> |
|
127 </tr> |
|
128 <tr class="odd"> |
|
129 <td><code>.yui3-u-3-5</code></td> |
|
130 <td>fills 3/5 the container</td> |
|
131 </tr> |
|
132 <tr> |
|
133 <td><code>.yui3-u-4-5</code></td> |
|
134 <td>fills 4/5 the container</td> |
|
135 </tr> |
|
136 <tr class="odd"> |
|
137 <td><code>.yui3-u-1-6</code></td> |
|
138 <td>fills 1/6 the container</td> |
|
139 </tr> |
|
140 <tr> |
|
141 <td><code>.yui3-u-5-6</code></td> |
|
142 <td>fills 5/6 the container</td> |
|
143 </tr> |
|
144 </tbody> |
|
145 </table> |
|
146 </div> |
|
147 </div> |
|
148 </div> |
|
149 |
|
150 <div class="yui3-u-1-4"> |
|
151 <div class="sidebar"> |
|
152 |
|
153 |
|
154 |
|
155 <div class="sidebox"> |
|
156 <div class="hd"> |
|
157 <h2 class="no-toc">Examples</h2> |
|
158 </div> |
|
159 |
|
160 <div class="bd"> |
|
161 <ul class="examples"> |
|
162 |
|
163 |
|
164 <li data-description="Each unit has a className that provides its percentage width."> |
|
165 <a href="cssgrids-units.html">Using Grid Units</a> |
|
166 </li> |
|
167 |
|
168 |
|
169 |
|
170 <li data-description="This is a template for creating fixed-width layouts."> |
|
171 <a href="cssgrids-fixed.html">Fixed Page Template</a> |
|
172 </li> |
|
173 |
|
174 |
|
175 |
|
176 <li data-description="This is a template for creating fluid layouts."> |
|
177 <a href="cssgrids-fluid.html">Fluid Page Template</a> |
|
178 </li> |
|
179 |
|
180 |
|
181 |
|
182 <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units."> |
|
183 <a href="cssgrids-align.html">Aligning Grid Units</a> |
|
184 </li> |
|
185 |
|
186 |
|
187 |
|
188 <li data-description="A responsive layout that looks like a newspaper"> |
|
189 <a href="cssgrids-magazine.html">Responsive Newspaper Layout</a> |
|
190 </li> |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 </ul> |
|
208 </div> |
|
209 </div> |
|
210 |
|
211 |
|
212 |
|
213 <div class="sidebox"> |
|
214 <div class="hd"> |
|
215 <h2 class="no-toc">Examples That Use This Component</h2> |
|
216 </div> |
|
217 |
|
218 <div class="bd"> |
|
219 <ul class="examples"> |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 <li data-description="Creating left navigation using the MenuNav Node Plugin."> |
|
233 <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a> |
|
234 </li> |
|
235 |
|
236 |
|
237 |
|
238 <li data-description="Creating top navigation using the MenuNav Node Plugin"> |
|
239 <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a> |
|
240 </li> |
|
241 |
|
242 |
|
243 |
|
244 <li data-description="Creating menu button navigation using the MenuNav Node Plugin"> |
|
245 <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a> |
|
246 </li> |
|
247 |
|
248 |
|
249 |
|
250 <li data-description="Creating split button navigation using the MenuNav Node Plugin"> |
|
251 <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a> |
|
252 </li> |
|
253 |
|
254 |
|
255 |
|
256 <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin"> |
|
257 <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a> |
|
258 </li> |
|
259 |
|
260 |
|
261 |
|
262 <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin"> |
|
263 <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a> |
|
264 </li> |
|
265 |
|
266 |
|
267 |
|
268 <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr"> |
|
269 <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a> |
|
270 </li> |
|
271 |
|
272 |
|
273 </ul> |
|
274 </div> |
|
275 </div> |
|
276 |
|
277 </div> |
|
278 </div> |
|
279 </div> |
|
280 </div> |
|
281 |
|
282 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
283 <script>prettyPrint();</script> |
|
284 |
|
285 <script> |
|
286 YUI.Env.Tests = { |
|
287 examples: [], |
|
288 project: '../assets', |
|
289 assets: '../assets/cssgrids', |
|
290 name: 'cssgrids-units', |
|
291 title: 'Using Grid Units', |
|
292 newWindow: 'true', |
|
293 auto: false |
|
294 }; |
|
295 YUI.Env.Tests.examples.push('cssgrids-units'); |
|
296 YUI.Env.Tests.examples.push('cssgrids-fixed'); |
|
297 YUI.Env.Tests.examples.push('cssgrids-fluid'); |
|
298 YUI.Env.Tests.examples.push('cssgrids-align'); |
|
299 YUI.Env.Tests.examples.push('cssgrids-magazine'); |
|
300 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
301 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
302 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
303 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
304 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
305 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
306 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
307 |
|
308 </script> |
|
309 <script src="../assets/yui/test-runner.js"></script> |
|
310 |
|
311 |
|
312 |
|
313 </body> |
|
314 </html> |