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

Added documentation for responsive hiding

Browse Source 
Responsive visibility helpers are now documented under the utility module, updated the image demos with captions, updated quick reference.
This commit is contained in:
Angelos Chalaris
2017-04-18 13:00:11 +03:00
parent c843fd99ca
commit a2a855625b
7 changed files with 158 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/core.html
View File

@@ -184,15 +184,18 @@
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Image responsiveness</h2></div>
<div class="section"><h2>Image responsiveness &amp; captions</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div><img src="https://placehold.it/800x600"></div>
<div><figure><img src="https://placehold.it/800x600"><figcaption>Image caption</figcaption></figure></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>
<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> <p>On a side note, if you want to add captions to images, you can use a <code>&lt;figcaption&gt;</code> element, while wrapping both the image and it inside a <code>&lt;figure&gt;</code>.</p>
<h3>Sample code</h3>
<pre>&lt;img src=&quot;...&quot;&gt;</pre><br>
<pre>&lt;figure&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;figcaption&gt;Image caption&lt;/figcaption&gt;
&lt;/figure&gt;</pre><br>
</div>
</div>
</div>