Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'live-docs' into dev-master

  • Loading branch information...
commit b345a1e47f0e5f35b31e76468510607ac55e91de 2 parents 6d99bc6 + dfb8cbf
@ericf ericf authored
Showing with 105 additions and 62 deletions.
  1. +105 −62 src/cssgrids/docs/partials/cssgrids-magazine-source.mustache
View
167 src/cssgrids/docs/partials/cssgrids-magazine-source.mustache
@@ -1,40 +1,22 @@
<!DOCTYPE html>
-
<html>
<head>
<meta charset='utf-8'>
<meta name = "viewport" content = "width = device-width">
- <link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
+ <link rel="stylesheet" type="text/css" href="{{yuiBuildUrl}}/cssnormalize/cssnormalize-min.css">
<link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids-responsive/cssgrids-responsive.css" type="text/css">
<script src="{{yuiSeedUrl}}"></script>
<style>
+ /*
+
+ NATIVE HTML ELEMENT STYLES
+
+ */
+
body {
font-family: serif;
}
- .header {
- font-family: sans-serif;
- background: black;
- min-height: 150px;
- margin: 0;
- color:white;
- padding: 30px 20px;
- }
- .header h2 {
- font-weight:300;
- color: #666;
- margin:0;
- font-family: sans-serif;
- }
-
- .blurb {
- font-family: sans-serif;
- border-bottom:1px solid #ccc;
- }
- .blurb p {
- line-height: 1.6em;
- font-size: 1em;
- }
p {
color: #333;
@@ -54,30 +36,68 @@
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;
+ }
- .floatLeft {
- float:left;
- margin: 25px 10px 3px 0;
- }
+ .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;
- }
+ .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;
@@ -90,11 +110,31 @@
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) {
- .header {
- text-align: center;
- }
.headline h3 {
font-size:180%;
@@ -106,6 +146,7 @@
padding:0;
border:none;
}
+
}
</style>
</head>
@@ -115,17 +156,20 @@
<div class="yui3-u-1 content">
<div class='yui3-u-1 headline article'>
- <img src="http://c.o0bg.com/rf/image_585w/Boston/2011-2020/2012/11/19/BostonGlobe.com/Lifestyle/Images/Credit_Hilda_Grahnat.jpg">
- <h3 class='yui3-u-1'>The unstyled look of hipster food magazines</h3>
- <p>The latest trendy food and lifestyle magazines are driven by a desire to exist outside the mainstream food world and all that goes with it.</p>
+ <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'>A free monkey will make every child happy</h3>
- <img class='floatLeft' src="http://c.o0bg.com/rf/image_90x90/Boston/2011-2020/2012/11/28/BostonGlobe.com/EditorialOpinion/Images/jacoby-280.jpg">
- <div class='yui3-u-1'>
- <p>What children need is not more education, but the fun and challenge of raising their very own pet monkey.</p>
+ <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>
@@ -133,10 +177,10 @@
<div class='yui3-u-1 article'>
<div class='yui3-g'>
- <h3 class='yui3-u'>Boston's last great unsolved mystery</h3>
- <img class='floatLeft' src="http://c.o0bg.com/rf/image_90x90/Boston/2011-2020/2012/11/16/BostonGlobe.com/Arts/Images/ryan_gardner-museum14_trave-1399.jpg">
- <div class='yui3-u-1'>
- <p>In 1990, Boston’s Isabella Stewart Gardner Museum was robbed of 13 works of art. In this special section, delve into the Globe’s re-examination of the case.</p>
+ <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>
@@ -147,12 +191,12 @@
<div class='yui3-u-1 content'>
<h1 class='yui3-u-1 section-header'>Latest News</h1>
<div class='yui3-u-1 article'>
- <h2>Health chief cites 'serious lapses' at state drug lab</h2>
- <p>The health secretary said lab management failed to alert the state after discovering a “serious breach of protocol” by a chemist.</p>
+ <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>Patrick addresses controversies on drug lab, hiring</h2>
- <p>Governor Patrick said a former highway safety chief with a bad driving record made his administration look “ridiculous.”</p>
+ <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>
@@ -162,23 +206,22 @@
</div>
<div class="yui3-u-1-4 right-bar">
<div class='yui3-u-1 content'>
- <h1 class='yui3-u-1 section-header'>Globe Exclusives</h1>
+ <h1 class='yui3-u-1 section-header'>Exclusives</h1>
<div class='yui3-u-1 article'>
- <img src="http://c.o0bg.com/rf/image_150x150/Boston/Library/Staff/Caricatures/lehigh.png">
- <h4>Scot Lehigh</h4>
- <h3>End of the Menino era?</h3>
+ <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://c.o0bg.com/rf/image_150x150/Boston/2011-2020/2012/11/28/BostonGlobe.com/Business/Images/Suffolk%20Classroom%20Building--150x150.jpg">
- <h3>Suffolk shifts core of campus downtown</h3>
+ <img src="http://placehold.it/160x160">
+ <h3>Duis dignissim augue vel lacus tincidunt</h3>
</div>
<div class='yui3-u-1 article'>
- <img src="http://c.o0bg.com/rf/image_150x150/Boston/2011-2020/2011/12/08/BostonGlobe.com/Metro/Images/GlobeSantaLogoNew--150x150.jpg">
- <h3>How to donate to Globe Santa</h3>
+ <img src="http://placehold.it/160x160">
+ <h3>Hed scelerisque eros a sem dictum</h3>
</div>
</div>
</div>
</div>
-
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.