Grid offsets documentation
This commit is contained in:
Angelos Chalaris
parent
ae051f84a0
commit
9aa96f716c
|
|
@ -495,3 +495,4 @@
|
|||
- Updated all demo pages with latest reference to css file.
|
||||
- Added dos and don'ts in the grid page under the first section.
|
||||
- Added screen-specific layouts in the `grid.html` doc page.
|
||||
- Added offsets to the `grid.html` doc page.
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@
|
|||
<li><strong>large</strong>: <code>1280px</code> wide or more</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fluid columns can be used for sizes that are not of the form <code>100%/12 * X</code> where <code>X</code> an integer value between <code>1</code> and <code>12</code>. For example, if you have 7 <code>col-sm</code> elements in one row, each of the elements will have a width of 1/7th the width of the row.</li>
|
||||
<li>Fluid columns can be used for sizes that are not of the form <code>100%/12 * X</code> where <code>X</code> an integer value between <code>1</code> and <code>12</code>. For example, if you have 7 <code>.col-sm</code> elements in one row, each of the elements will have a width of 1/7th the width of the row.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
|
|
@ -348,7 +348,7 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can radically change the layout of your content for different displays. Laying out your content vertically in <code>col-sm-12</code>s for small devices and then compacting it to <code>col-md-6</code>s for medium displays is pretty common. If your columns exceed a total size of <code>12</code> on some displays, they will wrap accordingly, so do not worry.</p>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can radically change the layout of your content for different displays. Laying out your content vertically in <code>.col-sm-12</code>s for small devices and then compacting it to <code>.col-md-6</code>s for medium displays is pretty common. If your columns exceed a total size of <code>12</code> on some displays, they will wrap accordingly, so do not worry.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="row">
|
||||
|
|
@ -377,7 +377,7 @@
|
|||
<div class="col-lg">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Never omit the class needed for the smallest screen size you have (<code>col-sm</code> or <code>col-sm-X</code>), otherwise the column's layout on smaller displays might behave unexpectedly. You can, however, omit layout for the other two screen sizes if you want.</p>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Never omit the class needed for the smallest screen size you have (<code>.col-sm</code> or <code>.col-sm-<span class="fore-secondary">COL_WD</span></code>), otherwise the column's layout on smaller displays might behave unexpectedly. You can, however, omit layout for the other two screen sizes if you want.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -392,12 +392,71 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="row"><div class="col-sm-10 col-sm-offset-1"><div class="box-colored">size = 10, offset = 1</div></div></div>
|
||||
<div class="row"><div class="col-sm col-sm-offset-2"><div class="box-colored">fluid, offset = 2</div></div></div>
|
||||
<div class="row"><div class="col-sm-6 col-sm-offset-3"><div class="box-colored">size = 6, offset = 3</div></div></div>
|
||||
<div class="row"><div class="col-sm-8 col-sm-offset-4"><div class="box-colored">size = 8, offset = 4</div></div></div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-sm-offset-1"><div class="box-colored">size = 5, offset = 1</div></div>
|
||||
<div class="col-sm-5 col-sm-offset-1"><div class="box-colored">size = 5, offset = 1</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>If you want to move columns to the right, you can use the offset classes on your columns. Offset classes use the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-<span class="fore-secondary">COL_WD</span></code> syntax, where <code><span class="fore-primary">SCR_SZ</span></code> is one of the available screen size names (<code><span class="fore-tertiary">sm</span></code>, <code><span class="fore-tertiary">md</span></code> or <code><span class="fore-tertiary">lg</span></code>) and <code><span class="fore-secondary">COL_WD</span></code> a number from <code>0</code> to <code>11</code> specifying the width of the column's offset. Offsets can also be used in combination with screen-specific layouts and column sizes, providing you with greater flexibility when spacing out your content.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre><br>
|
||||
<p>The example presented below showcases the grid system's offsetting syntax for smaller screens, but you can do the same thing for any screen size.</p>
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-sm-offset-2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-sm-offset-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-4">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
</div>
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
</div>
|
||||
</div>
|
||||
</div></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Columns with offsets and columns without offsets can be mixed for better results. In fact, we strongly suggest you try that.</li>
|
||||
<li>Remember to specify a basic layout and/or screen specific layouts in addition to the offset classes.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-md-offset-1 col-md-5 col-lg-4">
|
||||
</div>
|
||||
<div class="col-sm col-md-5 col-lg-4 col-lg-offset-2">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can specify offset classes when you need them and omit them otherwise. This means that, if you want to offset a column only on a medium-sized or a larger screen, you can just specify the offset for that specific screen. Specifying an offset for a smaller screen, however, will apply it to medium-sized and larger screens as well, medium-sized screen offsets will apply to larger screen etc. similar to how the layout system works.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-md-10 col-offset-1 col-lg col-lg-offset-0">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> To remove a previously applied offset from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no offsets are active on a column, you can use the <code>col-<span class="fore-primary">SCR_SZ</span>-offset-0</code> class, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size, effectively resetting all offsets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue