← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/cssgrids/cssgrids-units.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/cssgrids/cssgrids-units.html
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=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Using Grid Units</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><div class="intro">
23
 
    <p>Creating a layout using grids requires a <code>yui3-g</code> container 
24
 
    and any number of <code>yui3-u-*</code> units.  
25
 
    To create a layout that splits the available width into 2 equal parts,
26
 
    use two <code>yui3-u-1-2</code> units. The last two numbers of the class name, "1-2", represent 
27
 
    1/2.</p>
28
 
 
29
 
</div>
30
 
 
31
 
<div class="example newwindow">
32
 
    <a href="cssgrids-units-example.html" target="_blank" class="button">
33
 
        View Example in New Window
34
 
    </a>
35
 
</div>
36
 
 
37
 
<h4>Note</h4>
38
 
<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>
39
 
<h3>Basic Markup Structure</h3>
40
 
 
41
 
<pre class="code prettyprint">&lt;div class=&quot;yui3-g&quot;&gt;
42
 
    &lt;div class=&quot;yui3-u-1-2&quot;&gt;&lt;&#x2F;div&gt;
43
 
    &lt;div class=&quot;yui3-u-1-2&quot;&gt;&lt;&#x2F;div&gt;
44
 
&lt;&#x2F;div&gt;</pre>
45
 
 
46
 
 
47
 
<h3>Provide a Content Container</h3>
48
 
<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>
49
 
 
50
 
<pre class="code prettyprint">&lt;div class=&quot;yui3-g&quot;&gt;
51
 
    &lt;div class=&quot;yui3-u-1-2&quot;&gt;
52
 
        &lt;div class=&quot;content&quot;&gt;
53
 
 
54
 
        &lt;&#x2F;div&gt;
55
 
    &lt;&#x2F;div&gt;
56
 
    &lt;div class=&quot;yui3-u-1-2&quot;&gt;
57
 
        &lt;div class=&quot;content&quot;&gt;
58
 
 
59
 
        &lt;&#x2F;div&gt;
60
 
    &lt;&#x2F;div&gt;
61
 
&lt;&#x2F;div&gt;</pre>
62
 
 
63
 
 
64
 
<h3>Adding a Gutter</h3>
65
 
<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>
66
 
 
67
 
<pre class="code prettyprint">&lt;style&gt;
68
 
.yui3-g .content {
69
 
    border: 2px solid #000;
70
 
    margin-right:10px; &#x2F;* &quot;column&quot; gutters *&#x2F;
71
 
    padding: 1em;
72
 
}
73
 
&lt;&#x2F;style&gt;</pre>
74
 
 
75
 
 
76
 
<h3>Available Units</h3>
77
 
 
78
 
<table class="auto">
79
 
        <thead>
80
 
                <tr class="odd">
81
 
                        <th>Class</th>
82
 
                        <th>Description</th>
83
 
                </tr>
84
 
        </thead>
85
 
        <tbody>
86
 
                <tr>
87
 
                        <td><code>.yui3-u</code></td>
88
 
                        <td>shrinks to fit content (unless given an explicit size)</td>
89
 
                </tr>
90
 
                <tr class="odd">
91
 
                        <td><code>.yui3-u-1</code></td>
92
 
                        <td>fills entire width of container</td>
93
 
                </tr>
94
 
                <tr>
95
 
                        <td><code>.yui3-u-1-2</code></td>
96
 
                        <td>fills 1/2 the container</td>
97
 
                </tr>
98
 
                <tr class="odd">
99
 
                        <td><code>.yui3-u-1-3</code></td>
100
 
                        <td>fills 1/3 the container</td>
101
 
                </tr>
102
 
                <tr>
103
 
                        <td><code>.yui3-u-2-3</code></td>
104
 
                        <td>fills 2/3 the container</td>
105
 
                </tr>
106
 
                <tr class="odd">
107
 
                        <td><code>.yui3-u-1-4</code></td>
108
 
                        <td>fills 1/4 the container</td>
109
 
                </tr>
110
 
                <tr>
111
 
                        <td><code>.yui3-u-3-4</code></td>
112
 
                        <td>fills 3/4 the container</td>
113
 
                </tr>
114
 
                <tr class="odd">
115
 
                        <td><code>.yui3-u-1-5</code></td>
116
 
                        <td>fills 1/5 the container</td>
117
 
                </tr>
118
 
                <tr>
119
 
                        <td><code>.yui3-u-2-5</code></td>
120
 
                        <td>fills 2/5 the container</td>
121
 
                </tr>
122
 
                <tr class="odd">
123
 
                        <td><code>.yui3-u-3-5</code></td>
124
 
                        <td>fills 3/5 the container</td>
125
 
                </tr>
126
 
                <tr>
127
 
                        <td><code>.yui3-u-4-5</code></td>
128
 
                        <td>fills 4/5 the container</td>
129
 
                </tr>
130
 
                <tr class="odd">
131
 
                        <td><code>.yui3-u-1-6</code></td>
132
 
                        <td>fills 1/6 the container</td>
133
 
                </tr>
134
 
                <tr>
135
 
                        <td><code>.yui3-u-5-6</code></td>
136
 
                        <td>fills 5/6 the container</td>
137
 
                </tr>
138
 
        </tbody>
139
 
</table>
140
 
</div>
141
 
            </div>
142
 
        </div>
143
 
 
144
 
        <div class="yui3-u-1-4">
145
 
            <div class="sidebar">
146
 
                
147
 
 
148
 
                
149
 
                    <div class="sidebox">
150
 
                        <div class="hd">
151
 
                            <h2 class="no-toc">Examples</h2>
152
 
                        </div>
153
 
 
154
 
                        <div class="bd">
155
 
                            <ul class="examples">
156
 
                                
157
 
                                    
158
 
                                        <li data-description="Each unit has a className that provides its percentage width.">
159
 
                                            <a href="cssgrids-units.html">Using Grid Units</a>
160
 
                                        </li>
161
 
                                    
162
 
                                
163
 
                                    
164
 
                                        <li data-description="This is a template for creating fixed-width layouts.">
165
 
                                            <a href="cssgrids-fixed.html">Fixed Page Template</a>
166
 
                                        </li>
167
 
                                    
168
 
                                
169
 
                                    
170
 
                                        <li data-description="This is a template for creating fluid layouts.">
171
 
                                            <a href="cssgrids-fluid.html">Fluid Page Template</a>
172
 
                                        </li>
173
 
                                    
174
 
                                
175
 
                                    
176
 
                                        <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units.">
177
 
                                            <a href="cssgrids-align.html">Aligning Grid Units</a>
178
 
                                        </li>
179
 
                                    
180
 
                                
181
 
                                    
182
 
                                
183
 
                                    
184
 
                                
185
 
                                    
186
 
                                
187
 
                                    
188
 
                                
189
 
                                    
190
 
                                
191
 
                                    
192
 
                                
193
 
                                    
194
 
                                
195
 
                            </ul>
196
 
                        </div>
197
 
                    </div>
198
 
                
199
 
 
200
 
                
201
 
                    <div class="sidebox">
202
 
                        <div class="hd">
203
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
204
 
                        </div>
205
 
 
206
 
                        <div class="bd">
207
 
                            <ul class="examples">
208
 
                                
209
 
                                    
210
 
                                
211
 
                                    
212
 
                                
213
 
                                    
214
 
                                
215
 
                                    
216
 
                                
217
 
                                    
218
 
                                        <li data-description="Creating left navigation using the MenuNav Node Plugin.">
219
 
                                            <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a>
220
 
                                        </li>
221
 
                                    
222
 
                                
223
 
                                    
224
 
                                        <li data-description="Creating top navigation using the MenuNav Node Plugin">
225
 
                                            <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a>
226
 
                                        </li>
227
 
                                    
228
 
                                
229
 
                                    
230
 
                                        <li data-description="Creating menu button navigation using the MenuNav Node Plugin">
231
 
                                            <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a>
232
 
                                        </li>
233
 
                                    
234
 
                                
235
 
                                    
236
 
                                        <li data-description="Creating split button navigation using the MenuNav Node Plugin">
237
 
                                            <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a>
238
 
                                        </li>
239
 
                                    
240
 
                                
241
 
                                    
242
 
                                        <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin">
243
 
                                            <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a>
244
 
                                        </li>
245
 
                                    
246
 
                                
247
 
                                    
248
 
                                        <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin">
249
 
                                            <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>
250
 
                                        </li>
251
 
                                    
252
 
                                
253
 
                                    
254
 
                                        <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr">
255
 
                                            <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>
256
 
                                        </li>
257
 
                                    
258
 
                                
259
 
                            </ul>
260
 
                        </div>
261
 
                    </div>
262
 
                
263
 
            </div>
264
 
        </div>
265
 
    </div>
266
 
</div>
267
 
 
268
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
269
 
<script>prettyPrint();</script>
270
 
 
271
 
</body>
272
 
</html>