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:
Angelos Chalaris
parent
c843fd99ca
commit
a2a855625b
7 changed files with 158 additions and 6 deletions
63
dist/mini-nord.css
vendored
63
dist/mini-nord.css
vendored
|
|
@ -2204,3 +2204,66 @@ ul.breadcrumbs li:last-child:after {
|
|||
.shadow-large {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hidden-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width: 1279px) {
|
||||
.hidden-md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.hidden-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.visually-hidden-sm {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width: 1279px) {
|
||||
.visually-hidden-md {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.visually-hidden-lg {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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 & 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><img></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><img></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><figcaption></code> element, while wrapping both the image and it inside a <code><figure></code>.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><img src="..."></pre><br>
|
||||
<pre><figure>
|
||||
<img src="...">
|
||||
<figcaption>Image caption</figcaption>
|
||||
</figure></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -167,6 +167,54 @@
|
|||
</div>
|
||||
</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>Responsive visibility helpers</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-first">
|
||||
<p>You can hide content (either fully or only visually) for certain screens, using the responsive visibility helpers. To hide elements completely use the <code>.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 (<code><span class="fore-tertiary">sm</span></code> for smaller screens, <code><span class="fore-tertiary">md</span></code> for medium-sized screens or <code><span class="fore-tertiary">lg</span></code> for larger screens). If you want to hide certains elements for all users, except screen readers, replace <code>.hidden</code> with <code>.visually-hidden</code>, followed by the screen size name.</p>
|
||||
<h3>Sample code</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>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Responsive visibility helper classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
||||
<li>The specific breakpoints for small, medium and large screen sizes are as follows:
|
||||
<ul>
|
||||
<li><strong>small</strong>: less than <code>768px</code> wide</li>
|
||||
<li><strong>medium</strong>: more than or equal to <code>768px</code> wide but less than <code>1280px</code> wide</li>
|
||||
<li><strong>large</strong>: <code>1280px</code> wide or more</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Responsive visibility helper classes are independent, meaning that hiding an element in one screen size will not affect it visibility in any other screen size.</li>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="hidden-sm hidden-md">Hidden in smaller and medium-sized screens, visible in larger screens</span>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<span class="visually-hidden-md visually-hidden-lg">Visually hidden in medium-sized and larger screens, visible in smaller screens</span>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<span class="hidden-sm visually-hidden-lg">Hidden in smaller screens, visually hidden in larger screens, visible in medium-sized screens</span></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can combine responsive visibility helpers for different sizes, based on your needs.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><span class="hidden-sm visually-hidden-sm">Not a good idea</span></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid combining responsive visibility helpers for the same screen size. Combining both of them might cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
|
|
|
|||
|
|
@ -983,3 +983,7 @@
|
|||
- Added `nord` flavor from PR, updated `table` module to deal with a minor problem that stemmed from a conditional in it.
|
||||
- Compiled `nord` flavor and recompiled to make sure everything works properly after the changes.
|
||||
- Finalized logo and thumbnail.
|
||||
- Added responsive-hiding classes to `nord`.
|
||||
- Documented responsive visibility helpers in `utility`.
|
||||
- Documented `figcaption` element under image responsiveness in `core` module's docs.
|
||||
- Added codepens and documentation in `quick_reference` for all that was missing.
|
||||
|
|
|
|||
|
|
@ -572,6 +572,8 @@ $responsive-padding-small-value:2px 4px; // Padding value for responsiv
|
|||
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens
|
||||
4px 6px;
|
||||
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
|
|
@ -666,3 +668,5 @@ $include-center-block-name: false; // Should center block be included
|
|||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
|
|||
Loading…
Reference in a new issue