fonzie/breakpoints

Customisable media query helpers

Breakpoints

Media queries for working with different devices. The breakpoints for each query can be customized so that they match your grid.

Installation

fonzie install breakpoints

Then import them:

@import "breakpoints";

Usage

The mixins make use of content blocks in mixins. Just pick a mixin and use it anywhere.

@include mobile {
  body {
    background: #eee;
    padding: 40px;
  }
}

.box {
  width: 500px;
  @include tablet-portrait {
    width: 250px;
  }
  @include mobile {
    width: 100px;
  }
}

You can adjust the points used for these media queries by changing variables:

$mq-mobile-portrait: 340px;
$mq-mobile-landscape: 500px;
$mq-tablet-portrait: 700px;
$mq-tablet-landscape: 900px;
$mq-desktop: 1100px;

Mixins

There are a number of mixins available for targeting above, below and on a breakpoint.

• mobile
• mobile-portrait
• mobile-portrait-and-below
• mobile-portrait-and-up
• mobile-landscape
• mobile-landscape-and-below
• mobile-landscape-and-up
• tablet
• tablet-portrait
• tablet-portrait-and-below
• tablet-portrait-and-up
• tablet-landscape
• tablet-landscape-and-below
• tablet-landscape-and-up
• desktop-and-up
• desktop-and-below
• desktop