Skip to content
GitLab
Commit 53135839 authored by Mark Otto's avatar Mark Otto
Browse files

adding nested columns to the grid section

parent df3ca4d9
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 57 additions and 32 deletions
+57 -32
docs/assets/css/docs.css
+ 8
- 2
View file @ 53135839
...@@ -142,15 +142,21 @@ section > .row { ...@@ -142,15 +142,21 @@ section > .row {
} }
.show-grid [class*="span"] { .show-grid [class*="span"] {
background-color: #eee; background-color: #eee;
background-color: rgba(0,0,0,.1);
text-align: center; text-align: center;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
height: 30px; min-height: 30px;
line-height: 30px; line-height: 30px;
} }
.show-grid:hover [class*="span"] { .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 /* Render mini layout previews
-------------------------------------------------- */ -------------------------------------------------- */
......
docs/index.html
+ 49
- 30
View file @ 53135839
...@@ -196,22 +196,22 @@ ...@@ -196,22 +196,22 @@
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="16 column layout"> <div class="row show-grid" title="16 column layout">
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
<div class="span1 column">1</div> <div class="span1">1</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="8 column layout"> <div class="row show-grid" title="8 column layout">
<div class="span2">2</div> <div class="span2">2</div>
...@@ -238,13 +238,13 @@ ...@@ -238,13 +238,13 @@
<div class="span4">4</div> <div class="span4">4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="Default three column layout"> <div class="row show-grid" title="Default three column layout">
<div class="span-one-third column">1/3</div> <div class="span-one-third">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 column">1/3</div> <div class="span-one-third">1/3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid" title="One-third and two-thirds layout"> <div class="row show-grid" title="One-third and two-thirds layout">
<div class="span-one-third column">1/3</div> <div class="span-one-third">1/3</div>
<div class="span-two-thirds column">2/3</div> <div class="span-two-thirds">2/3</div>
</div><!-- /row --> </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">4</div> <div class="span4">4</div>
...@@ -262,25 +262,44 @@ ...@@ -262,25 +262,44 @@
<div class="row show-grid" title="Unnecessary single column layout"> <div class="row show-grid" title="Unnecessary single column layout">
<div class="span16">16</div> <div class="span16">16</div>
</div><!-- /row --> </div><!-- /row -->
<h4>Offsetting columns</h4> <h3>Offsetting columns</h3>
<div class="row show-grid"> <div class="row show-grid">
<div class="span4">4</div> <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><!-- /row -->
<div class="row show-grid"> <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><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span4 columns offset4">4 offset 4</div> <div class="span4 offset4">4 offset 4</div>
<div class="span4 columns offset4">4 offset 4</div> <div class="span4 offset4">4 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span5 columns offset3">5 offset 3</div> <div class="span5 offset3">5 offset 3</div>
<div class="span5 columns offset3">5 offset 3</div> <div class="span5 offset3">5 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="span10 columns offset6">10 offset 6</div> <div class="span10 offset6">10 offset 6</div>
</div><!-- /row --> </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> </section>
...@@ -1540,4 +1559,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1540,4 +1559,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
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