Automated tests & improved documentation

• [removed] function mq-add-breakpoint. Becomes a mixin (see below)
• [new] mixin mq-add-breakpoint: @include mq-add-breakpoint
• [new] Test compilation with Ruby Sass and Libsass in Travis-CI
• [new] Sass documentation written with SassDoc

Upgrade path from older versions:

// Adding breakpoints:
// 1. Search for:
$mq-breakpoints: mq-add-breakpoint(

// 2. Replace with:
@include mq-add-breakpoint(


// $to becomes $until:
// 1. Search for
@include mq(…$to: [mobile|tablet…]) {}

// 2. Replace with
@include mq(…$until: [mobile|tablet…]) {}

Support libsass 3

Updates to support libsass 3.0.

v2.1.1: Make $mq-show-breakpoints fixed so always shown in viewport

Merge pull request #15 from guardian/fixed-position-for-show-breakpoints

Make $mq-show-breakpoints fixed so always shown in viewport

Deprecate $to for $until

The $to keyword argument is slightly ambiguous, insofar as it can mean both ‘up to’ and ‘up to and including’.

This release deprecates its use in favour of a hopefully clearer $until.

v2.0.1 - Unicode fix

Fixes a bug where the Sass compiler would throw an error "Syntax error: Invalid US-ASCII character "\xE2" if the system locale was confusing for Ruby. Find the full bug resolution discussion in #10.

Thanks to @ArekBartnik for his contribution.

v2.0.0: Sass 3.3.0!

• [new] Requires Sass 3.3.x
• [new] Use Sass maps for breakpoints configuration
• [change] Renamed function mq-retrieve-breakpoint-width into mq-get-breakpoint-width
• [new] During development, display the active breakpoint in the top corner of the viewport.

Upgrading from v1.x.x to v2.x.x

This release works with previous configuration conventions, but you can update your $mq-breakpoints config to use Sass 3.3 maps:

$mq-breakpoints: (
    (mobile  320px)
    (tablet  740px)
    (desktop 980px)
    (wide    1300px)

    // Tweakpoints
    (desktopAd 810px)
    (mobileLandscape 480px)
);

Becomes:

$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px,

    // Tweakpoints
    desktopAd: 810px,
    mobileLandscape: 480px
);

Acknowledgements

Thanks to @bewildergeist and @hugogiraudel for contributing to this release.

v2.0.0 RC3: use Guardian Next Gen default breakpoints

This release makes it quicker to set up a Guardian application with the correct main breakpoints:

• mobile: 320px
• tablet: 740px
• desktop: 980px
• wide: 1300px

v2.0.0 RC2: Ability to show active breakpoint in corner of viewport

• [New] To make development easier, this version introduces the ability to display the currently active breakpoint in the top corner of the browser.

Thanks to @bewildergeist for developing this feature (and @hugogiraudel for his help with Sass lists).

Ported in Sass 3.3 (maps instead of lists) by yours truly.

v1.4.0: Ability to show active breakpoint in corner of viewport

• [New] To make development easier, this version introduces the ability to display the currently active breakpoint in the top corner of the browser.

Thanks to @bewildergeist for developing this feature (and @hugogiraudel for his help with Sass lists).

v2.0.0 RC1

This release breaks with the previous configuration conventions (see below).

• [new] Use new awesome Sass maps for breakpoints configuration
• [change] Renamed function mq-retrieve-breakpoint-width into mq-get-breakpoint-width

How to upgrade

To upgrade from v1.x.x to v2.x.x, simply change the syntax of the breakpoint list into a map:

$mq-breakpoints: (
    (mobile  300px)
    (tablet  600px)
    (desktop 900px)
    (wide    1260px)

    // Tweakpoints
    (desktopAd 810px)
    (mobileLandscape 480px)
);

Becomes:

$mq-breakpoints: (
    mobile:  300px,
    tablet:  600px,
    desktop: 900px,
    wide:    1260px,

    // Tweakpoints
    desktopAd: 810px,
    mobileLandscape: 480px
);