SuperGiGi

Visibility Mixins

Let you show or hide elements based on screen size or device orientation. You can use these mixins to control which elements users see depending on their browsing environment.

Show for - Hide for

In this example, we use the show-for() and hide-for() mixins to show or hide the columns based on the device on which users view a page. If their browser meets the viewport condition, the element will be shown. If not, it will be hidden.

<div class="BarbecueSauce">
  <div class="BarbecueSauce__element BarbecueSauce__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="BarbecueSauce__element BarbecueSauce__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="BarbecueSauce__element BarbecueSauce__element--last">
    <div class="Box">
      <p>3</p>
    </div>
  </div>
</div>

.BarbecueSauce{
  @include grid-row($nested: false) // Equivalent to grid-row(false);

  &__element {
    &--first {
      @include show-for(medium);
      @include grid-column(4);
    }

    &--second {
      @include grid-column((xxsmall: 6, medium: 2, large: 6));
    }

    &--last {
      @include hide-for(small);
      @include grid-column(6);
    }
  }
}

Show from - Hide from

For this example we use the show-from() and hide-from() mixins to determine which columns are going to be shown or hidden from a viewport size condition.

<div class="ChickenWings">
  <div class="ChickenWings__element ChickenWings__element--first">
    <div class="Box">
      <p>1</p>
    </div>
  </div>
  <div class="ChickenWings__element ChickenWings__element--second">
    <div class="Box">
      <p>2</p>
    </div>
  </div>
  <div class="ChickenWings__element ChickenWings__element--third">
    <div class="Box">
      <p>3</p>
    </div>
  </div>
  <div class="ChickenWings__element ChickenWings__element--last">
    <div class="Box">
      <p>4</p>
    </div>
  </div>
</div>

.ChickenWings{
  @include grid-row($nested: false) // Equivalent to grid-row(false);

  &__element {
    &--first {
      @include grid-column((xxsmall: 4, medium: 4, large: 6));
    }

    &--second {
      @include hide-from(medium);
      @include grid-column(4);
    }

    &--third {
      @include grid-column((xxsmall: 4, medium: 8, large: 3));
    }

    &--last {
      @include show-from(large);
      @include grid-column(3);
    }
  }
}