← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/cssgrids/index.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/cssgrids/index.html
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://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>CSS Grids</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content">                               <div class="intro">
23
 
                        
24
 
                                        <p>The foundational CSS Grids provides a simple system for layout 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 constrains 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>
25
 
                </div>
26
 
 
27
 
                                        <h2 id="start">Getting Started</h2>
28
 
 
29
 
                                        <h3 id="dependencies">Include Dependencies</h3>
30
 
 
31
 
                                        <p>To use CSS Grids, include the following source file in your web page with the link element.</p>
32
 
 
33
 
<pre class="code prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;cssgrids&#x2F;grids-min.css&quot;&gt;</pre>
34
 
 
35
 
 
36
 
                                                <h2 id="using">Using YUI CSS Grids</h2>
37
 
 
38
 
                        <h3 id="unit-sizes">Unit Sizes</h3>
39
 
                        <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>
40
 
                        <table class="auto">
41
 
                            <thead>
42
 
                                <tr>
43
 
                                    <th>Class</th>
44
 
                                    <th>Description</th>
45
 
                                </tr>
46
 
                            </thead>
47
 
                            <tbody>
48
 
                                <tr>
49
 
                                    <td><code>.yui3-u</code></td>
50
 
                                    <td>Shrinks to fit unless a width is applied.</td>
51
 
                                </tr>
52
 
                                <tr>
53
 
                                    <td><code>.yui3-u-1</code></td>
54
 
                                    <td>Fills 100% of the available width.</td>
55
 
                                </tr>
56
 
                                <tr>
57
 
                                    <td><code>.yui3-u-1-2</code></td>
58
 
                                    <td>Fills 1/2 of available width.</td>
59
 
                                </tr>
60
 
                                <tr>
61
 
                                    <td><code>.yui3-u-1-3</code></td>
62
 
                                    <td>Fills 1/3 of available width.</td>
63
 
                                </tr>
64
 
                                <tr>
65
 
                                    <td><code>.yui3-u-2-3</code></td>
66
 
                                    <td>Fills 2/3 of available width.</td>
67
 
                                </tr>
68
 
                                <tr>
69
 
                                    <td><code>.yui3-u-1-4</code></td>
70
 
                                    <td>Fills 1/4 of available width.</td>
71
 
                                </tr>
72
 
                                <tr>
73
 
                                    <td><code>.yui3-u-3-4</code></td>
74
 
                                    <td>Fills 3/4 of available width.</td>
75
 
                                </tr>
76
 
                                <tr>
77
 
                                    <td><code>.yui3-u-1-5</code></td>
78
 
                                    <td>Fills 1/5 of available width.</td>
79
 
                                </tr>
80
 
                                <tr>
81
 
                                    <td><code>.yui3-u-2-5</code></td>
82
 
                                    <td>Fills 2/5 of available width.</td>
83
 
                                </tr>
84
 
                                <tr>
85
 
                                    <td><code>.yui3-u-3-5</code></td>
86
 
                                    <td>Fills 3/5 of available width.</td>
87
 
                                </tr>
88
 
                                <tr>
89
 
                                    <td><code>.yui3-u-4-5</code></td>
90
 
                                    <td>Fills 4/5 of available width.</td>
91
 
                                </tr>
92
 
                                <tr>
93
 
                                    <td><code>.yui3-u-1-6</code></td>
94
 
                                    <td>Fills 1/6 of available width.</td>
95
 
                                </tr>
96
 
                                <tr>
97
 
                                    <td><code>.yui3-u-5-6</code></td>
98
 
                                    <td>Fills 5/6 of available width.</td>
99
 
                                </tr>
100
 
                                <tr>
101
 
                                    <td><code>.yui3-u-1-8</code></td>
102
 
                                    <td>Fills 1/8 of available width.</td>
103
 
                                </tr>
104
 
                                <tr>
105
 
                                    <td><code>.yui3-u-3-8</code></td>
106
 
                                    <td>Fills 3/8 of available width.</td>
107
 
                                </tr>
108
 
                                <tr>
109
 
                                    <td><code>.yui3-u-5-8</code></td>
110
 
                                    <td>Fills 5/8 of available width.</td>
111
 
                                </tr>
112
 
                                <tr>
113
 
                                    <td><code>.yui3-u-7-8</code></td>
114
 
                                    <td>Fills 7/8 of available width.</td>
115
 
                                </tr>
116
 
                                <tr>
117
 
                                    <td><code>.yui3-u-1-12</code></td>
118
 
                                    <td>Fills 1/12 of available width.</td>
119
 
                                </tr>
120
 
                                <tr>
121
 
                                    <td><code>.yui3-u-5-12</code></td>
122
 
                                    <td>Fills 5/12 of available width.</td>
123
 
                                </tr>
124
 
                                <tr>
125
 
                                    <td><code>.yui3-u-7-12</code></td>
126
 
                                    <td>Fills 7/12 of available width.</td>
127
 
                                </tr>
128
 
                                <tr>
129
 
                                    <td><code>.yui3-u-11-12</code></td>
130
 
                                    <td>Fills 11/12 of available width.</td>
131
 
                                </tr>
132
 
                                <tr>
133
 
                                    <td><code>.yui3-u-1-24</code></td>
134
 
                                    <td>Fills 1/24 of available width.</td>
135
 
                                </tr>
136
 
                                <tr>
137
 
                                    <td><code>.yui3-u-5-24</code></td>
138
 
                                    <td>Fills 5/24 of available width.</td>
139
 
                                </tr>
140
 
                                <tr>
141
 
                                    <td><code>.yui3-u-7-24</code></td>
142
 
                                    <td>Fills 7/24 of available width.</td>
143
 
                                </tr>
144
 
                                <tr>
145
 
                                    <td><code>.yui3-u-11-24</code></td>
146
 
                                    <td>Fills 11/24 of available width.</td>
147
 
                                </tr>
148
 
                                <tr>
149
 
                                    <td><code>.yui3-u-13-24</code></td>
150
 
                                    <td>Fills 13/24 of available width.</td>
151
 
                                </tr>
152
 
                                <tr>
153
 
                                    <td><code>.yui3-u-17-24</code></td>
154
 
                                    <td>Fills 17/24 of available width.</td>
155
 
                                </tr>
156
 
                                <tr>
157
 
                                    <td><code>.yui3-u-19-24</code></td>
158
 
                                    <td>Fills 19/24 of available width.</td>
159
 
                                </tr>
160
 
                                <tr>
161
 
                                    <td><code>.yui3-u-23-24</code></td>
162
 
                                    <td>Fills 23/24 of available width.</td>
163
 
                                </tr>
164
 
                            </tbody>
165
 
                        </table>        
166
 
                        
167
 
                <h3 id="page_width">Building a Page Template</h3>
168
 
                    
169
 
                <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>
170
 
 
171
 
<pre class="code prettyprint">body {
172
 
    margin: auto; &#x2F;* center in viewport *&#x2F;
173
 
    width: 960px;
174
 
}</pre>
175
 
 
176
 
 
177
 
            <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>
178
 
 
179
 
<pre class="code prettyprint">&lt;head&gt;
180
 
    &lt;style&gt;
181
 
    body {
182
 
        margin: auto; &#x2F;* center in viewport *&#x2F;
183
 
        width: 960px;
184
 
    }
185
 
 
186
 
    &lt;&#x2F;style&gt;
187
 
&lt;&#x2F;head&gt;
188
 
 
189
 
&lt;body&gt;
190
 
    &lt;div class=&quot;yui3-g&quot;&gt;
191
 
        &lt;div class=&quot;yui3-u-5-24&quot;&gt;
192
 
 
193
 
        &lt;&#x2F;div&gt;
194
 
        &lt;div class=&quot;yui3-u-19-24&quot;&gt;
195
 
 
196
 
        &lt;&#x2F;div&gt;
197
 
    &lt;&#x2F;div&gt;
198
 
&lt;&#x2F;body&gt;</pre>
199
 
 
200
 
        <h3 id="pixels">Pixel Units</h3>
201
 
        <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>
202
 
 
203
 
<pre class="code prettyprint">&lt;head&gt;
204
 
    &lt;style&gt;
205
 
    body {
206
 
        margin: auto; &#x2F;* center in viewport *&#x2F;
207
 
        width: 960px;
208
 
    }
209
 
 
210
 
    #nav {
211
 
        width: 200px;
212
 
    }
213
 
 
214
 
    #main {
215
 
        width: 760px;
216
 
    }
217
 
 
218
 
    &lt;&#x2F;style&gt;
219
 
&lt;&#x2F;head&gt;
220
 
 
221
 
&lt;body&gt;
222
 
    &lt;div class=&quot;yui3-g&quot;&gt;
223
 
        &lt;div class=&quot;yui3-u&quot; id=&quot;nav&quot;&gt;
224
 
 
225
 
        &lt;&#x2F;div&gt;
226
 
        &lt;div class=&quot;yui3-u&quot; id=&quot;main&quot;&gt;
227
 
 
228
 
        &lt;&#x2F;div&gt;
229
 
    &lt;&#x2F;div&gt;
230
 
&lt;&#x2F;body&gt;</pre>
231
 
 
232
 
</div>
233
 
        </div>
234
 
 
235
 
        <div id="sidebar" class="yui3-u">
236
 
            
237
 
                <div id="toc" class="sidebox">
238
 
                    <div class="hd">
239
 
                        <h2 class="no-toc">Table of Contents</h2>
240
 
                    </div>
241
 
 
242
 
                    <div class="bd">
243
 
                        <ul class="toc">
244
 
<li>
245
 
<a href="#start">Getting Started</a>
246
 
<ul class="toc">
247
 
<li>
248
 
<a href="#dependencies">Include Dependencies</a>
249
 
</li>
250
 
</ul>
251
 
</li>
252
 
<li>
253
 
<a href="#using">Using YUI CSS Grids</a>
254
 
<ul class="toc">
255
 
<li>
256
 
<a href="#unit-sizes">Unit Sizes</a>
257
 
</li>
258
 
<li>
259
 
<a href="#page_width">Building a Page Template</a>
260
 
</li>
261
 
<li>
262
 
<a href="#pixels">Pixel Units</a>
263
 
</li>
264
 
</ul>
265
 
</li>
266
 
</ul>
267
 
                    </div>
268
 
                </div>
269
 
            
270
 
 
271
 
            
272
 
                <div class="sidebox">
273
 
                    <div class="hd">
274
 
                        <h2 class="no-toc">Examples</h2>
275
 
                    </div>
276
 
 
277
 
                    <div class="bd">
278
 
                        <ul class="examples">
279
 
                            
280
 
                                
281
 
                                    <li data-description="Each unit has a className that provides its percentage width.">
282
 
                                        <a href="cssgrids-units.html">Using Grid Units</a>
283
 
                                    </li>
284
 
                                
285
 
                            
286
 
                                
287
 
                                    <li data-description="This is a template for creating fixed-width layouts.">
288
 
                                        <a href="cssgrids-fixed.html">Fixed Page Template</a>
289
 
                                    </li>
290
 
                                
291
 
                            
292
 
                                
293
 
                                    <li data-description="This is a template for creating fluid layouts.">
294
 
                                        <a href="cssgrids-fluid.html">Fluid Page Template</a>
295
 
                                    </li>
296
 
                                
297
 
                            
298
 
                                
299
 
                                    <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units.">
300
 
                                        <a href="cssgrids-align.html">Aligning Grid Units</a>
301
 
                                    </li>
302
 
                                
303
 
                            
304
 
                                
305
 
                            
306
 
                                
307
 
                            
308
 
                                
309
 
                            
310
 
                                
311
 
                            
312
 
                                
313
 
                            
314
 
                                
315
 
                            
316
 
                                
317
 
                            
318
 
                        </ul>
319
 
                    </div>
320
 
                </div>
321
 
            
322
 
 
323
 
            
324
 
                <div class="sidebox">
325
 
                    <div class="hd">
326
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
327
 
                    </div>
328
 
 
329
 
                    <div class="bd">
330
 
                        <ul class="examples">
331
 
                            
332
 
                                
333
 
                            
334
 
                                
335
 
                            
336
 
                                
337
 
                            
338
 
                                
339
 
                            
340
 
                                
341
 
                                    <li data-description="Creating left navigation using the MenuNav Node Plugin.">
342
 
                                        <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a>
343
 
                                    </li>
344
 
                                
345
 
                            
346
 
                                
347
 
                                    <li data-description="Creating top navigation using the MenuNav Node Plugin">
348
 
                                        <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a>
349
 
                                    </li>
350
 
                                
351
 
                            
352
 
                                
353
 
                                    <li data-description="Creating menu button navigation using the MenuNav Node Plugin">
354
 
                                        <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a>
355
 
                                    </li>
356
 
                                
357
 
                            
358
 
                                
359
 
                                    <li data-description="Creating split button navigation using the MenuNav Node Plugin">
360
 
                                        <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a>
361
 
                                    </li>
362
 
                                
363
 
                            
364
 
                                
365
 
                                    <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin">
366
 
                                        <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a>
367
 
                                    </li>
368
 
                                
369
 
                            
370
 
                                
371
 
                                    <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin">
372
 
                                        <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>
373
 
                                    </li>
374
 
                                
375
 
                            
376
 
                                
377
 
                                    <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr">
378
 
                                        <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>
379
 
                                    </li>
380
 
                                
381
 
                            
382
 
                        </ul>
383
 
                    </div>
384
 
                </div>
385
 
            
386
 
        </div>
387
 
    </div>
388
 
</div>
389
 
 
390
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
391
 
<script>prettyPrint();</script>
392
 
 
393
 
</body>
394
 
</html>