forked from olton/metroui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid.html
210 lines (184 loc) · 8.86 KB
/
grid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="product" content="Metro UI CSS Framework">
<meta name="description" content="Simple responsive css framework">
<meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">
<!-- Metro UI CSS -->
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<!------------------>
<link href="css/docs.css" rel="stylesheet">
<link href="js/prettify/prettify.css" rel="stylesheet">
<!-- Load JavaScript Libraries -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/jquery/jquery.mousewheel.js"></script>
<script src="js/prettify/prettify.js"></script>
<!-- Metro UI CSS JavaScript plugins -->
<script src="js/load-metro.js"></script>
<!-- Local JavaScript -->
<script src="js/docs.js"></script>
<script src="js/github.info.js"></script>
<title>Metro UI CSS : Grid</title>
</head>
<body class="metro">
<header class="bg-dark" data-load="header.html"></header>
<div class="container">
<h1>
<a href="/"><i class="icon-arrow-left-3 fg-darker smaller"></i></a>
Grid<small class="on-right">system</small>
</h1>
<p id="_general" class="description">
The default Metro UI CSS grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without responsive features enabled.
With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport.
Below 767px viewports, the columns become fluid and stack vertically.
</p>
<div class="grid show-grid">
<div class="row">
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
</div>
<div class="row">
<div class="span2">span2</div>
<div class="span3">span3</div>
<div class="span7">span7</div>
</div>
<div class="row">
<div class="span12">span12</div>
</div>
</div>
<h3 id="_basic">Basic grid HTML</h3>
<p>
For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns.
As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
</p>
<pre class="prettyprint linenums">
<div class="grid">
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</div>
</pre>
<p class="description">
Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.
</p>
<h3 id="_offsetting">Offsetting columns</h3>
<p class="description">
Move columns to the right using <code>.offset*</code> classes.
Each class increases the left margin of a column by a whole column.
For example, <code>.offset4</code> moves <code>.span4</code> over four columns.
</p>
<div class="grid show-grid">
<div class="row">
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
<div class="span1">span1</div>
</div>
<div class="row">
<div class="span4">4</div>
<div class="span3 offset2">3 offset 2</div>
</div>
<div class="row">
<div class="span3 offset1">3 offset 1</div>
<div class="span3 offset2">3 offset 2</div>
</div>
<div class="row">
<div class="span6 offset3">6 offset 3</div>
</div>
</div>
<h3 id="_nesting">Nesting columns</h3>
<p>
To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.
Nested rows should include a set of columns that add up to the number of columns of its parent.
</p>
<div class="grid show-grid">
<div class="row">
<div class="span12">
level 1 column
<div class="row">
<div class="span2">level 2</div>
<div class="span6">level 2</div>
<div class="span4">level 2</div>
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
<div class="grid">
<div class="row">
<div class="span9">
level 1 column
<div class="row">
<div class="span6" >level 2 </div>
<div class="span3" >level 2 </div>
</div>
</div>
</div>
</div>
</pre>
<h3>Fluid Grid</h3>
<div class="example">
<div class="grid fluid show-grid">
<div class="row">
<div class="span1">1</div>
<div class="span1">2</div>
<div class="span1">3</div>
<div class="span1">4</div>
<div class="span1">5</div>
<div class="span1">6</div>
<div class="span1">7</div>
<div class="span1">8</div>
<div class="span1">9</div>
<div class="span1">10</div>
<div class="span1">11</div>
<div class="span1">12</div>
</div>
<div class="row">
<div class="span2">1</div>
<div class="span2">2</div>
<div class="span2">3</div>
<div class="span2">4</div>
<div class="span2">5</div>
<div class="span2">6</div>
</div>
<div class="row">
<div class="span2 offset2">2</div>
<div class="span2">3</div>
<div class="span2">4</div>
<div class="span2">5</div>
<div class="span2">6</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
<div class="grid fluid">
...
</div>
</pre>
</div>
<script src="js/hitua.js"></script>
</body>
</html>