← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/cssgrids/cssgrids-fluid.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: Fluid Page Template</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>Example: Fluid Page Template</h1>
 
15
 
 
16
    
 
17
 
 
18
    <div class="yui3-g">
 
19
        <div id="main" class="yui3-u">
 
20
            <div class="content"><div class="intro">
 
21
    <p>Creating a fluid layout with YUI Grids requires some custom sizing to achieve the fluid effect.</p>
 
22
</div>
 
23
 
 
24
<div class="example newwindow">
 
25
    <a href="cssgrids-fluid-example.html" target="_blank" class="button">
 
26
        View Example in New Window
 
27
    </a>
 
28
</div>
 
29
 
 
30
<p>A fluid grid starts with the basic markup structure of a <code>yui3-g</code> grid and some <code>yui3-u</code> units.
 
31
<h3>Basic Markup Structure</h3>
 
32
 
 
33
<pre class="code prettyprint">&lt;div class=&quot;yui3-g&quot;&gt;
 
34
    &lt;div class=&quot;yui3-u&quot;&gt;&lt;&#x2F;div&gt;
 
35
    &lt;div class=&quot;yui3-u&quot;&gt;&lt;&#x2F;div&gt;
 
36
    &lt;div class=&quot;yui3-u&quot;&gt;&lt;&#x2F;div&gt;
 
37
&lt;&#x2F;div&gt;</pre>
 
38
 
 
39
 
 
40
<p>Creating a fluid layout requires manually fixing the sizes and using a combination of <code>padding</code> and negative margins, so we can stick with the basic <code>yui3-u</code> unit.  Rather than extending the <code>yui3-u</code> unit directly, we will add some unique <code>ID</code>s to our "columns" to deliver the sizing.  The actual <code>ID</code>s are entirely up to you, but by convention should describe your content rather than its presentation or layout.  We will apply an ID to the <code>yui3-g</code> container as well, as this is where the padding will be added to create space for the side columns.</p>
 
41
 
 
42
<pre class="code prettyprint">&lt;div class=&quot;yui3-g&quot; id=&quot;layout&quot;&gt;
 
43
    &lt;div class=&quot;yui3-u&quot; id=&quot;nav&quot;&gt;&lt;&#x2F;div&gt;
 
44
    &lt;div class=&quot;yui3-u&quot; id=&quot;main&quot;&gt;&lt;&#x2F;div&gt;
 
45
    &lt;div class=&quot;yui3-u&quot; id=&quot;extra&quot;&gt;&lt;&#x2F;div&gt;
 
46
&lt;&#x2F;div&gt;</pre>
 
47
 
 
48
 
 
49
<p>We also need to add our custom CSS for the fluid layout.  The container for the units is padded to match the widths of each side column, each side column gets a fixed width and a negative margin that matches the fixed width.  The center column is set to 100% width, filling the container minus its padding.</p>
 
50
 
 
51
<pre class="code prettyprint">&lt;style&gt;
 
52
#layout {
 
53
    padding-left:300px; &#x2F;* &quot;left col&quot; width *&#x2F; 
 
54
    padding-right:150px; &#x2F;* &quot;right col&quot; width *&#x2F;
 
55
}
 
56
 
 
57
#nav {
 
58
    margin-left:-300px; &#x2F;* &quot;left col&quot; width *&#x2F;
 
59
    width:300px;
 
60
}
 
61
 
 
62
#extra {
 
63
    width:150px;
 
64
    margin-right:-150px; &#x2F;* &quot;right col&quot; width *&#x2F;
 
65
}
 
66
 
 
67
#main {
 
68
    width:100%;
 
69
}
 
70
 
 
71
&lt;&#x2F;style&gt;</pre>
 
72
 
 
73
</div>
 
74
        </div>
 
75
 
 
76
        <div id="sidebar" class="yui3-u">
 
77
            
 
78
 
 
79
            
 
80
                <div class="sidebox">
 
81
                    <div class="hd">
 
82
                        <h2 class="no-toc">Examples</h2>
 
83
                    </div>
 
84
 
 
85
                    <div class="bd">
 
86
                        <ul class="examples">
 
87
                            
 
88
                                
 
89
                                    <li data-description="Each unit has a className that provides its percentage width.">
 
90
                                        <a href="cssgrids-units.html">Using Grid Units</a>
 
91
                                    </li>
 
92
                                
 
93
                            
 
94
                                
 
95
                                    <li data-description="This is a template for creating fixed-width layouts.">
 
96
                                        <a href="cssgrids-fixed.html">Fixed Page Template</a>
 
97
                                    </li>
 
98
                                
 
99
                            
 
100
                                
 
101
                                    <li data-description="This is a template for creating fluid layouts.">
 
102
                                        <a href="cssgrids-fluid.html">Fluid Page Template</a>
 
103
                                    </li>
 
104
                                
 
105
                            
 
106
                                
 
107
                                    <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units.">
 
108
                                        <a href="cssgrids-align.html">Aligning Grid Units</a>
 
109
                                    </li>
 
110
                                
 
111
                            
 
112
                                
 
113
                            
 
114
                                
 
115
                            
 
116
                                
 
117
                            
 
118
                                
 
119
                            
 
120
                                
 
121
                            
 
122
                                
 
123
                            
 
124
                                
 
125
                            
 
126
                        </ul>
 
127
                    </div>
 
128
                </div>
 
129
            
 
130
 
 
131
            
 
132
                <div class="sidebox">
 
133
                    <div class="hd">
 
134
                        <h2 class="no-toc">Examples That Use This Component</h2>
 
135
                    </div>
 
136
 
 
137
                    <div class="bd">
 
138
                        <ul class="examples">
 
139
                            
 
140
                                
 
141
                            
 
142
                                
 
143
                            
 
144
                                
 
145
                            
 
146
                                
 
147
                            
 
148
                                
 
149
                                    <li data-description="Creating left navigation using the MenuNav Node Plugin.">
 
150
                                        <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a>
 
151
                                    </li>
 
152
                                
 
153
                            
 
154
                                
 
155
                                    <li data-description="Creating top navigation using the MenuNav Node Plugin">
 
156
                                        <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a>
 
157
                                    </li>
 
158
                                
 
159
                            
 
160
                                
 
161
                                    <li data-description="Creating menu button navigation using the MenuNav Node Plugin">
 
162
                                        <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a>
 
163
                                    </li>
 
164
                                
 
165
                            
 
166
                                
 
167
                                    <li data-description="Creating split button navigation using the MenuNav Node Plugin">
 
168
                                        <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a>
 
169
                                    </li>
 
170
                                
 
171
                            
 
172
                                
 
173
                                    <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin">
 
174
                                        <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a>
 
175
                                    </li>
 
176
                                
 
177
                            
 
178
                                
 
179
                                    <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin">
 
180
                                        <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>
 
181
                                    </li>
 
182
                                
 
183
                            
 
184
                                
 
185
                                    <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr">
 
186
                                        <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>
 
187
                                    </li>
 
188
                                
 
189
                            
 
190
                        </ul>
 
191
                    </div>
 
192
                </div>
 
193
            
 
194
        </div>
 
195
    </div>
 
196
</div>
 
197
 
 
198
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
199
<script>prettyPrint();</script>
 
200
 
 
201
</body>
 
202
</html>