Commit 7070d44a authored by Mark Otto's avatar Mark Otto
Browse files

adding more grid docs

parent f17fc367
No related merge requests found
Showing with 14 additions and 7 deletions
+14 -7
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Aug 29 21:26:39 PDT 2011 * Date: Mon Aug 29 21:41:24 PDT 2011
*/ */
/* Reset.less /* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
...@@ -376,10 +376,10 @@ table { ...@@ -376,10 +376,10 @@ table {
width: 620px; width: 620px;
} }
.row .offset-one-third { .row .offset-one-third {
margin-left: 320px; margin-left: 340px;
} }
.row .offset-two-thirds { .row .offset-two-thirds {
margin-left: 640px; margin-left: 660px;
} }
html, body { html, body {
background-color: #fff; background-color: #fff;
......
...@@ -62,8 +62,8 @@ table{border-collapse:collapse;border-spacing:0;} ...@@ -62,8 +62,8 @@ table{border-collapse:collapse;border-spacing:0;}
.row .offset12{margin-left:740px;} .row .offset12{margin-left:740px;}
.row .span-one-third{width:300px;} .row .span-one-third{width:300px;}
.row .span-two-thirds{width:620px;} .row .span-two-thirds{width:620px;}
.row .offset-one-third{margin-left:320px;} .row .offset-one-third{margin-left:340px;}
.row .offset-two-thirds{margin-left:640px;} .row .offset-two-thirds{margin-left:660px;}
html,body{background-color:#fff;} html,body{background-color:#fff;}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;text-rendering:optimizeLegibility;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;text-rendering:optimizeLegibility;}
.container{width:940px;margin:0 auto;} .container{width:940px;margin:0 auto;}
......
...@@ -215,6 +215,10 @@ ...@@ -215,6 +215,10 @@
<div class="span-one-third column">1/3</div> <div class="span-one-third column">1/3</div>
<div class="span-one-third column">1/3</div> <div class="span-one-third column">1/3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="One-third and two-thirds layout">
<div class="span-one-third column">1/3</div>
<div class="span-two-thirds column">2/3</div>
</div><!-- /row -->
<div class="row show-grid" title="Irregular three column layout"> <div class="row show-grid" title="Irregular three column layout">
<div class="span4 columns">4</div> <div class="span4 columns">4</div>
<div class="span6 columns">6</div> <div class="span6 columns">6</div>
...@@ -236,6 +240,9 @@ ...@@ -236,6 +240,9 @@
<div class="span4 columns">4</div> <div class="span4 columns">4</div>
<div class="span8 columns offset4">8 offset 4</div> <div class="span8 columns offset4">8 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid">
<div class="span-one-third columns offset-two-thirds">1/3 offset 2/3s</div>
</div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span4 columns offset4">4 offset 4</div> <div class="span4 columns offset4">4 offset 4</div>
<div class="span4 columns offset4">4 offset 4</div> <div class="span4 columns offset4">4 offset 4</div>
......
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
// Unique column sizes for 16-column grid // Unique column sizes for 16-column grid
.span-one-third { width: 300px; } .span-one-third { width: 300px; }
.span-two-thirds { width: 620px; } .span-two-thirds { width: 620px; }
.offset-one-third { margin-left: 320px; } .offset-one-third { margin-left: 340px; }
.offset-two-thirds { margin-left: 640px; } .offset-two-thirds { margin-left: 660px; }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment