Huesos
Style
Guide

Repositoire

GitHub

Preview

Visibility

Note: you will need to toggle fullscreen preview to see the breakpoints working properly.

Set of classes based on $breakpoints map that will toggle visibility on certain viewport widths (with the default breakpoints, .small-visible, .medium-visible and .large-visible).

This means the item is hidden until a breakpoint is reached.

Example

<section>
    <h3 class="small-visible">I'm visible</h3>
    <h3 class="medium-visible">I'm visible</h3>
    <h3 class="large-visible">I'm visible</h3>
</section>

Assets

  • Filesystem Path: src/components/layout/visibility/_visibility.scss
  • Size: 171 Bytes 
  • @each $name, $value in $breakpoints {
    .#{$name}-visible {
        display:none;
        @include breakpoint(#{$value}) {
            display:inherit;
        }
    }
}