include-media — Hidden classes plugin

Get include-media here.

Introduction

This plugin generates a set of classes that allow elements to be hidden for specific breakpoints, as per this issue.

Example:

Class	Hidden for
.hidden--for-phone	Viewports on the "phone" breakpoint
.hidden--from-phone	Viewports larger than the "phone" breakpoint (inclusive)
.hidden--to-phone	Viewports smaller than the "phone" breakpoint (inclusive)

Generates:

@media (min-width: 320px) and (max-width: 767px) {
  .hidden--for-phone {
    display: none;
  }
}

@media (min-width: 320px) {
  .hidden--from-phone {
    display: none;
  }
}

@media (max-width: 319px) {
  .hidden--to-phone {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden--for-tablet {
    display: none;
  }
}

@media (min-width: 768px) {
  .hidden--from-tablet {
    display: none;
  }
}

@media (max-width: 767px) {
  .hidden--to-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hidden--for-desktop {
    display: none;
  }
}

@media (max-width: 1023px) {
  .hidden--to-desktop {
    display: none;
  }
}

Configuration

$im-hidden-class: The name of the generated classes (default: hidden)

$im-hidden-important: Whether to use add !important to the display value (default: false)