|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Aligning 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: Aligning 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>YUI Grids makes it easy to align units in various ways, using basic CSS properties.</p> |
|
30 </div> |
|
31 |
|
32 <div class="example newwindow"> |
|
33 <a href="cssgrids-align-example.html" target="_blank" class="button"> |
|
34 View Example in New Window |
|
35 </a> |
|
36 </div> |
|
37 |
|
38 <h3>Horizontal Alignment</h3> |
|
39 <p>Sometimes is it desirable for units to be horizontally centered when taking up less than 100% of the width of the containing grid. Rather than setting the alignment for all grids, we will add an <code>ID</code> to target the specific content being aligned. For this example, the <code>ID</code> "demo" is used, but this should be tailored to your specific content.</p> |
|
40 |
|
41 <pre class="code prettyprint"><div class="yui3-g" id="demo"> |
|
42 <div class="yui3-u-1-3"><p>I take up 1/3 of my container.</p></div> |
|
43 <div class="yui3-u-1-3"><p>I take up 1/3 of my container.</p></div> |
|
44 </div></pre> |
|
45 |
|
46 |
|
47 <p>Using the CSS <code>text-align</code> property on the containing grid tells the units inside of a grid how to align. We will also reset the centering so that subsequent content is left-aligned.</p> |
|
48 |
|
49 <pre class="code prettyprint"><style> |
|
50 #demo { |
|
51 text-align: center; |
|
52 } |
|
53 |
|
54 #demo .yui3-u-1-3 { |
|
55 text-align: left; |
|
56 } |
|
57 </style></pre> |
|
58 |
|
59 |
|
60 <h3>Vertical Alignment</h3> |
|
61 <p>Vertical alignment tells mixed height units how they should align relative to one another, so at least 2 units are required.</p> |
|
62 |
|
63 <pre class="code prettyprint"><div class="yui3-g thumb-captions"> |
|
64 <div class="yui3-u-1-3"> |
|
65 <a href="#"><img width="80" height="60" src="museum.jpg"> |
|
66 Lorem ispum |
|
67 </a> |
|
68 </div> |
|
69 <div class="yui3-u-1-3"> |
|
70 <a href="#"><img height="80" width="60" src="museum.jpg"> |
|
71 Lorem ispum |
|
72 </a> |
|
73 </div> |
|
74 <div class="yui3-u-1-3"> |
|
75 <a href="#"><img height="80" width="60" src="museum.jpg"> |
|
76 Lorem ispum |
|
77 </a> |
|
78 </div> |
|
79 </div></pre> |
|
80 |
|
81 |
|
82 <p>Each unit needs to be told how it should align using the CSS <code>vertical-align</code> property. In this case, we want them all to be bottom aligned.</p> |
|
83 |
|
84 <pre class="code prettyprint"><style> |
|
85 .thumb-captions .yui3-u-1-3 { |
|
86 vertical-align: bottom; |
|
87 } |
|
88 </style></pre> |
|
89 |
|
90 |
|
91 <h3>Vertically Center a Single Unit</h3> |
|
92 <p>Its possible to vertically center a single unit, although a second stub unit is required for it to align with.</p> |
|
93 |
|
94 <pre class="code prettyprint"><div class="yui3-g" id="demo"> |
|
95 <div class="yui3-u align-stub"></div> |
|
96 <div class="yui3-u-1-3"> |
|
97 <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis.</p> |
|
98 </div> |
|
99 </div></pre> |
|
100 |
|
101 |
|
102 <p>Setting the height of the stub to the desired height of the container allows the content to align with the middle of the stub, vertically centered in the container. Setting the <code>vertical-align</code> CSS property for both units tells them how to behave with repsect to the other units.</p> |
|
103 |
|
104 <pre class="code prettyprint"><style> |
|
105 #demo .align-stub { |
|
106 height: 200px; |
|
107 } |
|
108 |
|
109 #demo .align-stub, |
|
110 #demo .yui-u-1-3 { |
|
111 vertical-align: middle; |
|
112 } |
|
113 </style></pre> |
|
114 |
|
115 |
|
116 <h5>Note:</h5> |
|
117 <p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p> |
|
118 </div> |
|
119 </div> |
|
120 </div> |
|
121 |
|
122 <div class="yui3-u-1-4"> |
|
123 <div class="sidebar"> |
|
124 |
|
125 |
|
126 |
|
127 <div class="sidebox"> |
|
128 <div class="hd"> |
|
129 <h2 class="no-toc">Examples</h2> |
|
130 </div> |
|
131 |
|
132 <div class="bd"> |
|
133 <ul class="examples"> |
|
134 |
|
135 |
|
136 <li data-description="Each unit has a className that provides its percentage width."> |
|
137 <a href="cssgrids-units.html">Using Grid Units</a> |
|
138 </li> |
|
139 |
|
140 |
|
141 |
|
142 <li data-description="This is a template for creating fixed-width layouts."> |
|
143 <a href="cssgrids-fixed.html">Fixed Page Template</a> |
|
144 </li> |
|
145 |
|
146 |
|
147 |
|
148 <li data-description="This is a template for creating fluid layouts."> |
|
149 <a href="cssgrids-fluid.html">Fluid Page Template</a> |
|
150 </li> |
|
151 |
|
152 |
|
153 |
|
154 <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units."> |
|
155 <a href="cssgrids-align.html">Aligning Grid Units</a> |
|
156 </li> |
|
157 |
|
158 |
|
159 |
|
160 <li data-description="A responsive layout that looks like a newspaper"> |
|
161 <a href="cssgrids-magazine.html">Responsive Newspaper Layout</a> |
|
162 </li> |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 </ul> |
|
180 </div> |
|
181 </div> |
|
182 |
|
183 |
|
184 |
|
185 <div class="sidebox"> |
|
186 <div class="hd"> |
|
187 <h2 class="no-toc">Examples That Use This Component</h2> |
|
188 </div> |
|
189 |
|
190 <div class="bd"> |
|
191 <ul class="examples"> |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 <li data-description="Creating left navigation using the MenuNav Node Plugin."> |
|
205 <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a> |
|
206 </li> |
|
207 |
|
208 |
|
209 |
|
210 <li data-description="Creating top navigation using the MenuNav Node Plugin"> |
|
211 <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a> |
|
212 </li> |
|
213 |
|
214 |
|
215 |
|
216 <li data-description="Creating menu button navigation using the MenuNav Node Plugin"> |
|
217 <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a> |
|
218 </li> |
|
219 |
|
220 |
|
221 |
|
222 <li data-description="Creating split button navigation using the MenuNav Node Plugin"> |
|
223 <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a> |
|
224 </li> |
|
225 |
|
226 |
|
227 |
|
228 <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin"> |
|
229 <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a> |
|
230 </li> |
|
231 |
|
232 |
|
233 |
|
234 <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin"> |
|
235 <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a> |
|
236 </li> |
|
237 |
|
238 |
|
239 |
|
240 <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr"> |
|
241 <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a> |
|
242 </li> |
|
243 |
|
244 |
|
245 </ul> |
|
246 </div> |
|
247 </div> |
|
248 |
|
249 </div> |
|
250 </div> |
|
251 </div> |
|
252 </div> |
|
253 |
|
254 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
255 <script>prettyPrint();</script> |
|
256 |
|
257 <script> |
|
258 YUI.Env.Tests = { |
|
259 examples: [], |
|
260 project: '../assets', |
|
261 assets: '../assets/cssgrids', |
|
262 name: 'cssgrids-align', |
|
263 title: 'Aligning Grid Units', |
|
264 newWindow: 'true', |
|
265 auto: false |
|
266 }; |
|
267 YUI.Env.Tests.examples.push('cssgrids-units'); |
|
268 YUI.Env.Tests.examples.push('cssgrids-fixed'); |
|
269 YUI.Env.Tests.examples.push('cssgrids-fluid'); |
|
270 YUI.Env.Tests.examples.push('cssgrids-align'); |
|
271 YUI.Env.Tests.examples.push('cssgrids-magazine'); |
|
272 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
273 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
274 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
275 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
276 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
277 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
278 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
279 |
|
280 </script> |
|
281 <script src="../assets/yui/test-runner.js"></script> |
|
282 |
|
283 |
|
284 |
|
285 </body> |
|
286 </html> |