Permalink
Browse files

Adding GoldenGrid and 1140px into the mix.

  • Loading branch information...
1 parent dc5e53c commit 40e0dfd07f2e88a071a75d30ab8e419fcd44d6c7 Leo Picado committed Sep 7, 2011
View
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HNR using 1140px</title>
+ <link rel="stylesheet" href="http://developer.yahoo.com/yui/build/reset/reset.css" type="text/css" media="screen" />
+ <link rel="stylesheet" href="http://developer.yahoo.com/yui/build/fonts/fonts.css" type="text/css" media="screen" />
+ <link rel="stylesheet" href="http://developer.yahoo.com/yui/build/base/base.css" type="text/css" media="screen" />
+ <link rel="stylesheet" type="text/css" media="screen" href="andytlr-cssgrid-3ddcd9f/css/1140.css" />
+ <style>
+ html { margin: 0 auto; background: url("blueprint/bg.png") top left;}
+ .header { background: rgba(200,200,200,0.75); }
+ .sidebar { background: rgba(100,100,100,0.75); }
+ .main { background: rgba(150,150,150,0.75); }
+ .footer { background: rgba(0,0,0,0.75); color: #fff; }
+ .footer .twocol ul { margin: 0; border-right: 1px solid #fff; }
+ .footer .twocol ul li { list-style-type: none; margin: 0; text-transform: capitalize; }
+ .footer .twocol ul li:first-child { color:red; font-weight: bold; text-transform: lowercase; }
+ </style>
+</head>
+<body>
+<div class="container">
+ <div class="row">
+ <div class="twelvecol header">
+ <h1>header</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eightcol main">
+ <h2>main content area</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis urna nulla. Aenean feugiat gravida luctus. Fusce convallis ornare purus, ac vehicula nibh aliquam nec. Nam at mi arcu. Nulla egestas lectus at dolor dignissim vulputate cursus ipsum mollis. Nam dolor felis, feugiat quis hendrerit sit amet, pretium ac nibh. In quam libero, hendrerit sit amet scelerisque at, fermentum a sapien. Maecenas rutrum vestibulum neque vel venenatis. Proin commodo faucibus tellus non dapibus. </p>
+ </div>
+ <div class="fourcol sidebar last">
+ <h2>left column</h2>
+ <p>Fusce dapibus ultrices quam, ac convallis neque viverra nec. Pellentesque ut vehicula leo. Nulla leo libero, mattis elementum volutpat et, iaculis in ligula. Cras scelerisque leo et risus egestas pharetra. Suspendisse pellentesque tristique aliquam. Donec faucibus mauris vitae purus aliquam ut convallis ipsum placerat. Donec eu leo neque. </p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="twelvecol footer">
+ <div class="row">
+ <div class="fourcol">
+ <h1>footer:</h1>
+ </div>
+ <div class="eightcol last">
+ <h2>four column layout, two empty columns, faux-centering</h2>
+ </div>
+ </div>
+ <div class="row">
+ <div class="twocol">
+ <ul>
+ <li>span-2 prepend-1 clear</li>
+ <li>sign in</li>
+ <li>where's my stuff</li>
+ <li>buy gift certificates</li>
+ <li>return policy</li>
+ </ul>
+ </div>
+ <div class="twocol">
+ <ul>
+ <li>span-2</li>
+ <li>sign in</li>
+ <li>where's my stuff</li>
+ <li>buy gift certificates</li>
+ <li>return policy</li>
+ </ul>
+ </div>
+ <div class="twocol">
+ <ul>
+ <li>span-2</li>
+ <li>sign in</li>
+ <li>where's my stuff</li>
+ <li>buy gift certificates</li>
+ <li>return policy</li>
+ </ul>
+ </div>
+ <div class="twocol last">
+ <ul>
+ <li>span-2 append-1 last</li>
+ <li>sign in</li>
+ <li>where's my stuff</li>
+ <li>buy gift certificates</li>
+ <li>return policy</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
@@ -0,0 +1 @@
+/1140px CSS Grid.esproj
@@ -0,0 +1,80 @@
+/* CSS Resets */
+
+html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
+
+
+/* The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com */
+
+.container {
+padding-left: 20px;
+padding-right: 20px;
+}
+
+.row {
+width: 100%;
+max-width: 1140px;
+margin: 0 auto;
+overflow: hidden;
+}
+
+.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
+margin-right: 3.8%;
+float: left;
+}
+
+.onecol {
+width: 4.85%;
+}
+
+.twocol {
+width: 13.5%;
+}
+
+.threecol {
+width: 22.15%;
+}
+
+.fourcol {
+width: 30.8%;
+}
+
+.fivecol {
+width: 39.45%;
+}
+
+.sixcol {
+width: 48.1%;
+}
+
+.sevencol {
+width: 56.75%;
+}
+
+.eightcol {
+width: 65.4%;
+}
+
+.ninecol {
+width: 74.05%;
+}
+
+.tencol {
+width: 82.7%;
+}
+
+.elevencol {
+width: 91.35%;
+}
+
+.twelvecol {
+width: 100%;
+float: left;
+}
+
+.last {
+margin-right: 0px;
+}
+
+img, object, embed {
+max-width: 100%;
+}
@@ -0,0 +1,43 @@
+.onecol {
+width: 4.7%;
+}
+
+.twocol {
+width: 13.2%;
+}
+
+.threecol {
+width: 22.05%;
+}
+
+.fourcol {
+width: 30.6%;
+}
+
+.fivecol {
+width: 39%;
+}
+
+.sixcol {
+width: 48%;
+}
+
+.sevencol {
+width: 56.75%;
+}
+
+.eightcol {
+width: 61.6%;
+}
+
+.ninecol {
+width: 74.05%;
+}
+
+.tencol {
+width: 82%;
+}
+
+.elevencol {
+width: 91.35%;
+}
@@ -0,0 +1,32 @@
+/* Layout for desktop version */
+
+body {
+
+}
+
+
+/* Layout for mobile version */
+
+@media handheld, only screen and (max-width: 767px) {
+
+.examplecontainer {
+
+body {
+
+}
+
+}
+
+
+/* Provide higher res assets for iPhone 4 */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+
+/* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
+.download {
+background: url(../img/downarrow@2x.png) no-repeat;
+background-size: 27px 28px;
+}
+*/
+
+}
@@ -0,0 +1,23 @@
+.row, .body, .container {
+width: 100%;
+margin-left: 0px;
+margin-right: 0px;
+padding-left: 0px;
+padding-right: 0px;
+}
+
+.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
+width: auto;
+float: none;
+margin-left: 0px;
+margin-right: 0px;
+padding-left: 20px;
+padding-right: 20px;
+}
+
+/* Type presets */
+
+body {
+font-size: 16px;
+line-height: 24px;
+}
@@ -0,0 +1,4 @@
+body {
+font-size: 0.8em; /* Makes type a bit smaller at 1024 so layout doesn't look unbalanced */
+line-height: 1.5em; /* As above */
+}
@@ -0,0 +1,72 @@
+/* Type & image presets */
+
+img, object, embed {
+margin-bottom: 20px;
+}
+
+body {
+font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 14px;
+line-height: 24px; /* Changing this will break the baseline grid. */
+-webkit-text-size-adjust: none; /* Stops the iPhone scalling type up */
+}
+
+a {
+text-decoration: none;
+color: #005698;
+font-weight: bold;
+border-bottom: 1px solid #adadad;
+}
+
+a:hover {
+color: #000;
+border-bottom: none;
+}
+
+a img {
+display: block; /* Stops image links getting text link styles */
+}
+
+img {
+-webkit-border-radius: 3px;
+-moz-border-radius: 3px;
+border-radius: 3px;
+margin-bottom: 20px;
+}
+
+p, ul, ol, blockquote {
+margin-bottom: 24px; /* Changing this will break the baseline grid. */
+}
+
+li {
+margin-bottom: 6px;
+}
+
+blockquote {
+border-left: 1px solid #c1c1c1;
+color: #747474;
+padding-left: 15px;
+margin-left: -15px;
+}
+
+h1 {
+font-size: 30px;
+line-height: 36px; /* Changing this will break the baseline grid. */
+margin-bottom: 24px; /* Changing this will break the baseline grid. */
+font-family: Georgia;
+font-weight: lighter;
+}
+
+h2 {
+font-size: 20px;
+margin-bottom: 24px; /* Changing this will break the baseline grid. */
+font-family: Georgia, serif;
+font-weight: lighter;
+}
+
+h3 {
+font-size: 16px;
+margin-bottom: 24px; /* Changing this will break the baseline grid. */
+font-family: Georgia, serif;
+font-weight: lighter;
+}
Oops, something went wrong.

0 comments on commit 40e0dfd

Please sign in to comment.