include-media-visibility

An include-media plugin for showing / hiding elements based on current active breakpoint

Introduction

This plugin generates classes for showing/ hiding elements based on current active breakpoint defined by by include-media.

@import 'include-media';
@import 'include-media-visibility';

$breakpoints: (phone: 480px, tablet: 768px, desktop: 1024px);

/*
    Show class name (optional)
 */
$im-show-class: 'show' !default;
/*
    Hide class name (optional)
 */
$im-hide-class: 'hide' !default;

@include im-visibility();

####Showing: Element is invisible until 'tablet' breaktpoint is reached.

    <div class="show@tablet"></div>

####Hiding: Element is visible until 'tablet' breaktpoint is reached.

    <div class="hide@tablet"></div>

Requirements

• Sass >= 3.4.x
• include-media

Installation

• Manually: Download this file and import it into your Sass project
• npm: Run npm install include-media-grid

Author

Tomasz Szarzynski