1 /* |
|
2 * Skeleton V1.2 |
|
3 * Copyright 2011, Dave Gamache |
|
4 * www.getskeleton.com |
|
5 * Free to use under the MIT license. |
|
6 * http://www.opensource.org/licenses/mit-license.php |
|
7 * 6/20/2012 |
|
8 */ |
|
9 |
|
10 |
|
11 /* Table of Contents |
|
12 ================================================== |
|
13 #Base 960 Grid |
|
14 #Tablet (Portrait) |
|
15 #Mobile (Portrait) |
|
16 #Mobile (Landscape) |
|
17 #Clearing */ |
|
18 |
|
19 |
|
20 |
|
21 /* #Base 960 Grid |
|
22 ================================================== */ |
|
23 |
|
24 .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } |
|
25 .container .column, |
|
26 .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } |
|
27 .row { margin-bottom: 20px; } |
|
28 |
|
29 /* Nested Column Classes */ |
|
30 .column.alpha, .columns.alpha { margin-left: 0; } |
|
31 .column.omega, .columns.omega { margin-right: 0; } |
|
32 |
|
33 /* Base Grid */ |
|
34 .container .one.column, |
|
35 .container .one.columns { width: 40px; } |
|
36 .container .two.columns { width: 100px; } |
|
37 .container .three.columns { width: 160px; } |
|
38 .container .four.columns { width: 220px; } |
|
39 .container .five.columns { width: 280px; } |
|
40 .container .six.columns { width: 340px; } |
|
41 .container .seven.columns { width: 400px; } |
|
42 .container .eight.columns { width: 460px; } |
|
43 .container .nine.columns { width: 520px; } |
|
44 .container .ten.columns { width: 580px; } |
|
45 .container .eleven.columns { width: 640px; } |
|
46 .container .twelve.columns { width: 700px; } |
|
47 .container .thirteen.columns { width: 760px; } |
|
48 .container .fourteen.columns { width: 820px; } |
|
49 .container .fifteen.columns { width: 880px; } |
|
50 .container .sixteen.columns { width: 940px; } |
|
51 |
|
52 .container .one-third.column { width: 300px; } |
|
53 .container .two-thirds.column { width: 620px; } |
|
54 |
|
55 /* Offsets */ |
|
56 .container .offset-by-one { padding-left: 60px; } |
|
57 .container .offset-by-two { padding-left: 120px; } |
|
58 .container .offset-by-three { padding-left: 180px; } |
|
59 .container .offset-by-four { padding-left: 240px; } |
|
60 .container .offset-by-five { padding-left: 300px; } |
|
61 .container .offset-by-six { padding-left: 360px; } |
|
62 .container .offset-by-seven { padding-left: 420px; } |
|
63 .container .offset-by-eight { padding-left: 480px; } |
|
64 .container .offset-by-nine { padding-left: 540px; } |
|
65 .container .offset-by-ten { padding-left: 600px; } |
|
66 .container .offset-by-eleven { padding-left: 660px; } |
|
67 .container .offset-by-twelve { padding-left: 720px; } |
|
68 .container .offset-by-thirteen { padding-left: 780px; } |
|
69 .container .offset-by-fourteen { padding-left: 840px; } |
|
70 .container .offset-by-fifteen { padding-left: 900px; } |
|
71 |
|
72 |
|
73 |
|
74 /* #Tablet (Portrait) |
|
75 ================================================== */ |
|
76 |
|
77 /* Note: Design for a width of 768px */ |
|
78 |
|
79 @media only screen and (min-width: 768px) and (max-width: 959px) { |
|
80 .container { width: 768px; } |
|
81 .container .column, |
|
82 .container .columns { margin-left: 10px; margin-right: 10px; } |
|
83 .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } |
|
84 .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } |
|
85 .alpha.omega { margin-left: 0; margin-right: 0; } |
|
86 |
|
87 .container .one.column, |
|
88 .container .one.columns { width: 28px; } |
|
89 .container .two.columns { width: 76px; } |
|
90 .container .three.columns { width: 124px; } |
|
91 .container .four.columns { width: 172px; } |
|
92 .container .five.columns { width: 220px; } |
|
93 .container .six.columns { width: 268px; } |
|
94 .container .seven.columns { width: 316px; } |
|
95 .container .eight.columns { width: 364px; } |
|
96 .container .nine.columns { width: 412px; } |
|
97 .container .ten.columns { width: 460px; } |
|
98 .container .eleven.columns { width: 508px; } |
|
99 .container .twelve.columns { width: 556px; } |
|
100 .container .thirteen.columns { width: 604px; } |
|
101 .container .fourteen.columns { width: 652px; } |
|
102 .container .fifteen.columns { width: 700px; } |
|
103 .container .sixteen.columns { width: 748px; } |
|
104 |
|
105 .container .one-third.column { width: 236px; } |
|
106 .container .two-thirds.column { width: 492px; } |
|
107 |
|
108 /* Offsets */ |
|
109 .container .offset-by-one { padding-left: 48px; } |
|
110 .container .offset-by-two { padding-left: 96px; } |
|
111 .container .offset-by-three { padding-left: 144px; } |
|
112 .container .offset-by-four { padding-left: 192px; } |
|
113 .container .offset-by-five { padding-left: 240px; } |
|
114 .container .offset-by-six { padding-left: 288px; } |
|
115 .container .offset-by-seven { padding-left: 336px; } |
|
116 .container .offset-by-eight { padding-left: 384px; } |
|
117 .container .offset-by-nine { padding-left: 432px; } |
|
118 .container .offset-by-ten { padding-left: 480px; } |
|
119 .container .offset-by-eleven { padding-left: 528px; } |
|
120 .container .offset-by-twelve { padding-left: 576px; } |
|
121 .container .offset-by-thirteen { padding-left: 624px; } |
|
122 .container .offset-by-fourteen { padding-left: 672px; } |
|
123 .container .offset-by-fifteen { padding-left: 720px; } |
|
124 } |
|
125 |
|
126 |
|
127 /* #Mobile (Portrait) |
|
128 ================================================== */ |
|
129 |
|
130 /* Note: Design for a width of 320px */ |
|
131 |
|
132 @media only screen and (max-width: 767px) { |
|
133 .container { width: 300px; } |
|
134 .container .columns, |
|
135 .container .column { margin: 0; } |
|
136 |
|
137 .container .one.column, |
|
138 .container .one.columns, |
|
139 .container .two.columns, |
|
140 .container .three.columns, |
|
141 .container .four.columns, |
|
142 .container .five.columns, |
|
143 .container .six.columns, |
|
144 .container .seven.columns, |
|
145 .container .eight.columns, |
|
146 .container .nine.columns, |
|
147 .container .ten.columns, |
|
148 .container .eleven.columns, |
|
149 .container .twelve.columns, |
|
150 .container .thirteen.columns, |
|
151 .container .fourteen.columns, |
|
152 .container .fifteen.columns, |
|
153 .container .sixteen.columns, |
|
154 .container .one-third.column, |
|
155 .container .two-thirds.column { width: 300px; } |
|
156 |
|
157 /* Offsets */ |
|
158 .container .offset-by-one, |
|
159 .container .offset-by-two, |
|
160 .container .offset-by-three, |
|
161 .container .offset-by-four, |
|
162 .container .offset-by-five, |
|
163 .container .offset-by-six, |
|
164 .container .offset-by-seven, |
|
165 .container .offset-by-eight, |
|
166 .container .offset-by-nine, |
|
167 .container .offset-by-ten, |
|
168 .container .offset-by-eleven, |
|
169 .container .offset-by-twelve, |
|
170 .container .offset-by-thirteen, |
|
171 .container .offset-by-fourteen, |
|
172 .container .offset-by-fifteen { padding-left: 0; } |
|
173 |
|
174 } |
|
175 |
|
176 |
|
177 /* #Mobile (Landscape) |
|
178 ================================================== */ |
|
179 |
|
180 /* Note: Design for a width of 480px */ |
|
181 |
|
182 @media only screen and (min-width: 480px) and (max-width: 767px) { |
|
183 .container { width: 420px; } |
|
184 .container .columns, |
|
185 .container .column { margin: 0; } |
|
186 |
|
187 .container .one.column, |
|
188 .container .one.columns, |
|
189 .container .two.columns, |
|
190 .container .three.columns, |
|
191 .container .four.columns, |
|
192 .container .five.columns, |
|
193 .container .six.columns, |
|
194 .container .seven.columns, |
|
195 .container .eight.columns, |
|
196 .container .nine.columns, |
|
197 .container .ten.columns, |
|
198 .container .eleven.columns, |
|
199 .container .twelve.columns, |
|
200 .container .thirteen.columns, |
|
201 .container .fourteen.columns, |
|
202 .container .fifteen.columns, |
|
203 .container .sixteen.columns, |
|
204 .container .one-third.column, |
|
205 .container .two-thirds.column { width: 420px; } |
|
206 } |
|
207 |
|
208 |
|
209 /* #Clearing |
|
210 ================================================== */ |
|
211 |
|
212 /* Self Clearing Goodness */ |
|
213 .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } |
|
214 |
|
215 /* Use clearfix class on parent to clear nested columns, |
|
216 or wrap each row of columns in a <div class="row"> */ |
|
217 .clearfix:before, |
|
218 .clearfix:after, |
|
219 .row:before, |
|
220 .row:after { |
|
221 content: '\0020'; |
|
222 display: block; |
|
223 overflow: hidden; |
|
224 visibility: hidden; |
|
225 width: 0; |
|
226 height: 0; } |
|
227 .row:after, |
|
228 .clearfix:after { |
|
229 clear: both; } |
|
230 .row, |
|
231 .clearfix { |
|
232 zoom: 1; } |
|
233 |
|
234 /* You can also use a <br class="clear" /> to clear columns */ |
|
235 .clear { |
|
236 clear: both; |
|
237 display: block; |
|
238 overflow: hidden; |
|
239 visibility: hidden; |
|
240 width: 0; |
|
241 height: 0; |
|
242 } |
|