mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-18 05:18:25 +01:00
Code Issues Releases Wiki Activity

Quick reference for newest grid additions

Browse Source
This commit is contained in:
Angelos Chalaris 2017-02-13 10:51:56 +02:00
parent df79d00f65
commit 51533acf85
2 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/quick_reference.html
View File

@ -240,6 +240,27 @@
<li>Always start with a <code>.col-sm</code> or <code>.col-sm-<span class="fore-secondary">COL_WD</span></code> style, otherwise smaller devices will not display your content properly</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Predefined layouts <a href="http://codepen.io/chalarangelo/pen/ygGqQg" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></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>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Available both as fluid column layouts, 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 and fixed width column layouts, 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>
<li>Can define screen-specific predefined layouts</li>
<li>Can be combined with offsets and reordering, but not normal grid layout classes</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
@ -305,6 +326,30 @@
<li>You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Media object pattern<a href="http://codepen.io/chalarangelo/pen/oBdvPX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-1&quot;&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm&quot;&gt;
&lt;h2&gt;Media object heading&lt;/h2&gt;
&lt;p&gt;Media object content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Not a new component, rather a <a href="https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">popular pattern</a></li>
<li>Use two columns, one for the media (i.e. <code>&lt;img&gt;</code>) and one for the textual content</li>
<li>Compatible with most elements</li>
<li>Can use screen-specific layouts, reordering and offsets</li>
<li>Media objects can easily be nested inside each other</li>
</ul>
</div>
</div>
</div>
</div>

4
docs/v2/DEVLOG.md
View File

@ -867,3 +867,7 @@
- Updated `customization.html` page with latest information.
- Updated references everywhere to `v2.1.0`.
- Updated `customization.html` layout.
## 20170213
- Updated the `quick_reference.html` page with the new guidelines for `grid` module.