Image elements (<img>) 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.
+
Image elements (<img>) 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.
On a side note, if you want to add captions to images, you can use a <figcaption> element, while wrapping both the image and it inside a <figure>.
You can hide content (either fully or only visually) for certain screens, using the responsive visibility helpers. To hide elements completely use the .hidden-SCR_SZ syntax, replacing SCR_SZ with one of the available screen size names (sm for smaller screens, md for medium-sized screens or lg for larger screens). If you want to hide certains elements for all users, except screen readers, replace .hidden with .visually-hidden, followed by the screen size name.
+
Sample code
+
<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>
+
+
+
+
Notes
+
+
Responsive visibility helper classes utilize !important declarations, so be careful when and how to use them.
+
The specific breakpoints for small, medium and large screen sizes are as follows:
+
+
small: less than 768px wide
+
medium: more than or equal to 768px wide but less than 1280px wide
+
large: 1280px wide or more
+
+
+
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.
+
+
+
+
<span class="hidden-sm hidden-md">Hidden in smaller and medium-sized screens, visible in larger screens</span>
+<!-- or -->
+<span class="visually-hidden-md visually-hidden-lg">Visually hidden in medium-sized and larger screens, visible in smaller screens</span>
+<!-- or -->
+<span class="hidden-sm visually-hidden-lg">Hidden in smaller screens, visually hidden in larger screens, visible in medium-sized screens</span>
+
Do: You can combine responsive visibility helpers for different sizes, based on your needs.
+
+
+
<span class="hidden-sm visually-hidden-sm">Not a good idea</span>
+
Don't: Avoid combining responsive visibility helpers for the same screen size. Combining both of them might cause unexpected behavior.
+
+
+
+
+
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 4c8fb8b..db91192 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -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.
diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss
index e49734a..4b9a1ab 100644
--- a/src/flavors/mini-nord.scss
+++ b/src/flavors/mini-nord.scss
@@ -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);
+