mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-09 07:16:29 +02:00
Added documentation for responsive hiding
Responsive visibility helpers are now documented under the utility module, updated the image demos with captions, updated quick reference.
This commit is contained in:
@@ -117,7 +117,10 @@
|
||||
<li>Go to work</li>
|
||||
</ol>
|
||||
|
||||
<img src="..."></pre>
|
||||
<figure>
|
||||
<img src="...">
|
||||
<figcaption>Image caption</figcaption>
|
||||
</figure></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1122,6 +1125,33 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Responsive visibility helpers <a href="https://codepen.io/chalarangelo/pen/EmVvWz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><span class="hidden-sm">Hidden in smaller screens</span>
|
||||
<span class="hidden-md">Hidden in medium-sized screens</span>
|
||||
<span class="hidden-lg">Hidden in larger screens</span>
|
||||
|
||||
<span class="visually-hidden-sm">Visually hidden in smaller screens</span>
|
||||
<span class="visually-hidden-md">Visually hidden in medium-sized screens</span>
|
||||
<span class="visually-hidden-lg">Visually hidden in larger screens</span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use the <code>.hidden-<span class="fore-primary">SCR_SZ</span></code> or <code>.visually-hidden-<span class="fore-primary">SCR_SZ</span></code> syntax, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names</li>
|
||||
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
|
||||
<ul>
|
||||
<li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
|
||||
<li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
|
||||
<li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Responsive visibility helper classes can be combined for different screen sizes, avoid using both for the same size</li>
|
||||
<li>Responsive visibility helper classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Breadcrumbs <a href="https://codepen.io/chalarangelo/pen/bBzzEN" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
|
Reference in New Issue
Block a user