|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta charset='utf-8'> |
|
5 <meta name = "viewport" content = "width = device-width"> |
|
6 <link rel="stylesheet" type="text/css" href="../../build/cssnormalize/cssnormalize-min.css"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids-responsive/cssgrids-responsive.css" type="text/css"> |
|
8 <script src="../../build/yui/yui-min.js"></script> |
|
9 <style> |
|
10 |
|
11 /* |
|
12 |
|
13 NATIVE HTML ELEMENT STYLES |
|
14 |
|
15 */ |
|
16 |
|
17 body { |
|
18 font-family: serif; |
|
19 } |
|
20 |
|
21 p { |
|
22 color: #333; |
|
23 font-size: 1.1em; |
|
24 } |
|
25 |
|
26 h3 { |
|
27 font-size:1.2em; |
|
28 letter-spacing: -0.05em; |
|
29 margin-bottom: 10px; |
|
30 } |
|
31 |
|
32 h4 { |
|
33 color: #9B1518; |
|
34 font: normal 0.5em/1.3 Helvetica, Arial, sans-serif; |
|
35 letter-spacing: 0.01em; |
|
36 text-transform: uppercase; |
|
37 margin-bottom: .4em; |
|
38 } |
|
39 |
|
40 /* |
|
41 |
|
42 MODULE STYLES - CONTENT |
|
43 The content module is a wrapper class for each column on the site. |
|
44 We add some padding to act as a gutter between columns. |
|
45 |
|
46 */ |
|
47 |
|
48 .content { |
|
49 padding: 15px; |
|
50 } |
|
51 |
|
52 /* |
|
53 |
|
54 MODULE STYLES - ARTICLE |
|
55 The article class is applied to every news article on the site. |
|
56 |
|
57 */ |
|
58 |
|
59 .article { |
|
60 border-bottom: 1px solid #ddd; |
|
61 padding: 0 5px 15px 5px; |
|
62 } |
|
63 .article img { |
|
64 margin-right: 10px; |
|
65 border-radius: 5px; |
|
66 } |
|
67 |
|
68 .article p { |
|
69 margin-top: 0; |
|
70 } |
|
71 |
|
72 |
|
73 /* |
|
74 |
|
75 MODULE STYLES - RIGHT BAR |
|
76 The right-bar class is applied to the right-column. This lets |
|
77 us set specificity for styling those articles differently. |
|
78 |
|
79 */ |
|
80 |
|
81 .right-bar .article { |
|
82 text-align: center; |
|
83 padding:15px; |
|
84 } |
|
85 .right-bar h3 { |
|
86 color: #333; |
|
87 font-family: 1em; |
|
88 font-weight: normal; |
|
89 margin-top:0.3em; |
|
90 } |
|
91 |
|
92 |
|
93 /* |
|
94 |
|
95 FONT STYLES - RIGHT BAR |
|
96 The section-header class is applied to the red section headers |
|
97 for each column. |
|
98 |
|
99 */ |
|
100 |
|
101 .section-header { |
|
102 color: #AA0016; |
|
103 font-family: Arial, Helvetica, sans-serif; |
|
104 font-size: 1.3em; |
|
105 margin-bottom:0.2em; |
|
106 padding-bottom:0.5em; |
|
107 border-bottom:1px solid #ddd; |
|
108 margin-top:1em; |
|
109 font-style: normal; |
|
110 font-variant: normal; |
|
111 } |
|
112 |
|
113 /* |
|
114 |
|
115 FONT STYLE - PHOTO CREDIT |
|
116 We are just right-aligning the little photo-credit link here. |
|
117 |
|
118 */ |
|
119 .photo-credit { |
|
120 text-align: right; |
|
121 } |
|
122 |
|
123 |
|
124 |
|
125 /* |
|
126 |
|
127 MEDIA QUERY FOR 767px AND BELOW |
|
128 On smaller screen sizes, we do the following: |
|
129 |
|
130 - Make the headline text bigger. |
|
131 - Collapse the right-column articles so that they |
|
132 become a grid instead of being stacked. We do this |
|
133 by setting width: 30%; display: inline-block; |
|
134 |
|
135 */ |
|
136 @media (max-width: 767px) { |
|
137 |
|
138 |
|
139 .headline h3 { |
|
140 font-size:180%; |
|
141 } |
|
142 |
|
143 .right-bar .article { |
|
144 display:inline-block; |
|
145 width:30%; |
|
146 padding:0; |
|
147 border:none; |
|
148 } |
|
149 |
|
150 } |
|
151 </style> |
|
152 </head> |
|
153 <body> |
|
154 <div class="yui3-g-r"> |
|
155 <div class="yui3-u-1-2 left-bar"> |
|
156 <div class="yui3-u-1 content"> |
|
157 |
|
158 <div class='yui3-u-1 headline article'> |
|
159 <img src="http://farm9.staticflickr.com/8391/8544074541_29a2c7a292_b_d.jpg"> |
|
160 <small class="yui3-u-1 photo-credit"> |
|
161 Photo Credit: <a href="http://www.flickr.com/photos/37010090@N04/8544074541/">Sprengben</a> /<a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a> |
|
162 </small> |
|
163 <h3 class='yui3-u-1'>Lorem ipsum dolor sit amet</h3> |
|
164 <p>Aliquam viverra, ipsum vitae sollicitudin posuere, lacus odio tincidunt nisi, ac tristique ante massa ut libero. Aliquam id nunc dui, in pretium turpis.</p> |
|
165 </div> |
|
166 |
|
167 <div class='yui3-u-1 article'> |
|
168 <div class='yui3-g'> |
|
169 <h3 class='yui3-u-1'>Aenean tempor, felis id bibendum consectetur.</h3> |
|
170 <img class='yui3-u' src="http://placehold.it/90x90"> |
|
171 <div class='yui3-u-2-3'> |
|
172 <p>Donec aliquam interdum massa, ac vehicula augue pellentesque eget. Aenean tempor, felis id bibendum consectetur, purus urna ultricies orci.</p> |
|
173 </div> |
|
174 </div> |
|
175 </div> |
|
176 |
|
177 |
|
178 <div class='yui3-u-1 article'> |
|
179 <div class='yui3-g'> |
|
180 <h3 class='yui3-u-1'>Fusce non nibh mi.</h3> |
|
181 <img class='yui3-u' src="http://placehold.it/90x90"> |
|
182 <div class='yui3-u-2-3'> |
|
183 <p>Proin vitae condimentum elit. Sed mattis consequat mi vitae ornare. Nam bibendum.</p> |
|
184 </div> |
|
185 </div> |
|
186 </div> |
|
187 |
|
188 </div> |
|
189 </div> |
|
190 <div class="yui3-u-1-5 center-bar"> |
|
191 <div class='yui3-u-1 content'> |
|
192 <h1 class='yui3-u-1 section-header'>Latest News</h1> |
|
193 <div class='yui3-u-1 article'> |
|
194 <h2>Curabitur egestas velit nec purus</h2> |
|
195 <p>uspendisse euismod facilisis pharetra. Suspendisse dignissim eros nec neque aliquam sit.</p> |
|
196 </div> |
|
197 <div class='yui3-u-1 article'> |
|
198 <h2>Nam eget massa ut nibh porta.</h2> |
|
199 <p>Etiam urna magna, porta id consequat at, aliquam nec nisi. Donec luctus libero vitae diam convallis in aliquet mauris tempor.</p> |
|
200 </div> |
|
201 <div class='yui3-u-1 article'> |
|
202 <h2>Powerball jackpot up to $550m</h2> |
|
203 <p>The fast-growing jackpot had been $450 million as recently as Tuesday morning.</p> |
|
204 </div> |
|
205 </div> |
|
206 </div> |
|
207 <div class="yui3-u-1-4 right-bar"> |
|
208 <div class='yui3-u-1 content'> |
|
209 <h1 class='yui3-u-1 section-header'>Exclusives</h1> |
|
210 <div class='yui3-u-1 article'> |
|
211 <img src="http://placehold.it/160x160"> |
|
212 <h4>John Smith</h4> |
|
213 <h3>Nunc in ipsum nec massa?</h3> |
|
214 </div> |
|
215 <div class='yui3-u-1 article'> |
|
216 <img src="http://placehold.it/160x160"> |
|
217 <h3>Duis dignissim augue vel lacus tincidunt</h3> |
|
218 </div> |
|
219 <div class='yui3-u-1 article'> |
|
220 <img src="http://placehold.it/160x160"> |
|
221 <h3>Hed scelerisque eros a sem dictum</h3> |
|
222 </div> |
|
223 </div> |
|
224 </div> |
|
225 </div> |
|
226 </body> |
|
227 </html> |
|
228 |
|
229 |
|
230 <script> |
|
231 YUI.Env.Tests = { |
|
232 examples: [], |
|
233 project: '../assets', |
|
234 assets: '../assets/cssgrids', |
|
235 name: 'cssgrids-magazine', |
|
236 title: 'CSS Grids Responsive Magazine Example', |
|
237 newWindow: '', |
|
238 auto: false |
|
239 }; |
|
240 YUI.Env.Tests.examples.push('cssgrids-units'); |
|
241 YUI.Env.Tests.examples.push('cssgrids-fixed'); |
|
242 YUI.Env.Tests.examples.push('cssgrids-fluid'); |
|
243 YUI.Env.Tests.examples.push('cssgrids-align'); |
|
244 YUI.Env.Tests.examples.push('cssgrids-magazine'); |
|
245 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
246 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
247 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
248 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
249 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
250 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
251 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
252 |
|
253 </script> |
|
254 <script src="../assets/yui/test-runner.js"></script> |
|
255 |