diff options
Diffstat (limited to 'docs/layout.html')
| -rw-r--r-- | docs/layout.html | 39 |
1 files changed, 37 insertions, 2 deletions
diff --git a/docs/layout.html b/docs/layout.html index 777fcef..880b48a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -13,7 +13,7 @@ <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="docs-container off-canvas"> + <div class="docs-container off-canvas off-canvas-sidebar-show"> <div class="docs-navbar"> <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> <i class="icon icon-menu"></i> @@ -402,7 +402,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="grid-offset" class="s-subtitle">Grid offset</h4> + <h4 id="grid-offset" class="s-subtitle">Grid offset</h4> <div class="docs-note"> <p>The Flexbox grid provides margin auto utilities to set offset. There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.</p> </div> @@ -462,6 +462,41 @@ <<span class="tag">/div</span>> </code></pre> + <h4 id="grid-nesting" class="s-subtitle">Grid nesting</h4> + <div class="docs-note"> + <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p> + </div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6</div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-primary docs-block">col-6</div> + </div> + <div class="column col-6"> + <div class="bg-primary docs-block">col-6</div> + </div> + </div> + </div> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6</div> + </div> + </div> + +<!-- layout --> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6 + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</code></pre> + </div> <div class="container"> |