Breakpoint

Really Simple Media Queries with Sass

Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.

If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, the Respond-To syntax is now included in Breakpoint core!

It is important to note that due to limitations within the Sass language itself, which themselves stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoidable. That being said, once Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet hits, be sure we're going to take full advantage of it.

Full documentation is available on the Breakpoint Wiki

Getting Help with Breakpoint

• For help with Breakpoint, please ask a question on Stack Overflow tagged with "breakpoint-sass".
• To file an issue with Breakpoint, be it a feature request or a bug report, please use our Issue Queue.
• Each Separate Bug Report or Feature Request Must Have Its Own Issue
• Search in both active issues and closed issues before filing your own. If one already exists, please respond there.
• If you are in IRC, the maintainers and many fellow users tend to hang out in the #sass and #compass rooms on irc.freenode.net. Asking in there may get you a quick answer to your question, but we still encourage you to file your inquiry in the appropriate place above to

Contributing to Breakpoint

We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the Contributing Guidelines

License

Licensed under MIT

MIT license: http://www.opensource.org/licenses/mit-license.php

Changelog

3.0.0

• Deprecation - Dropped Ruby, Eyeglass, Bower, and Sache support
• Fix - Fix math.div warnings
• Change - Sass 1.25+ is now a peer dependency

2.6.0

• Change Moved variable settings to new Breakpoint settings. Future versions will deprecate variable settings. Use @include breakpoint-set() or @include bkpt-set() to change settings, @include breakpoint-reset() or @include bkpt-reset() to reset settings to their default state. Please update your settings as followins:
  • $breakpoint-default-media: value; should become @include bkpt-set('default media', value);
  • $breakpoint-default-feature: value; should become @include bkpt-set('default feature', value);
  • $breakpoint-default-pair: value; should become @include bkpt-set('default pair', value);
  • $breakpoint-force-media-all: value; should become @include bkpt-set('force all media type', value);
  • $breakpoint-to-ems: value; should become @include bkpt-set('to ems', value);
  • $breakpoint-resolutions: value; should become @include bkpt-set('transform resolutions', value);
  • $breakpoint-no-queries: value; should become @include bkpt-set('no queries', value);
  • $breakpoint-no query fallbacks: value; should become @include bkpt-set('no query fallbacks', value);
  • $breakpoint-base-font-size: value; should become @include bkpt-set('base font size', value);
  • $breakpoint-legacy-syntax: value; should become @include bkpt-set('legacy syntax', value);
• Change Adding breakpoints for respond-to should now be done through the mixin @include add-breakpoint() instead of the function call $breakpoints: add-breakpoint(). Future versions will deprecate function.
• New Initial support for Libsass 3.1

2.5.0

2.4.0

2.3.0

2.2.0

Nov 23, 2013

• fix simple or queries
• convert respond-to to use sass maps
• convert context to use sass maps

2.0.7

Sept 17th, 2013

• fix fallback support for 1.x

2.0.0

The Past

• Looks like we forgot release notes for 2.0. oops

1.3

August 28th, 2012

• better conversion to base-ems
• fix floating point error

1.2

August 16th, 2012

• Added ability to force the 'all' media type to be written by setting $breakpoint-force-media-all: true;. Defaults to false.
• Added ability to generate no query fallback code. See the README for full documentaiton.

1.1.1

July 30, 2012

• Added (forgot to include the first time) the ability to query the media type using breakpoint-get-context('media')

1.1

July 29, 2012

• Added function breakpoint-get-context($feature) to allow users to get the current media query context

1.0.2

July 28, 2012

• Refixed our 'device-pixel-ratio' conversions because, frankly, the w3c was wrong.
• fixed bugs that caused single and triple value single queries to fail. Also bugs with stacking single and triple value queries.

1.0.1

June 27, 2012

• fixed logic error that would print multiple instences of a media type

1.0

June 22, 2012

• Refactor of the underlying logic to make everything work better and make the world a happy place.
• Added default options for Default Feature, Default Media, and Default Feature Pair.
• Changed default media from "Screen" to "All".
• Added ability to have all px/pt/percentage media queries transformed into em based media queries.

0.3

June 18, 2012

• Rewrote 'device-pixel-ratio' conversions to change from prefixed nightmarish hell to Resolution standard based on the W3C Unprefixing -webkit-device-pixel-ratio article
• Large README update covering feature set, installation, assumptions, and more.

0.2

May 24, 2012

• Converted from Sass to SCSS
• Converted README examples from Sass to SCSS
• Added ability to do min/max easily with any valid feature
• Added prefixing for "device-pixel-ratio" feature for the three implementations (-webkit, -moz, -o) as well as a standard version for future friendliness
  • -moz's min/max is different than -webkit or -o, so prefixed differently
  • Opera is strange and needs its DPR in a ratio instead of a floating point number, so requires the fraction rubygem and has a numerator/denominator function to accommodate.
• Added ability to have single feature/value input be either have feature first or second

0.1

May 22, 2012

• extract breakpoint from survival kit to this gem