mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-15 09:51:51 +02:00
Code Issues Releases Wiki Activity

Predefined layouts documented

Browse Source
This commit is contained in:
Angelos Chalaris 2017-02-07 17:20:14 +02:00
parent d7f459a70d
commit c7d9193309
2 changed files with 59 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/grid.html
View File

@ -337,6 +337,64 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Predefined layouts</h2></div>
<div class="section row">
<div class="col-sm-12">
<p>Some simple grid layout problems can be solved using predefined layouts. To use a predefined layout, simply add a predefined layout class to a <code>.row</code> element. Predefined classes can be written using one of two syntaxes, similar to normal column classes:</p>
<ul>
<li>fluid column layouts can be specified using <code>.cols-<span class="fore-primary">SCR_SZ</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names.</li>
<li>fixed width columns layouts can be specified using <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><span class="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the columns.</li>
</ul>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;row cols-sm-6&quot;&gt;
&lt;div&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre><br>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>Predefined layouts can be combined with most of the features of the grid system, such as offsets and reordering.</li>
<li>If you use a fluid predefined layout, its columns will always be placed in one row.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row cols-sm-12 cols-md-6&quot;&gt;
&lt;div&gt;
&lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;col-sm-12, col-md-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can add multiple predefined layout classes for different screen sizes, allowing you to build responsive predefined layouts.</p>
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;row cols-sm-6&quot;&gt;
&lt;div class=&quot;row cols-sm-7&quot;&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;row cols-sm-5&quot;&gt;
&lt;p&gt;col-sm-6&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using the normal column classes in conjunction with predefined layouts, as they will most likely not apply and can sometimes cause unexpected behavior.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
@ -484,7 +542,6 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
@ -590,7 +647,6 @@
</div>
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>

1
docs/v2/DEVLOG.md
View File

@ -840,3 +840,4 @@
- Updated `package.json` and `bower.json`.
- Updated `#header-logo` styling in order to make the framework's logo display properly in Chrome.
- Updated `header`s `logo` element styling to make sure that it does not *jump* in Chrome.
- Documented predefined layouts in `grid.html`.