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

Core documentation update

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-26 23:50:28 +02:00
parent 3526534d8b
commit 021d634b90
7 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/v2/core.html
View File

@@ -103,6 +103,26 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Typography</h2>
</div>
<div class="section row">
<div class="col-sm-12">
<p>For the basic typography rules we did the following, along with other things presented below:</p>
<ul>
<li>We use a <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
<li>We set the colors to <code>background: #f5f5f5;</code> and <code>color: #212121;</code>.</li>
<li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
<li>We set <code>line-height</code> to <code>1.5</code>.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
@@ -207,6 +227,27 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Image responsiveness</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div>
<img src="http://placehold.it/800x600">
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p>
<h3>Sample code</h3>
<pre>&lt;img src=&quot;...&quot;&gt;</pre><br>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm">
<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>