A tool to work with breakpoints and media-queries in Sass and Javascript.
CSS Ruby JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
stylesheets
test
.gitignore
LICENSE
README.md
bower.json
package.json
sache.json
shift-sass.gemspec

README.md

Shift-sass

Shift-sass is a tool to work with breakpoints and media-queries in Sass. It tries to be simple and concise, but powerful enough to make working with breakpoints accross your projects easy.

Shift-sass works perfectly with its companion tool Shift-js, which shares a similar API to work with breakpoints in the javascript part of your project. Together, these two tools make it easy to build and configure responsive front-end components.

Installation

Bower

Open the Terminal, cd to your project folder and enter the following command:

bower install shift-sass --save-dev

Add the path to shift-sass's bower component to sass's loadPaths option

sass.render({
    loadPaths: [
        'path/to/bower_components/shift-sass/stylesheets'
        ...
    ],
    ...
});

Import shift-sass files in your project's stylesheets

@import "shift";

Usage

Adding media-query features

@include shift-set( $feature, $label, $value[, $tweakpoint ]);
@include shift-set-width( $label, $value[, $tweakpoint ]);
@include shift-set-height( $label, $value[, $tweakpoint ]);
@include shift-set-resolution( $label, $value[, $tweakpoint ]); // SOON!

Output media-query

@include shift-breakpoint($expression[, $tweakpoint ]);
@include shift($expression[, $tweakpoint ]); /* convenient alias */
/* SOON! */ @include shift-width($widths[, $tweakpoint ]);
/* SOON! */ @include shift-height($heights[, $tweakpoint ]);
/* SOON! */ @include shift-resolution($resolution[, $tweakpoint ]);

Supported syntaxes for expressions

keywords

  • only
  • {CSS_MEDIA_TYPES}

min-width

  • s
  • s_
  • w>s
  • w > s
  • width>s
  • width > s
  • min-width:s
  • min-width: s

max-width

  • _l
  • w<l
  • w < l
  • width<l
  • width < l
  • max-width:l
  • max-width: l

min-height

  • -l_
  • h>l
  • h > l
  • height>l
  • height > l
  • min-height:l
  • min-height: l

max-height

  • -_xl
  • h<xl
  • h < xl
  • height<xl
  • height < xl
  • max-height:xl
  • max-height: xl

resolution

  • 2x
  • 1.5x
  • 31x
Examples
// min-width queries
@include shift('>md') { ... }
@include shift('w>md') { ... }
@include shift('from md') { ... } // SOON!

// max-width queries
@include shift('<lg') { ... }
@include shift('screen <lg') { ... }
@include shift('to lg') { ... } // SOON!

// min-/max-width queries
@include shift('from sm to lg') { ... }
@include shift('>sm and <lg') { ... }
@include shift('>sm <lg') { ... }
@include shift('screen >sm <lg') { ... }

// min-height queries
@include shift('h>sm') { ... }

// max-height queries
@include shift('h<lg') { ... }

// mixed queries
@include shift('>sm h<lg') { .. }
@include shift('w>md h<md') { .. }
@include shift('>sm <md h>md') { .. }
@include shift('w>sm w<md h>md') { .. }
@include shift('print w>sm w<md h>sm') { .. }

Getting media-query feature values

$value: shift-get($feature, $label[, $tweakpoint, $unit ]);
$value: shift-get-width($label[, $tweakpoint, $unit ]);
$value: shift-get-height($label[, $tweakpoint, $unit ]);
$value: shift-get-resolution($label[, $tweakpoint, $unit ]); // SOON!