forked from StateFarmInsurance/Grid-API
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgrid.htm
More file actions
217 lines (216 loc) · 5.73 KB
/
grid.htm
File metadata and controls
217 lines (216 loc) · 5.73 KB
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
211
212
213
214
215
216
217
<div class="content grid show-grid">
<link href="./css/grid.css" type="text/css" rel="stylesheet">
<section id="Cells">
<div class="page-header">
<h1>Cells</h1>
</div>
<p>
The cells were designed to be dynamic in that since this grid system is not a specific
number of columns, they are dynamically sized according to the number nodes with the
<code>cell</code> class on them.
</p>
<h3>Sample Layout with 3 Cells</h3>
<pre class="prettyprint linenums lang-html">
<div>
<div class="cell">Cell #1</div>
<div class="cell">Cell #2</div>
<div class="cell">Cell #3</div>
</div>
</pre>
<div class="row">
<div class="cell">Cell #1</div>
<div class="cell">Cell #2</div>
<div class="cell">Cell #3</div>
</div>
<br />
</section>
<section id="Containers">
<div class="page-header">
<h1>Containers</h1>
</div>
<p>
The containers were designed using the same concept of the cells but are predefined based on
what I thought would be typical design layouts based on the number of <code>container</code>
classes within it's parent.
</p>
<div class="row">
<h3>Single-Column Layout</h3>
<p>
The single-column layout will span 100% of it's parent.
</p>
<pre class="prettyprint linenums lang-html">
<div>
<div class="container">
...
</div>
</div>
</pre>
<h5>Single Column</h5>
<div class="row">
<div class="container">
</div>
</div>
</div>
<div class="row">
<h3>Two-Column Layout</h3>
<p>
The two-column layout is predefined to be either a 30/70 or a 70/30 split.
By default, if you have two <code>container</code> classes within a parent,
you get the 30/70 split. If you put a <code>main</code> class on the container,
then that container will get 70%.
</p>
</div>
<div class="row">
<h4>30/70 Split</h4>
<pre class="prettyprint linenums lang-html">
<div>
<div class="container">
...
</div>
<div class="container">
...
</div>
</div>
</pre>
<h5>Two Columns (30/70)</h5>
<div class="row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="row">
<h4>70/30 Split</h4>
<pre class="prettyprint linenums lang-html">
<div>
<div class="container main">
...
</div>
<div class="container">
...
</div>
</div>
</pre>
<h5>Two Columns (70/30)</h5>
<div class="row">
<div class="container main"></div>
<div class="container"></div>
</div>
</div>
<div class="row">
<h3>Three-Column Layout</h3>
<p>
The three-column layout will split the containers into a 25/50/25 ratio.
</p>
<pre class="prettyprint linenums lang-html">
<div>
<div class="container">
...
</div>
<div class="container">
...
</div>
<div class="container">
...
</div>
</div>
</pre>
<h5>Three Columns</h5>
<div class="row">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>
</section>
<section id="OffsetCells">
<div class="page-header">
<h1>Offset Cells</h1>
</div>
<p>
To offset cells within the grid, all that is required is to specify a <code>data-offset</code> attribute
<code>div</code> containing the <code>cell</code>.
</p>
<div class="row">
<pre class="prettyprint linenums lang-html">
<div>
<div data-offset="2" class="cell">
Offset Cell
</div>
<div class="cell">
Cell #2
</div>
<div class="cell">
Cell #3
</div>
</div>
</pre>
</div>
<div class="row">
<div data-offset="2" class="cell">Offset Cell</div>
<div class="cell">Cell #2</div>
<div class="cell">Cell #3</div>
</div>
</section>
<section id="DynamicCells">
<div class="page-header">
<h1>Dynamic Cells</h1>
</div>
<p>
The dynamic <code>cell</code> and <code>container</code> nodes are all driven through CSS.
Credit for this technique goes to Andre Luis (discovered) & Lea Verou (refined).
</p>
<div class="row">
<p>
The following selecter will get the first child where it is also the third from the end.
This tells us that there is three (3) cells within the parent. This is also applied
to the containers. Given this, we can set the width to 100 / 3 = 33.33333%. Keep in
mind, the first part of the CSS is only getting the first child. The second part is
finding the same scenario where there are three (3) cells within the parent container,
but then selecting all of it's siblings. This sets the width for the rest of the
cells.
</p>
<pre class="prettyprint linenums lang-html">
.cell:first-child:nth-last-child(3),.cell:first-child:nth-last-child(3) ~ .cell {...}
</pre>
</div>
</section>
<section id="TheGrid">
<div class="page-header">
<h1>The Grid</h1>
</div>
<p>
</p>
<div class="row">
<div class="cell">Cell</div>
</div>
<div class="row">
<div data-offset="2" class="cell">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</section>
</div>