Skip to content

Latest commit

 

History

History
71 lines (57 loc) · 1.24 KB

README.md

File metadata and controls

71 lines (57 loc) · 1.24 KB

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