<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name = "viewport" content = "width = device-width">
<link rel="stylesheet" type="text/css" href="../../build/cssnormalize/cssnormalize-min.css">
<link rel="stylesheet" href="../../build/cssgrids-responsive/cssgrids-responsive.css" type="text/css">
<script src="../../build/yui/yui-min.js"></script>
<style>
/*
NATIVE HTML ELEMENT STYLES
*/
body {
font-family: serif;
}
p {
color: #333;
font-size: 1.1em;
}
h3 {
font-size:1.2em;
letter-spacing: -0.05em;
margin-bottom: 10px;
}
h4 {
color: #9B1518;
font: normal 0.5em/1.3 Helvetica, Arial, sans-serif;
letter-spacing: 0.01em;
text-transform: uppercase;
margin-bottom: .4em;
}
/*
MODULE STYLES - CONTENT
The content module is a wrapper class for each column on the site.
We add some padding to act as a gutter between columns.
*/
.content {
padding: 15px;
}
/*
MODULE STYLES - ARTICLE
The article class is applied to every news article on the site.
*/
.article {
border-bottom: 1px solid #ddd;
padding: 0 5px 15px 5px;
}
.article img {
margin-right: 10px;
border-radius: 5px;
}
.article p {
margin-top: 0;
}
/*
MODULE STYLES - RIGHT BAR
The right-bar class is applied to the right-column. This lets
us set specificity for styling those articles differently.
*/
.right-bar .article {
text-align: center;
padding:15px;
}
.right-bar h3 {
color: #333;
font-family: 1em;
font-weight: normal;
margin-top:0.3em;
}
/*
FONT STYLES - RIGHT BAR
The section-header class is applied to the red section headers
for each column.
*/
.section-header {
color: #AA0016;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
margin-bottom:0.2em;
padding-bottom:0.5em;
border-bottom:1px solid #ddd;
margin-top:1em;
font-style: normal;
font-variant: normal;
}
/*
FONT STYLE - PHOTO CREDIT
We are just right-aligning the little photo-credit link here.
*/
.photo-credit {
text-align: right;
}
/*
MEDIA QUERY FOR 767px AND BELOW
On smaller screen sizes, we do the following:
- Make the headline text bigger.
- Collapse the right-column articles so that they
become a grid instead of being stacked. We do this
by setting width: 30%; display: inline-block;
*/
@media (max-width: 767px) {
.headline h3 {
font-size:180%;
}
.right-bar .article {
display:inline-block;
width:30%;
padding:0;
border:none;
}
}
</style>
</head>
<body>
<div class="yui3-g-r">
<div class="yui3-u-1-2 left-bar">
<div class="yui3-u-1 content">
<div class='yui3-u-1 headline article'>
<img src="http://farm9.staticflickr.com/8391/8544074541_29a2c7a292_b_d.jpg">
<small class="yui3-u-1 photo-credit">
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>
</small>
<h3 class='yui3-u-1'>Lorem ipsum dolor sit amet</h3>
<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>
</div>
<div class='yui3-u-1 article'>
<div class='yui3-g'>
<h3 class='yui3-u-1'>Aenean tempor, felis id bibendum consectetur.</h3>
<img class='yui3-u' src="http://placehold.it/90x90">
<div class='yui3-u-2-3'>
<p>Donec aliquam interdum massa, ac vehicula augue pellentesque eget. Aenean tempor, felis id bibendum consectetur, purus urna ultricies orci.</p>
</div>
</div>
</div>
<div class='yui3-u-1 article'>
<div class='yui3-g'>
<h3 class='yui3-u-1'>Fusce non nibh mi.</h3>
<img class='yui3-u' src="http://placehold.it/90x90">
<div class='yui3-u-2-3'>
<p>Proin vitae condimentum elit. Sed mattis consequat mi vitae ornare. Nam bibendum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-1-5 center-bar">
<div class='yui3-u-1 content'>
<h1 class='yui3-u-1 section-header'>Latest News</h1>
<div class='yui3-u-1 article'>
<h2>Curabitur egestas velit nec purus</h2>
<p>uspendisse euismod facilisis pharetra. Suspendisse dignissim eros nec neque aliquam sit.</p>
</div>
<div class='yui3-u-1 article'>
<h2>Nam eget massa ut nibh porta.</h2>
<p>Etiam urna magna, porta id consequat at, aliquam nec nisi. Donec luctus libero vitae diam convallis in aliquet mauris tempor.</p>
</div>
<div class='yui3-u-1 article'>
<h2>Powerball jackpot up to $550m</h2>
<p>The fast-growing jackpot had been $450 million as recently as Tuesday morning.</p>
</div>
</div>
</div>
<div class="yui3-u-1-4 right-bar">
<div class='yui3-u-1 content'>
<h1 class='yui3-u-1 section-header'>Exclusives</h1>
<div class='yui3-u-1 article'>
<img src="http://placehold.it/160x160">
<h4>John Smith</h4>
<h3>Nunc in ipsum nec massa?</h3>
</div>
<div class='yui3-u-1 article'>
<img src="http://placehold.it/160x160">
<h3>Duis dignissim augue vel lacus tincidunt</h3>
</div>
<div class='yui3-u-1 article'>
<img src="http://placehold.it/160x160">
<h3>Hed scelerisque eros a sem dictum</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/cssgrids',
name: 'cssgrids-magazine',
title: 'CSS Grids Responsive Magazine Example',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('cssgrids-units');
YUI.Env.Tests.examples.push('cssgrids-fixed');
YUI.Env.Tests.examples.push('cssgrids-fluid');
YUI.Env.Tests.examples.push('cssgrids-align');
YUI.Env.Tests.examples.push('cssgrids-magazine');
YUI.Env.Tests.examples.push('menunav-leftnav');
YUI.Env.Tests.examples.push('node-menunav-2');
YUI.Env.Tests.examples.push('node-menunav-3');
YUI.Env.Tests.examples.push('node-menunav-4');
YUI.Env.Tests.examples.push('node-menunav-5');
YUI.Env.Tests.examples.push('node-menunav-6');
YUI.Env.Tests.examples.push('node-menunav-7');
</script>
<script src="../assets/yui/test-runner.js"></script>