From 53135839f549a3278e39f912283b48180a2b6c8c Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Fri, 9 Sep 2011 10:04:07 -0700
Subject: [PATCH] adding nested columns to the grid section
---
docs/assets/css/docs.css | 10 ++++-
docs/index.html | 79 +++++++++++++++++++++++++---------------
2 files changed, 57 insertions(+), 32 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b8ac95c426..31ed82a7fb 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -142,15 +142,21 @@ section > .row {
}
.show-grid [class*="span"] {
background-color: #eee;
+ background-color: rgba(0,0,0,.1);
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- height: 30px;
+ min-height: 30px;
line-height: 30px;
}
.show-grid:hover [class*="span"] {
- background: rgba(0, 0, 0, 0.25);
+ background-color: #ddd;
+ background-color: rgba(0,0,0,.2);
+}
+.show-grid .show-grid {
+ margin-top: 0;
+ margin-bottom: 0;
}
/* Render mini layout previews
-------------------------------------------------- */
diff --git a/docs/index.html b/docs/index.html
index 558f3fcf24..083e38b0bf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -196,22 +196,22 @@
</div>
</div><!-- /row -->
<div class="row show-grid" title="16 column layout">
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
- <div class="span1 column">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
</div><!-- /row -->
<div class="row show-grid" title="8 column layout">
<div class="span2">2</div>
@@ -238,13 +238,13 @@
<div class="span4">4</div>
</div><!-- /row -->
<div class="row show-grid" title="Default three column layout">
- <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">1/3</div>
+ <div class="span-one-third">1/3</div>
+ <div class="span-one-third">1/3</div>
</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 class="span-one-third">1/3</div>
+ <div class="span-two-thirds">2/3</div>
</div><!-- /row -->
<div class="row show-grid" title="Irregular three column layout">
<div class="span4">4</div>
@@ -262,25 +262,44 @@
<div class="row show-grid" title="Unnecessary single column layout">
<div class="span16">16</div>
</div><!-- /row -->
- <h4>Offsetting columns</h4>
+ <h3>Offsetting columns</h3>
<div class="row show-grid">
<div class="span4">4</div>
- <div class="span8 columns offset4">8 offset 4</div>
+ <div class="span8 offset4">8 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span-one-third columns offset-two-thirds">1/3 offset 2/3s</div>
+ <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div>
</div><!-- /row -->
<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 offset4">4 offset 4</div>
+ <div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span5 columns offset3">5 offset 3</div>
- <div class="span5 columns offset3">5 offset 3</div>
+ <div class="span5 offset3">5 offset 3</div>
+ <div class="span5 offset3">5 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span10 columns offset6">10 offset 6</div>
+ <div class="span10 offset6">10 offset 6</div>
</div><!-- /row -->
+
+ <h3>Nesting columns</h3>
+ <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
+ <div class="row show-grid">
+ <div class="span10">
+ Level 1 of column
+ <div class="row show-grid">
+ <div class="span5">
+ Level 2
+ </div>
+ <div class="span5">
+ Level 2
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+ Level 1 of column
+ </div>
+ </div>
</section>
@@ -1540,4 +1559,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</body>
-</html>
+</html>
\ No newline at end of file
--
GitLab