beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Grid documentation complete

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-21 13:47:54 +02:00
parent 9aa96f716c
commit 0085ea0a3d
2 changed files with 64 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View file

@ -496,3 +496,4 @@
- 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.
- Added reordering to the `grid.html` doc page, `grid` documentation finished - some polishing might still be required.

68
docs/v2/grid.html
View file

@ -455,7 +455,7 @@
<div class="col-sm col-md-10 col-offset-1 col-lg col-lg-offset-0">
</div>
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;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>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;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>
@ -466,16 +466,74 @@
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Column ordering</h2>
<h2>Column reordering</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div class="container">
<div class="row"><div class="col-sm"><h4>Small screen layout</h4><hr></div></div>
<div class="row">
<div class="col-sm col-sm"><div class="box-colored">&nbsp;</div></div>
<div class="col-sm col-sm"><div class="box-colored red">normal</div></div>
<div class="col-sm col-sm"><div class="box-colored">&nbsp;</div></div>
</div>
<div class="row"><div class="col-sm"><h4>Medium screen layout</h4><hr></div></div>
<div class="row">
<div class="col-sm col-sm"><div class="box-colored red">first</div></div>
<div class="col-sm col-sm"><div class="box-colored">&nbsp;</div></div>
<div class="col-sm col-sm"><div class="box-colored">&nbsp;</div></div>
</div><div class="row"><div class="col-sm"><h4>Large screen layout</h4><hr></div></div>
<div class="row">
<div class="col-sm col-sm"><div class="box-colored">&nbsp;</div></div>
<div class="col-sm col-sm"><div class="box-colored">&nbsp;</div></div>
<div class="col-sm col-sm"><div class="box-colored red">last</div></div>
</div>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
<p>Finally, if you want to reorder your columns, you can do that to some extent using the <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> classes to your columns, replacing <code><span class="fore-primary">SCR_SZ</span></code> with 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>). These classes will change the ordering of your columns appropriately to allow you to move content around any way you want (e.g. moving a navigation sidebar from the left of the content on larger displays to the end of the content on smaller displays).</p>
<h3>Sample code</h3>
<pre></pre><br>
<pre>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm col-md-last col-lg-normal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-first col-md-normal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm col-md-first col-lg-normal&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre><br>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>Columns are ordered by default in order of appearance. You should only apply column reordering classes to the columns you want to reorder on the screen-specific layouts you need them.</li>
<li>Remember to specify a basic layout and/or screen specific layouts in addition to the column reordering classes.</li>
<li>Column reordering is applied from smaller to larger screens, similar to how column layout and offsetting work.</li>
</ul>
<hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm col-md-last&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm col-md-last&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can use multiple <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>s and <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code>s, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size, in the same row for the same screen size. If you specify more than one column to be first or last, the columns with the same order will be placed at the beggining or end of the row and the order between them will be determined based on their order of appearance in the DOM tree afterwards.</p>
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-last col-md-normal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;To remove a previously applied reorder from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no reordering is active on a column, you can use the <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> class, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size, effectively resetting all reorders. You do not, however, need to add this class to all other columns or use it when there are no reorders applied.</p>
</div>
</div>
</div>
</div>