pax_global_header00006660000000000000000000000064121765370420014521gustar00rootroot0000000000000052 comment=cc9fbaf760a2075b1dae0606bc724bd3579af7b6 breakpoint-2.0.6/000077500000000000000000000000001217653704200136645ustar00rootroot00000000000000breakpoint-2.0.6/.gitignore000066400000000000000000000000051217653704200156470ustar00rootroot00000000000000*.gembreakpoint-2.0.6/CHANGELOG.markdown000066400000000000000000000045431217653704200167250ustar00rootroot00000000000000# Changelog ## 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](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) * 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 breakpoint-2.0.6/CONTRIBUTING.md000066400000000000000000000022771217653704200161250ustar00rootroot00000000000000## Contributing to Breakpoint We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the following guidelines: * We are actively trying to stay away from Ruby functionality and am attempting to build this entirely with native Sass functionality. If you would like to add a feature that includes Ruby code, there needs to be a very very compelling case as to why. * Each individual feature you would like to add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 2.x.x. The current *development* branch is 2.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Breakpoint) we may ask you to rewrite your commit. breakpoint-2.0.6/README.markdown000066400000000000000000000063551217653704200163760ustar00rootroot00000000000000# 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](https://github.com/Team-Sass/breakpoint/wiki/Breakpoint-Context) 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](https://github.com/Team-Sass/breakpoint/wiki/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](https://github.com/nex3/sass/issues/241) hits, be sure we're going to take full advantage of it. ## Full documentation is available on the [Breakpoint Wiki](https://github.com/Team-Sass/breakpoint/wiki) ## Getting Help with Breakpoint * For help with Breakpoint, please ask a question on [Stack Overflow](http://stackoverflow.com/questions/ask) tagged with "breakpoint-sass". * To file an issue with Breakpoint, be it a feature request or a bug report, please use our [Issue Queue](https://github.com/Team-Sass/breakpoint/issues). * 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](https://github.com/Team-Sass/breakpoint/blob/2.x.x/CONTRIBUTING.md) ## Awesome Things Built With Breakpoint Breakpoint is designed to be a Media Query engine to power everything from design tweaks to media query contexts to full media query fallbacks. But we also know that our users will build awesome thing with these tools. Build a Breakpoint powered mixin for new media query semantics? We want to hear about it! Build something cool with Context? Let us know! If you would like to add your Awesome Thing to the list, please issue a Pull Request to add it! * [Singularity](https://github.com/Team-Sass/Singularity) - Semantic Grid System * [Breakpoint Slicer](https://github.com/lolmaus/breakpoint-slicer) - Quick and efficient syntax for Min/Max Width media queries ## License Licensed under MIT/GPL. GPL2 license: http://www.gnu.org/licenses/gpl-2.0.html MIT license: http://www.opensource.org/licenses/mit-license.php breakpoint-2.0.6/bower.json000066400000000000000000000002631217653704200156760ustar00rootroot00000000000000{ "name": "compass-breakpoint", "version": "2.0.5", "main": "stylesheets/_breakpoint.scss", "ignore": [ "**/.*", "node_modules", "components", "test" ] }breakpoint-2.0.6/breakpoint.gemspec000066400000000000000000000015571217653704200173770ustar00rootroot00000000000000require './lib/breakpoint' Gem::Specification.new do |s| # Release Specific Information s.version = Breakpoint::VERSION s.date = Breakpoint::DATE # Gem Details s.name = "breakpoint" s.rubyforge_project = "breakpoint" s.description = %q{Really simple media queries in Sass} s.summary = %q{An easy to use system for writing and managing media queries.} s.authors = ["Mason Wendell", "Sam Richard"] s.email = ["mason@zivtech.com", "sam@snug.ug"] s.homepage = "https://github.com/Team-Sass/breakpoint" # Gem Files s.files = ["README.markdown"] s.files += ["CHANGELOG.markdown"] s.files += Dir.glob("lib/**/*.*") s.files += Dir.glob("stylesheets/**/*.*") # Gem Bookkeeping s.required_rubygems_version = ">= 1.3.6" s.rubygems_version = %q{1.3.6} s.add_dependency("sass", [">=3.2.0"]) s.add_dependency("compass", [">= 0.12.1"]) end breakpoint-2.0.6/lib/000077500000000000000000000000001217653704200144325ustar00rootroot00000000000000breakpoint-2.0.6/lib/breakpoint.rb000066400000000000000000000020151217653704200171130ustar00rootroot00000000000000require 'compass' Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..") module Breakpoint VERSION = "2.0.6" DATE = "2012-08-01" end module Sass::Script::Functions def is_breakpoint_list(breakpoint) result = false unless breakpoint.class == Sass::Script::List && breakpoint.separator.to_s == 'comma' Sass::Script::Bool.new(result) end def featureExists(feature, list) testList = Array.new listLength = list.to_a.length - 1 # Only check if length greater than zero # Was throwing errors for floats (but strangely, not for ints) if listLength > 0 for i in 0..listLength if list.value[i].class == Sass::Script::List subList = list.value[i].to_a.length - 1 for j in 0..subList testList << list.value[i].value[j] end else testList << list.value[i] end end result = testList.include?(feature) else result = false end Sass::Script::Bool.new(result) end end breakpoint-2.0.6/stylesheets/000077500000000000000000000000001217653704200162405ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/_breakpoint.scss000066400000000000000000000064071217653704200214410ustar00rootroot00000000000000////////////////////////////// // Default Variables ////////////////////////////// // Default Features $breakpoint-default-media: all !default; $breakpoint-default-feature: min-width !default; $breakpoint-default-pair: width !default; // Default Transforms $breakpoint-force-media-all: false !default; $breakpoint-to-ems: false !default; $breakpoint-resolutions: true !default; // Default No Query Options $breakpoint-no-queries: false !default; $breakpoint-no-query-fallbacks: false !default; // Deftault Base Font Size $breakpoint-base-font-size: 16px !default; // Legacy Syntax Support $breakpoint-legacy-syntax: false !default; ////////////////////////////// // Imports ////////////////////////////// @import 'breakpoint/context'; @import 'breakpoint/helpers'; @import 'breakpoint/parsers'; @import 'breakpoint/no-query'; @import 'breakpoint/respond-to'; ////////////////////////////// // Breakpoint Mixin ////////////////////////////// @mixin breakpoint($query, $no-query: false) { // Internal Variables $query-string: ''; // Reset contexts @include private-breakpoint-reset-contexts(); // Test to see if it's a comma-separated list $or-list: is-breakpoint-list($query); $query-fallback: false; @if ($or-list != false and $breakpoint-legacy-syntax == false) { $length: length($query); $last: nth($query, $length); $query-fallback: breakpoint-no-query($last); @if ($query-fallback != false) { $length: $length - 1; } @for $i from 1 through $length { @if $i == 1 { $query-string: breakpoint-parse(nth($query, $i)); } @else { $query-string: $query-string + ', ' + breakpoint-parse(nth($query, $i)); } } } @else { @if ($breakpoint-legacy-syntax == true) { $length: length($query); $last: nth($query, $length); $query-fallback: breakpoint-no-query($last); @if ($query-fallback != false) { $length: $length - 1; } $mq: (); @for $i from 1 through $length { $mq: append($mq, nth($query, $i), comma); } $query-string: breakpoint-parse($mq); } @else { $query-string: breakpoint-parse($query); } } // Allow for an as-needed override or usage of no query fallback. @if $no-query != false { $query-fallback: $no-query; } // Print Out Query String @if not $breakpoint-no-queries { @media #{$query-string} { @content; } } @if $breakpoint-no-query-fallbacks != false { $type: type-of($breakpoint-no-query-fallbacks); $print: false; @if ($type == 'bool') { $print: true; } @else if ($type == 'string') { @if $query-fallback == $breakpoint-no-query-fallbacks { $print: true; } } @else if ($type == 'list') { @each $wrapper in $breakpoint-no-query-fallbacks { @if $query-fallback == $wrapper { $print: true; } } } // Write Fallback @if ($query-fallback != false) and ($print == true) { $type-fallback: type-of($query-fallback); @if ($type-fallback != 'bool') { #{$query-fallback} & { @content; } } @else { @content; } } } @include private-breakpoint-reset-contexts(); } breakpoint-2.0.6/stylesheets/breakpoint/000077500000000000000000000000001217653704200203765ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/breakpoint/_context.scss000066400000000000000000000072411217653704200231220ustar00rootroot00000000000000////////////////////////////// // Private Breakpoint Variables ////////////////////////////// $private-breakpoint-context-holder: (); $private-breakpoint-context-placeholder: 0; ////////////////////////////// // Breakpoint Has Context // Returns whether or not you are inside a Breakpoint query ////////////////////////////// @function breakpoint-has-context() { @if length($private-breakpoint-context-placeholder) { @return true; } @else { @return false; } } ////////////////////////////// // Breakpoint Get Context // $feature: Input feature to get it's current MQ context. Returns false if no context ////////////////////////////// @function breakpoint-get-context($feature) { @each $context in $private-breakpoint-context-holder { @if $feature == nth($context, 1) { // strip feature name $values: (); @for $i from 2 through length($context) { $values: append($values, nth($context, $i), comma); } $length: length($values) + 1; @for $i from $length through $private-breakpoint-context-placeholder { // Apply the Default Media type if feature is media @if $feature == 'media' { $values: append($values, $breakpoint-default-media, comma); } @else { $values: append($values, false, comma); } } @return $values; } } @return false; } ////////////////////////////// // Private function to set context ////////////////////////////// @function private-breakpoint-set-context($feature, $value) { @if $value == 'monochrome' { $feature: 'monochrome'; } $placeholder-plus-one: ($private-breakpoint-context-placeholder + 1); $holder: (); @if $private-breakpoint-context-placeholder == 1 { $holder: ($feature $value); $private-breakpoint-context-holder: append($private-breakpoint-context-holder, $holder, comma); @return true; } @else { $feature-used: false; @each $context in $private-breakpoint-context-holder { @if nth($context, 1) == $feature { $feature-used: $context; } } @if $feature-used != false { $holder: $feature; @for $i from 2 through $placeholder-plus-one { @if $i <= length($feature-used) { $holder: append($holder, nth($feature-used, $i), space); } @elseif $i < $placeholder-plus-one { $holder: append($holder, false, space); } @else { $holder: append($holder, $value, space); } } } @elseif $feature-used == false { $holder: $feature; @for $i from 2 through $placeholder-plus-one { @if $i < $placeholder-plus-one { // Apply the Default Media type if feature is media @if $feature == 'media' { $holder: append($holder, $breakpoint-default-media, space); } @else { $holder: append($holder, false, space); } } @else { $holder: append($holder, $value, space); } } } // Rebuild context $rebuild: (); @if $feature-used != false { @each $context in $private-breakpoint-context-holder { @if nth($context, 1) == nth($holder, 1) { $rebuild: append($rebuild, $holder, comma); } @else { $rebuild: append($rebuild, $context, comma); } } } @else { $rebuild: append($private-breakpoint-context-holder, $holder, comma); } $private-breakpoint-context-holder: $rebuild; } @return true; } ////////////////////////////// // Private function to reset context ////////////////////////////// @mixin private-breakpoint-reset-contexts { $private-breakpoint-context-holder: (); $private-breakpoint-context-placeholder: 0; } breakpoint-2.0.6/stylesheets/breakpoint/_helpers.scss000066400000000000000000000102471217653704200231000ustar00rootroot00000000000000////////////////////////////// // Converts the input value to Base EMs ////////////////////////////// @function breakpoint-to-base-em($value) { $value-unit: unit($value); // Will convert relative EMs into root EMs. @if $breakpoint-base-font-size and type-of($breakpoint-base-font-size) == 'number' and $value-unit == 'em' { $base-unit: unit($breakpoint-base-font-size); @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' { @return base-conversion($value) / base-conversion($breakpoint-base-font-size) * 1em; } @else { @warn '#{$breakpoint-base-font-size} is not set in valid units for font size!'; @return false; } } @else { @return base-conversion($value); } } @function base-conversion($value) { $unit: unit($value); @if $unit == 'px' { @return $value / 16px * 1em; } @else if $unit == '%' { @return $value / 100% * 1em; } @else if $unit == 'em' { @return $value; } @else if $unit == 'pt' { @return $value / 12pt * 1em; } @else { @return $value; // @warn 'Everything is terrible! What have you done?!'; } } ////////////////////////////// // Returns whether the feature can have a min/max pair ////////////////////////////// $breakpoint-min-max-features: 'color', 'color-index', 'aspect-ratio', 'device-aspect-ratio', 'device-height', 'device-width', 'height', 'monochrome', 'resolution', 'width'; @function breakpoint-min-max($feature) { @each $item in $breakpoint-min-max-features { @if $feature == $item { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature can have a string value ////////////////////////////// $breakpoint-string-features: 'orientation', 'scan', 'color', 'aspect-ratio', 'device-aspect-ratio', 'pointer', 'luminosity'; @function breakpoint-string-value($feature) { @each $item in $breakpoint-string-features { @if breakpoint-min-max($item) { @if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' { @return true; } } @else if $feature == $item { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature is a media type ////////////////////////////// $breakpoint-media-types: 'all', 'braille', 'embossed', 'handheld', 'print', 'projection', 'screen', 'speech', 'tty', 'tv'; @function breakpoint-is-media($feature) { @each $media in $breakpoint-media-types { @if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature can stand alone ////////////////////////////// $breakpoint-single-string-features: 'color', 'color-index', 'grid', 'monochrome'; @function breakpoint-single-string($feature) { @each $item in $breakpoint-single-string-features { @if $feature == $item { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature ////////////////////////////// @function breakpoint-is-resolution($feature) { $resolutions: 'device-pixel-ratio', 'dpr'; @if $breakpoint-resolutions { $resolutions: append($resolutions, 'resolution'); } @each $reso in $resolutions { @if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') { @return true; } } @return false; } breakpoint-2.0.6/stylesheets/breakpoint/_no-query.scss000066400000000000000000000005241217653704200232120ustar00rootroot00000000000000@function breakpoint-no-query($query) { @if type-of($query) == 'list' { $keyword: nth($query, 1); @if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') { @return nth($query, 2); } @else { @return false; } } @else { @return false; } } breakpoint-2.0.6/stylesheets/breakpoint/_parsers.scss000066400000000000000000000065311217653704200231160ustar00rootroot00000000000000////////////////////////////// // Import Parser Pieces ////////////////////////////// @import "parsers/query"; @import "parsers/single"; @import "parsers/double"; @import "parsers/triple"; @import "parsers/resolution"; ////////////////////////////// // General Breakpoint Parser ////////////////////////////// @function breakpoint-parse($query) { $private-breakpoint-context-placeholder: $private-breakpoint-context-placeholder + 1; // Set up Media Type $query-print: ''; $force-all: (($breakpoint-force-media-all == true) and ($breakpoint-default-media == 'all')); $empty-media: true; @if ($force-all == true) or ($breakpoint-default-media != 'all') { // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all) $query-print: $breakpoint-default-media; $empty-media: false; } $query-resolution: false; $query-holder: breakpoint-parse-query($query); // Loop over each parsed out query and write it to $query-print $first: true; @each $feature in $query-holder { $length: length($feature); // Parse a single feature @if ($length == 1) { // Feature is currenty a list, grab the actual value $feature: nth($feature, 1); // Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type @if (breakpoint-is-media($feature)) { @if ($force-all == true) or ($feature != 'all') { // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all) $query-print: $feature; $empty-media: false; // Set Context $context-setter: private-breakpoint-set-context(media, $query-print); } } @else { $parsed: breakpoint-parse-single($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } // Parse a double feature @else if ($length == 2) { @if (breakpoint-is-resolution($feature) != false) { $query-resolution: $feature; } @else { $parsed: null; // If it's a string/number pair, // we check to see if one is a single-string value, // then we parse it as a normal double $alpha: nth($feature, 1); $beta: nth($feature, 2); @if breakpoint-single-string($alpha) or breakpoint-single-string($beta) { $parsed: breakpoint-parse-single($alpha, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; $parsed: breakpoint-parse-single($beta, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; } @else { $parsed: breakpoint-parse-double($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } } // Parse a triple feature @else if ($length == 3) { $parsed: breakpoint-parse-triple($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } @if ($query-resolution != false) { $query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first); } // @return 'all'; @return $query-print; } breakpoint-2.0.6/stylesheets/breakpoint/_respond-to.scss000066400000000000000000000032541217653704200235300ustar00rootroot00000000000000//////////////////////// // Default the Breakpoints variable //////////////////////// $breakpoints: () !default; //////////////////////// // Respond-to API Mixin //////////////////////// @mixin respond-to($context, $no-query: false) { @if type-of($breakpoints) != 'list' { // Just in case someone writes gibberish to the $breakpoints variable. @warn "Your breakpoints aren't a list! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to"; } @if length($breakpoints) != 0 { // If there's only one breakpoint, SASS will think it's a space separated list :P @if length($breakpoints) == 2 and type-of(nth($breakpoints, 1)) != 'list' { $breakpoints: append((), (nth($breakpoints, 1), nth($breakpoints, 2))); } @each $bkpt in $breakpoints { @if $context == nth($bkpt, 1) { $length: length($bkpt); $mq: false !default; @for $i from 2 through $length { // If it's the first item, override $mq @if $i == 2 { $mq: nth($bkpt, $i); } // Else, join $mq @else { $mq: join($mq, nth($bkpt, $i)); } } @include breakpoint($mq, $no-query) { @content; } } } } @else { @warn "You haven't created any breakpoints yet! Make some already! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to"; @content; } } ////////////////////////////// // Add Breakpoint to Breakpoints ////////////////////////////// @function add-breakpoint($name, $bkpt) { $bkpt: $name $bkpt; $output: append($breakpoints, $bkpt, 'comma'); @return $output; }breakpoint-2.0.6/stylesheets/breakpoint/parsers/000077500000000000000000000000001217653704200220555ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/breakpoint/parsers/_double.scss000066400000000000000000000020711217653704200243630ustar00rootroot00000000000000////////////////////////////// // Import Pieces ////////////////////////////// @import "double/default-pair"; @import "double/double-string"; @import "double/default"; @function breakpoint-parse-double($feature, $empty-media, $first) { $parsed: ''; $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } $first: nth($feature, 1); $second: nth($feature, 2); // If we've got two numbers, we know we need to use the default pair because there are no media queries that has a media feature that is a number @if type-of($first) == 'number' and type-of($second) == 'number' { $parsed: breakpoint-parse-default-pair($first, $second); } // If they are both strings, we send it through the string parser @else if type-of($first) == 'string' and type-of($second) == 'string' { $parsed: breakpoint-parse-double-string($first, $second); } // If it's a string/number pair, we parse it as a normal double @else { $parsed: breakpoint-parse-double-default($first, $second); } @return $leader + $parsed; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/_query.scss000066400000000000000000000067751217653704200242750ustar00rootroot00000000000000@function breakpoint-parse-query($query) { // Parse features out of an individual query $feature-holder: (); $query-holder: (); $length: length($query); @if $length == 2 { // If we've got a string/number, number/string, check to see if it's a valid string/number pair or two singles @if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') or (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'string') { $number: ''; $value: ''; @if type-of(nth($query, 1)) == 'string' { $number: nth($query, 2); $value: nth($query, 1); } @else { $number: nth($query, 1); $value: nth($query, 2); } // If the string value can be a single value, check to see if the number passed in is a valid input for said single value. Fortunately, all current single-value options only accept unitless numbers, so this check is easy. @if breakpoint-single-string($value) { @if unitless($number) { $feature-holder: append($value, $number, space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } // If the string is a media type, split the query @if breakpoint-is-media($value) { $query-holder: append($query-holder, nth($query, 1)); $query-holder: append($query-holder, nth($query, 2)); @return $query-holder; } // If it's not a single feature, we're just going to assume it's a proper string/value pair, and roll with it. @else { $feature-holder: append($value, $number, space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } // If they're both numbers, we assume it's a double and roll with that @else if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') { $feature-holder: append(nth($query, 1), nth($query, 2), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } // If they're both strings and neither are singles, we roll with that. @else if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'string') { @if not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) { $feature-holder: append(nth($query, 1), nth($query, 2), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } } @else if $length == 3 { // If we've got three items and none is a list, we check to see @if type-of(nth($query, 1)) != 'list' and type-of(nth($query, 2)) != 'list' and type-of(nth($query, 3)) != 'list' { // If none of the items are single string values and none of the values are media values, we're good. @if (not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) and not breakpoint-single-string(nth($query, 3))) and ((not breakpoint-is-media(nth($query, 1)) and not breakpoint-is-media(nth($query, 2)) and not breakpoint-is-media(nth($query, 3)))) { $feature-holder: append(nth($query, 1), nth($query, 2), space); $feature-holder: append($feature-holder, nth($query, 3), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } } // If it's a single item, or if it's not a special case double or tripple, we can simply return the query. @return $query; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/_resolution.scss000066400000000000000000000014051217653704200253140ustar00rootroot00000000000000@import "resolution/resolution"; @function breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first) { $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } @if $breakpoint-resolutions and $query-resolution { $resolutions: breakpoint-make-resolutions($query-resolution); $length: length($resolutions); $query-holder: ''; @for $i from 1 through $length { $query: '#{$query-print} #{$leader}#{nth($resolutions, $i)}'; @if $i == 1 { $query-holder: $query; } @else { $query-holder: '#{$query-holder}, #{$query}'; } } @return $query-holder; } @else { // Return with attached resolution @return $query-print; } } breakpoint-2.0.6/stylesheets/breakpoint/parsers/_single.scss000066400000000000000000000013031217653704200243670ustar00rootroot00000000000000////////////////////////////// // Import Pieces ////////////////////////////// @import "single/default"; @function breakpoint-parse-single($feature, $empty-media, $first) { $parsed: ''; $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } // If it's a single feature that can stand alone, we let it @if (breakpoint-single-string($feature)) { $parsed: $feature; // Set Context $context-setter: private-breakpoint-set-context($feature, $feature); } // If it's not a stand alone feature, we pass it off to the default handler. @else { $parsed: breakpoint-parse-default($feature); } @return $leader + '(' + $parsed + ')'; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/_triple.scss000066400000000000000000000013651217653704200244150ustar00rootroot00000000000000////////////////////////////// // Import Pieces ////////////////////////////// @import "triple/default"; @function breakpoint-parse-triple($feature, $empty-media, $first) { $parsed: ''; $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } // separate the string features from the value numbers $string: null; $numbers: null; @each $val in $feature { @if type-of($val) == string { $string: $val; } @else { @if type-of($numbers) == 'null' { $numbers: $val; } @else { $numbers: append($numbers, $val); } } } $parsed: breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2)); @return $leader + $parsed; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/double/000077500000000000000000000000001217653704200233275ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/breakpoint/parsers/double/_default-pair.scss000066400000000000000000000011271217653704200267410ustar00rootroot00000000000000@function breakpoint-parse-default-pair($first, $second) { $default: $breakpoint-default-pair; $min: ''; $max: ''; // Sort into min and max $min: min($first, $second); $max: max($first, $second); // Set Context $context-setter: private-breakpoint-set-context(min-#{$default}, $min); $context-setter: private-breakpoint-set-context(max-#{$default}, $max); // Make them EMs if need be @if ($breakpoint-to-ems == true) { $min: breakpoint-to-base-em($min); $max: breakpoint-to-base-em($max); } @return '(min-#{$default}: #{$min}) and (max-#{$default}: #{$max})'; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/double/_default.scss000066400000000000000000000006741217653704200260160ustar00rootroot00000000000000@function breakpoint-parse-double-default($first, $second) { $feature: ''; $value: ''; @if type-of($first) == 'string' { $feature: $first; $value: $second; } @else { $feature: $second; $value: $first; } // Set Context $context-setter: private-breakpoint-set-context($feature, $value); @if ($breakpoint-to-ems == true) { $value: breakpoint-to-base-em($value); } @return '(#{$feature}: #{$value})' } breakpoint-2.0.6/stylesheets/breakpoint/parsers/double/_double-string.scss000066400000000000000000000006621217653704200271450ustar00rootroot00000000000000@function breakpoint-parse-double-string($first, $second) { $feature: ''; $value: ''; // Test to see which is the feature and which is the value @if (breakpoint-string-value($first) == true) { $feature: $first; $value: $second; } @else { $feature: $second; $value: $first; } // Set Context $context-setter: private-breakpoint-set-context($feature, $value); @return '(#{$feature}: #{$value})'; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/resolution/000077500000000000000000000000001217653704200242605ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/breakpoint/parsers/resolution/_resolution.scss000066400000000000000000000031631217653704200275220ustar00rootroot00000000000000@function breakpoint-make-resolutions($resolution) { $length: length($resolution); $output: (); @if $length == 2 { $feature: ''; $value: ''; // Find which is number @if type-of(nth($resolution, 1)) == 'number' { $value: nth($resolution, 1); } @else { $value: nth($resolution, 2); } // Determine min/max/standard @if index($resolution, 'min-resolution') { $feature: 'min-'; } @else if index($resolution, 'max-resolution') { $feature: 'max-'; } $standard: '(#{$feature}resolution: #{$value})'; // If we're not dealing with dppx, @if unit($value) != 'dppx' { $base: 96dpi; @if unit($value) == 'dpcm' { $base: 243.84dpcm; } // Write out feature tests $webkit: ''; $moz: ''; $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / $base})'; $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / $base})'; // Append to output $output: append($output, $standard, space); $output: append($output, $webkit, space); $output: append($output, $moz, space); } @else { $webkit: ''; $moz: ''; $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / 1dppx})'; $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / 1dppx})'; $fallback: '(#{$feature}resolution: #{$value / 1dppx * 96dpi})'; // Append to output $output: append($output, $standard, space); $output: append($output, $webkit, space); $output: append($output, $moz, space); $output: append($output, $fallback, space); } } @return $output; } breakpoint-2.0.6/stylesheets/breakpoint/parsers/single/000077500000000000000000000000001217653704200233365ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/breakpoint/parsers/single/_default.scss000066400000000000000000000005661217653704200260250ustar00rootroot00000000000000@function breakpoint-parse-default($feature) { $default: $breakpoint-default-feature; // Set Context $context-setter: private-breakpoint-set-context($default, $feature); @if ($breakpoint-to-ems == true) and (type-of($feature) == 'number') { @return '#{$default}: #{breakpoint-to-base-em($feature)}'; } @else { @return '#{$default}: #{$feature}'; } } breakpoint-2.0.6/stylesheets/breakpoint/parsers/triple/000077500000000000000000000000001217653704200233545ustar00rootroot00000000000000breakpoint-2.0.6/stylesheets/breakpoint/parsers/triple/_default.scss000066400000000000000000000010451217653704200260340ustar00rootroot00000000000000@function breakpoint-parse-triple-default($feature, $first, $second) { // Sort into min and max $min: min($first, $second); $max: max($first, $second); // Set Context $context-setter: private-breakpoint-set-context(min-#{$feature}, $min); $context-setter: private-breakpoint-set-context(max-#{$feature}, $max); // Make them EMs if need be @if ($breakpoint-to-ems == true) { $min: breakpoint-to-base-em($min); $max: breakpoint-to-base-em($max); } @return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})'; } breakpoint-2.0.6/test/000077500000000000000000000000001217653704200146435ustar00rootroot00000000000000breakpoint-2.0.6/test/.gitignore000066400000000000000000000002631217653704200166340ustar00rootroot00000000000000## MAC OS .DS_Store ## TEXTMATE *.tmproj tmtags ## EMACS *~ \#* .\#* ## VIM *.swp ## PROJECT::GENERAL .sass-cache coverage rdoc pkg ## PROJECT::SPECIFIC *.gem .rvmrc .bundle breakpoint-2.0.6/test/Gemfile000066400000000000000000000006641217653704200161440ustar00rootroot00000000000000source :rubygems gem 'serve', '1.5.1' # Use edge instead: # gem 'serve', :git => 'git://github.com/jlong/serve.git' # Use Compass and Sass gem 'compass' # Markdown and Textile # gem 'rdiscount' # Markdown # gem 'RedCloth' # Textile gem 'maruku' # Other templating languages # gem 'erubis' gem 'haml' # gem 'slim' # gem 'radius' # gem 'less' # Coffee Script # gem 'coffee-script' # Use mongrel for the Web server # gem 'mongrel' breakpoint-2.0.6/test/Gemfile.lock000066400000000000000000000012761217653704200170730ustar00rootroot00000000000000GEM remote: http://rubygems.org/ specs: activesupport (3.2.12) i18n (~> 0.6) multi_json (~> 1.0) chunky_png (1.2.7) compass (0.12.2) chunky_png (~> 1.2) fssm (>= 0.2.7) sass (~> 3.1) fssm (0.2.10) haml (4.0.0) tilt i18n (0.6.4) maruku (0.6.1) syntax (>= 1.0.0) multi_json (1.6.1) rack (1.5.2) rack-test (0.6.2) rack (>= 1.0) sass (3.2.7) serve (1.5.1) activesupport (~> 3.0) i18n rack (~> 1.2) rack-test (~> 0.5) tilt (~> 1.3) tzinfo syntax (1.0.0) tilt (1.3.5) tzinfo (0.3.36) PLATFORMS ruby DEPENDENCIES compass haml maruku serve (= 1.5.1) breakpoint-2.0.6/test/config.rb000066400000000000000000000032041217653704200164340ustar00rootroot00000000000000# require 'breakpoint' # # Compass Configuration # # HTTP paths # http_path = '/' # http_stylesheets_path = '/stylesheets' # http_images_path = '/images' # http_javascripts_path = '/js' # File system locations sass_dir = 'sass' css_dir = 'css' images_dir = 'images' javascripts_dir = 'js' add_import_path '../stylesheets' # Set to true for easier debugging line_comments = false # preferred_syntax = :sass # CSS output style - :nested, :expanded, :compact, or :compressed output_style = :expanded # Determine whether Compass asset helper functions generate relative # or absolute paths relative_assets = true # Learn more: # http://compass-style.org/docs/tutorials/configuration-reference/ module Sass::Script::Functions def is_breakpoint_list(breakpoint) result = false unless breakpoint.class == Sass::Script::List && breakpoint.separator.to_s == 'comma' Sass::Script::Bool.new(result) end def featureExists(feature, list) testList = Array.new listLength = list.to_a.length - 1 # Only check if length greater than zero # Was throwing errors for floats (but strangely, not for ints) if listLength > 0 for i in 0..listLength if list.value[i].class == Sass::Script::List subList = list.value[i].to_a.length - 1 for j in 0..subList testList << list.value[i].value[j] end else testList << list.value[i] end end result = testList.include?(feature) else result = false end Sass::Script::Bool.new(result) end end breakpoint-2.0.6/test/config.ru000066400000000000000000000024571217653704200164700ustar00rootroot00000000000000# \ -p 4000 require 'rubygems' require 'bundler' begin Bundler.setup(:default, :development) rescue Bundler::BundlerError => e $stderr.puts e.message $stderr.puts "Run `bundle install` to install missing gems" exit e.status_code end require 'serve' require 'serve/rack' # The project root directory root = ::File.dirname(__FILE__) # Compile Sass on the fly with the Sass plugin. Some production environments # don't allow you to write to the file system on the fly (like Heroku). # Remove this conditional if you want to compile Sass in production. # if ENV['RACK_ENV'] != 'production' # require 'sass' # require 'sass/plugin/rack' # require 'compass' # require 'susy' # Compass.add_project_configuration(root + '/config.rb') # Compass.configure_sass_plugin! # use Sass::Plugin::Rack # Sass Middleware # end # Other Rack Middleware use Rack::ShowStatus # Nice looking 404s and other messages use Rack::ShowExceptions # Nice looking errors # Rack Application if ENV['SERVER_SOFTWARE'] =~ /passenger/i # Passendger only needs the adapter run Serve::RackAdapter.new(root + '/views') else # Use Rack::Cascade and Rack::Directory on other platforms for static assets run Rack::Cascade.new([ Serve::RackAdapter.new(root + '/views'), Rack::Directory.new(root + '/public') ]) end breakpoint-2.0.6/test/css/000077500000000000000000000000001217653704200154335ustar00rootroot00000000000000breakpoint-2.0.6/test/css/ie.css000066400000000000000000000044111217653704200165420ustar00rootroot00000000000000/* * BREAKPOINT TESTS */ /* * Assume $breakpoint-default-feature * if only a number * $single-pixel-value: 500px; * $single-em-value: 30em; */ /* $breakpoint-to-ems: true; */ /* * Single value with feature * $feature-first : height 500px; * $value-first : 500px height; * $arbitrary-feature : lion 500px; * $feature-value-both-strings : portrait orientation; */ /* $breakpoint-to-ems: true; */ /* * Set min-width/max-width * if both values are numbers * $min-max-default-feature : 500px 700px; */ /* $breakpoint-to-ems: true; */ /* * Set min/max of feature * if there are two numbers and a feature * $feature-min-max : height 300px 700px; * $min-max-feature : 300px 700px height; * $arbitrary-feature-min-max : lion 300px 700px; */ /* $breakpoint-to-ems: true; */ /* * Multidimensional lists, * assume each item is a feature value pair * $multidimensional : max-width 700px orientation portrait; */ /* $breakpoint-to-ems: true; */ /* * 'OR' mediaqueries. * tests separated by commas * $basic-or : 500px, tv 700px color; */ /* $breakpoint-to-ems: true; */ /* * One-sided features (ie. monochrome) * $monochrome : monochrome; * $monochrome-double : 300px monochrome; * $multidimensional-plus-one-sided : max-width 700px orientation portrait monochrome; */ /* $breakpoint-to-ems: true; */ /* * One-sided features (ie. monochrome) * $not : not screen; */ /* * Double string feature (i.e. string: string) * $aspect-ratio : "min-aspect-ratio" "300/250"; * $device-aspect-ratio : "max-device-aspect-ratio" "320/480"; */ /* * One-sided features (ie. monochrome) * $not : not screen; */ .no-mq .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } /* * Resolution queries, device pixel ratio and standard resolution * $device-pixel-ratio: "resolution" 2dppx * $resolution: "min-resolution" 192dpi */ /* * Queries to test Breakpoint Get Context * $context-simple: 500px * $context-single: monochrome * $context-and: 500px 700px * $context-max: max-width 700px * $context-string: orientation portrait * $context-triple: height 800px 1000px * $context-media-type: print * $context-or: 500px max-height 1200px, 600px 700px * $context-complex: 500px, screen 500px 700px, 300px monochrome */ #dynamic { content: 'No Context!'; } breakpoint-2.0.6/test/css/style.css000066400000000000000000000241641217653704200173140ustar00rootroot00000000000000/* * BREAKPOINT TESTS */ /* * Assume $breakpoint-default-feature * if only a number * $single-pixel-value: 500px; * $single-em-value: 30em; */ @media (min-width: 500px) { .breakpoint-default-feature { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .breakpoint-default-feature { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 500px) { .breakpoint-default-feature { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .breakpoint-default-feature { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } /* $breakpoint-to-ems: true; */ @media (min-width: 31.25em) { .breakpoint-default-feature-to-ems { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } } @media (min-width: 30em) { .breakpoint-default-feature-to-ems { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } /* * Single value with feature * $feature-first : height 500px; * $value-first : 500px height; * $arbitrary-feature : lion 500px; * $feature-value-both-strings : portrait orientation; */ @media (height: 500px) { .feature-value-pair { content: '$feature-first'; content: '@media (height: 500px)'; } } @media (height: 500px) { .feature-value-pair { content: '$value-first'; content: '@media (height: 500px)'; } } @media (lion: 500px) { .feature-value-pair { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } } @media (orientation: portrait) { .feature-value-pair { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } /* $breakpoint-to-ems: true; */ @media (height: 31.25em) { .feature-value-pair-to-ems { content: '$feature-first'; content: '@media (height: 31.25em)'; } } @media (height: 31.25em) { .feature-value-pair-to-ems { content: '$value-first'; content: '@media (height: 31.25em)'; } } @media (lion: 31.25em) { .feature-value-pair-to-ems { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } /* * Set min-width/max-width * if both values are numbers * $min-max-default-feature : 500px 700px; */ @media (min-width: 500px) and (max-width: 700px) { .min-max-default-feature { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } /* $breakpoint-to-ems: true; */ @media (min-width: 31.25em) and (max-width: 43.75em) { .min-max-default-feature-to-ems { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } /* * Set min/max of feature * if there are two numbers and a feature * $feature-min-max : height 300px 700px; * $min-max-feature : 300px 700px height; * $arbitrary-feature-min-max : lion 300px 700px; */ @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } /* $breakpoint-to-ems: true; */ @media (min-height: 18.75em) and (max-height: 43.75em) { .min-max-feature-to-ems { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-height: 18.75em) and (max-height: 43.75em) { .min-max-feature-to-ems { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-lion: 18.75em) and (max-lion: 43.75em) { .min-max-feature-to-ems { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } /* * Multidimensional lists, * assume each item is a feature value pair * $multidimensional : max-width 700px orientation portrait; */ @media (max-width: 700px) and (orientation: portrait) { .multidimensional { content: '$multidimensional'; content: '@media (max-width: 700px) and (orientation: portrait)'; } } /* $breakpoint-to-ems: true; */ @media (max-width: 43.75em) and (orientation: portrait) { .multidimensional-to-ems { content: '$multidimensional'; content: '@media (max-width: 43.75em) and (orientation: portrait)'; } } /* * 'OR' mediaqueries. * tests separated by commas * $basic-or : 500px, tv 700px color; */ @media (min-width: 500px), tv and (min-width: 700px) and (color) { .basic-or { content: '$basic-or'; content: '@media (max-width: 700px) and (orientation: portrait)'; } } @media (min-width: 500px), tv and (min-width: 700px) and (color) { .basic-or { content: '$basic-or'; content: '@media (max-width: 700px) and (orientation: portrait)'; } } /* $breakpoint-to-ems: true; */ @media (min-width: 31.25em), tv and (min-width: 43.75em) and (color) { .basic-or-to-ems { content: '$basic-or'; content: '@media (max-width: 43.75em) and (orientation: portrait)'; } } /* * One-sided features (ie. monochrome) * $monochrome : monochrome; * $monochrome-double : 300px monochrome; * $multidimensional-plus-one-sided : max-width 700px orientation portrait monochrome; */ @media (monochrome) { .one-sided { content: '$monochrome'; content: '@media (monochrome)'; } } @media (monochrome) and (min-width: 300px) { .one-sided { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } } @media (max-width: 700px) and (orientation: portrait) and (monochrome) { .one-sided { content: '$multidimensional-plus-one-sided'; content: '@media (max-width: 700px) and (orientation: portrait) and (monochrome)'; } } /* $breakpoint-to-ems: true; */ @media (monochrome) and (min-width: 18.75em) { .one-sided-to-ems { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } } @media (max-width: 43.75em) and (orientation: portrait) and (monochrome) { .one-sided-to-ems { content: '$multidimensional-plus-one-sided'; content: '@media (max-width: 43.75em) and (orientation: portrait) and (monochrome)'; } } /* * One-sided features (ie. monochrome) * $not : not screen; */ @media not screen { .not { content: '$not'; content: '@media not screen'; } } @media not tv and (min-width: 500px) { .not { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } /* * Double string feature (i.e. string: string) * $aspect-ratio : "min-aspect-ratio" "300/250"; * $device-aspect-ratio : "max-device-aspect-ratio" "320/480"; */ @media (min-aspect-ratio: 300 / 250) { .aspect-ratio { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } } @media (max-device-aspect-ratio: 320 / 480) { .aspect-ratio { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } /* * One-sided features (ie. monochrome) * $not : not screen; */ @media not screen and (min-width: 500px) { .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } /* * Resolution queries, device pixel ratio and standard resolution * $device-pixel-ratio: "resolution" 2dppx * $resolution: "min-resolution" 192dpi */ @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-mox-device-pixel-ratio: 2), (resolution: 192dpi)'; } } @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) { .resolution { content: "min-resolution" 192dpi; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } } @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-mox-device-pixel-ratio: 2), (resolution: 192dpi)'; } } /* * Queries to test Breakpoint Get Context * $context-simple: 500px * $context-single: monochrome * $context-and: 500px 700px * $context-max: max-width 700px * $context-string: orientation portrait * $context-triple: height 800px 1000px * $context-media-type: print * $context-or: 500px max-height 1200px, 600px 700px * $context-complex: 500px, screen 500px 700px, 300px monochrome */ @media (min-width: 500px) { .context { content: '@media (min-width: 500px)'; } } @media (monochrome) { .context { content: '@media (monochrome)'; } } @media (min-width: 500px) and (max-width: 700px) { .context { content: '@media (min-width: 500px) and (max-width: 700px)'; } } @media (max-width: 700px) { .context { content: '@media (max-width: 700px)'; } } @media (orientation: portrait) { .context { content: '@media (orientation: portrait)'; } } @media (min-height: 800px) and (max-height: 1000px) { .context { content: '@media (min-height: 800px) and (max-height: 1000px)'; } } @media print { .context { content: '@media print'; } } @media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px) { .context { content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)'; } } @media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px) { .context { content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)'; } } #dynamic { content: 'No Context!'; } @media (min-width: 400px) and (min-height: 200px), (min-width: 300px) and (max-width: 325px) and (orientation: portriat) and (monochrome) { #dynamic { content: 'No Context!'; } } breakpoint-2.0.6/test/sass/000077500000000000000000000000001217653704200156145ustar00rootroot00000000000000breakpoint-2.0.6/test/sass/ie.scss000066400000000000000000000002101217653704200170770ustar00rootroot00000000000000$breakpoint-no-queries: true; $breakpoint-no-query-fallbacks: '.no-mq'; // $breakpoint-no-query-wrappers: '.touch'; @import 'style'; breakpoint-2.0.6/test/sass/style.scss000066400000000000000000000321431217653704200176540ustar00rootroot00000000000000/* * BREAKPOINT TESTS */ // Import Breakpoint @import "breakpoint"; ////////////////////////////// // Breakpoint Flags ////////////////////////////// // Default Features // $breakpoint-default-media: screen; // $breakpoint-default-feature: max-width; // $breakpoint-default-pair: 'width'; // Default Transforms // $breakpoint-force-media-all: true; // $breakpoint-to-ems: false; // $breakpoint-resolution: true; // Default No Query Options // $breakpoint-no-queries: false; // $breakpoint-no-query-fallbacks: false; // Deftault Base Font Size // $breakpoint-base-font-size: 16px; // TESTS $single-pixel-value: 500px; $single-em-value: 30em; $breakpoint-to-ems: false; $breakpoints: add-breakpoint('single pixel value', $single-pixel-value); $breakpoints: add-breakpoint('single pixel value, em', $single-em-value); /* * Assume $breakpoint-default-feature * if only a number * $single-pixel-value: #{$single-pixel-value}; * $single-em-value: #{$single-em-value}; */ .breakpoint-default-feature { @include breakpoint($single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } @include breakpoint($single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } @include respond-to('single pixel value') { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } @include respond-to('single pixel value, em') { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .breakpoint-default-feature-to-ems { @include breakpoint($single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } @include breakpoint($single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } $feature-first: height 500px ; $value-first: 500px height; $arbitrary-feature: lion 500px; $feature-value-both-strings: portrait orientation; $breakpoint-to-ems: false; /* * Single value with feature * $feature-first : #{$feature-first}; * $value-first : #{$value-first}; * $arbitrary-feature : #{$arbitrary-feature}; * $feature-value-both-strings : #{$feature-value-both-strings}; */ .feature-value-pair { @include breakpoint($feature-first) { content: '$feature-first'; content: '@media (height: 500px)'; } @include breakpoint($value-first) { content: '$value-first'; content: '@media (height: 500px)'; } @include breakpoint($arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } @include breakpoint($feature-value-both-strings) { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .feature-value-pair-to-ems { @include breakpoint($feature-first) { content: '$feature-first'; content: '@media (height: 31.25em)'; } @include breakpoint($value-first) { content: '$value-first'; content: '@media (height: 31.25em)'; } @include breakpoint($arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } $min-max-default-feature: 500px 700px; $breakpoint-to-ems: false; /* * Set min-width/max-width * if both values are numbers * $min-max-default-feature : #{$min-max-default-feature}; */ .min-max-default-feature { @include breakpoint($min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .min-max-default-feature-to-ems { @include breakpoint($min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } $feature-min-max: height 300px 700px; $min-max-feature: 300px 700px height; $arbitrary-feature-min-max: lion 300px 700px; $breakpoint-to-ems: false; /* * Set min/max of feature * if there are two numbers and a feature * $feature-min-max : #{$feature-min-max}; * $min-max-feature : #{$min-max-feature}; * $arbitrary-feature-min-max : #{$arbitrary-feature-min-max}; */ .min-max-feature { @include breakpoint($feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } @include breakpoint($min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } @include breakpoint($arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .min-max-feature-to-ems { @include breakpoint($feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } @include breakpoint($min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } @include breakpoint($arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } $multidimensional: (max-width 700px) (orientation portrait); $breakpoint-to-ems: false; /* * Multidimensional lists, * assume each item is a feature value pair * $multidimensional : #{$multidimensional}; */ .multidimensional { @include breakpoint($multidimensional) { content: '$multidimensional'; content: '@media (max-width: 700px) and (orientation: portrait)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .multidimensional-to-ems { @include breakpoint($multidimensional) { content: '$multidimensional'; content: '@media (max-width: 43.75em) and (orientation: portrait)'; } } $basic-or: 500px, tv 700px color; $breakpoint-to-ems: false; $breakpoints: add-breakpoint('basic or', $basic-or); /* * 'OR' mediaqueries. * tests separated by commas * $basic-or : #{$basic-or}; */ .basic-or { @include breakpoint($basic-or) { content: '$basic-or'; content: '@media (max-width: 700px) and (orientation: portrait)'; } @include respond-to('basic or') { content: '$basic-or'; content: '@media (max-width: 700px) and (orientation: portrait)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .basic-or-to-ems { @include breakpoint($basic-or) { content: '$basic-or'; content: '@media (max-width: 43.75em) and (orientation: portrait)'; } } $monochrome: monochrome; $monochrome-double: 300px monochrome; $multidimensional-plus-one-sided: (max-width 700px) (orientation portrait) (monochrome); $breakpoint-to-ems: false; /* * One-sided features (ie. monochrome) * $monochrome : #{$monochrome}; * $monochrome-double : #{$monochrome-double}; * $multidimensional-plus-one-sided : #{$multidimensional-plus-one-sided}; */ .one-sided { @include breakpoint($monochrome) { content: '$monochrome'; content: '@media (monochrome)'; } @include breakpoint($monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } @include breakpoint($multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (max-width: 700px) and (orientation: portrait) and (monochrome)'; } } /* $breakpoint-to-ems: true; */ $breakpoint-to-ems: true; .one-sided-to-ems { @include breakpoint($monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } @include breakpoint($multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (max-width: 43.75em) and (orientation: portrait) and (monochrome)'; } } $not: 'not screen'; $not-plus-default: 'not tv' 500px; $breakpoint-to-ems: false; /* * One-sided features (ie. monochrome) * $not : #{$not}; */ .not { @include breakpoint($not) { content: '$not'; content: '@media not screen'; } @include breakpoint($not-plus-default) { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } $aspect-ratio: 'min-aspect-ratio' '300/250'; $device-aspect-ratio: 'max-device-aspect-ratio' '320/480'; $breakpoint-to-ems: false; /* * Double string feature (i.e. string: string) * $aspect-ratio : #{$aspect-ratio}; * $device-aspect-ratio : #{$device-aspect-ratio}; */ .aspect-ratio { @include breakpoint($aspect-ratio) { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } @include breakpoint($device-aspect-ratio) { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } $legacy: 'not screen', 500px, 'no-query' '.no-mq'; $breakpoint-to-ems: false; $breakpoint-legacy-syntax: true; /* * One-sided features (ie. monochrome) * $not : #{$not}; */ .legacy { @include breakpoint($legacy) { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } $breakpoint-legacy-syntax: false; $device-pixel-ratio: 'resolution' 2dppx; $resolution: 'min-resolution' 192dpi; $breakpoint-resolutions: true; $breakpoints: add-breakpoint('device pixel ratio', $device-pixel-ratio); /* * Resolution queries, device pixel ratio and standard resolution * $device-pixel-ratio: #{$device-pixel-ratio} * $resolution: #{$resolution} */ .resolution { @include breakpoint($device-pixel-ratio) { content: $device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-mox-device-pixel-ratio: 2), (resolution: 192dpi)'; } @include breakpoint($resolution) { content: $resolution; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } @include respond-to('device pixel ratio') { content: $device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-mox-device-pixel-ratio: 2), (resolution: 192dpi)'; } } $context-simple: 500px; $context-single: monochrome; $context-and: 500px 700px; $context-max: max-width 700px; $context-string: orientation portrait; $context-triple: height 800px 1000px; $context-media-type: (print); $context-or: (500px) (max-height 1200px), 600px 700px; $context-complex: 500px, (screen) (500px 700px), (300px) (monochrome); /* * Queries to test Breakpoint Get Context * $context-simple: #{$context-simple} * $context-single: #{$context-single} * $context-and: #{$context-and} * $context-max: #{$context-max} * $context-string: #{$context-string} * $context-triple: #{$context-triple} * $context-media-type: #{$context-media-type} * $context-or: #{$context-or} * $context-complex: #{$context-complex} */ .context { @include breakpoint($context-simple) { content: '@media (min-width: 500px)'; @debug breakpoint-get-context(min-width); } @include breakpoint($context-single) { content: '@media (monochrome)'; @debug breakpoint-get-context(monochrome); } @include breakpoint($context-and) { content: '@media (min-width: 500px) and (max-width: 700px)'; @debug breakpoint-get-context(min-width); @debug breakpoint-get-context(max-width); } @include breakpoint($context-max) { content: '@media (max-width: 700px)'; @debug breakpoint-get-context(max-width); } @include breakpoint($context-string) { content: '@media (orientation: portrait)'; @debug breakpoint-get-context(orientation); } @include breakpoint($context-triple) { content: '@media (min-height: 800px) and (max-height: 1000px)'; @debug breakpoint-get-context(min-height); @debug breakpoint-get-context(max-height); } @include breakpoint($context-media-type) { content: '@media print'; @debug breakpoint-get-context(media); } @include breakpoint($context-or) { content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)'; @debug breakpoint-get-context(min-width); @debug breakpoint-get-context(max-width); @debug breakpoint-get-context(max-height); @debug breakpoint-get-context(orientation); } @include breakpoint($context-complex) { content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)'; @debug breakpoint-get-context(min-width); @debug breakpoint-get-context(max-width); @debug breakpoint-get-context(media); @debug breakpoint-get-context(monochrome); } } $dynamic-context: 400px ('min-height' 200px), (300px 325px) (orientation portriat) monochrome; $test: 350px; @mixin context-test() { $min-width: breakpoint-get-context('foo'); $found: false; @if $min-width { @each $context in $min-width { @if $context != false { @if ($test > $context) { content: 'In Context!'; $found: true; } } } } @else { content: 'No Context!'; $found: true; } @if not $found { content: 'Not In Context'; } } #dynamic { @include context-test; @include breakpoint($dynamic-context) { @include context-test; } } $multi-media: 300px, print, 200px; #multi-media { @include breakpoint($multi-media) { @debug breakpoint-get-context('media'); } }breakpoint-2.0.6/test/views/000077500000000000000000000000001217653704200160005ustar00rootroot00000000000000breakpoint-2.0.6/test/views/_layout.haml000066400000000000000000000000541217653704200203160ustar00rootroot00000000000000= render :template => "layouts/default.haml"breakpoint-2.0.6/test/views/index.html.haml000066400000000000000000000004411217653704200207140ustar00rootroot00000000000000- @title = "Breakpoint" :markdown These elements will change background colors with different media query criteria are met. .example.foo .example.bar .example.baz .example.omg .example.wtf .example.bbq .example.zztop .example.elp .example.csny .example.rhcp .example.tgif .example.snl breakpoint-2.0.6/test/views/layouts/000077500000000000000000000000001217653704200175005ustar00rootroot00000000000000breakpoint-2.0.6/test/views/layouts/default.haml000066400000000000000000000012271217653704200217710ustar00rootroot00000000000000!!! 5 -# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ %html.no-js{ :lang => "en" } %head %meta{ :charset => "utf-8" }/ %title= @title / CSS -# CSS: implied media="all" %link{ :href => "/css/style.css?v=1", :rel => "stylesheet" } -# = stylesheet_link_tag("/css/style.css") %body #page %header #main{ :role => "main" } = yield %footer