lesjames/Breakpoint minimal install

_breakpoint.scss

// needs some kind of reset?
body { padding:0px; margin:0px; }

@import "compass-includes";
@import "grid-helpers";
@import "grid-core";


// USAGE
// ============

// Grid Overlay: add class `.grid-overlay` to the `.wrapper` (this is modified behavior from Breakpoint default, which expects a separate element
// Grid Overlay, grid borders:  since the grid overlay doesn't quite work well near the breakpoints, you can turn on grid cell borders with `.has-boxes` on the same element

// ## TYPICAL USAGE ##
// @include breakpoint(5) {} // default fluid, 'small'

// @include breakpoint(5, $label: 'handheld') {
//   .panel-input { width: fixed(5); }
// 	.panel-output { width: fixed(5); }
// }
// @include breakpoint(8, $label: 'mini') {
// 	.panel-input { width: fixed(5); }
// 	.panel-output { width: fixed(3); }
// }
// @include breakpoint(12, $label: 'med') {
// 	.panel-input { width: fixed(6); }
// 	.panel-output { width: fixed(6); }
// }

_compass-includes.scss

@import "compass-support";

$inline-block-alignment: middle !default;

/// https://groups.google.com/d/msg/sass-lang/nF6Ux3aGJ1I/WubiiBOVkHwJ
@function compact($list) {
  $new-list: ();
  @each $element in $list {
    @if $element {
      $new-list: append($new-list, $element);
    }
  }
@return $new-list;
}


/// http://ruby-doc.org/gems/docs/c/compass-0.12.2/Compass/SassExtensions/Functions/CrossBrowserSupport.html
/// http://compass-style.org/reference/compass/helpers/cross-browser/#prefix
@function prefix($prefix, $arg) {
  @return -#{$prefix}-#{$arg};
}
@function -moz($arg) { @return prefix('moz', $arg); }
@function -webkit($arg) { @return prefix('webkit', $arg); }
@function -owg($arg) { @return prefix('owg', $arg); }
@function -o($arg) { @return prefix('o', $arg); }
@function -pie($arg) { @return prefix('pie', $arg); }
@function -svg($arg) { @return prefix('svg', $arg); }

/// http://compass-style.org/reference/compass/css3/box_sizing/
@mixin box-sizing($bs) {
  $bs: unquote($bs);
  @include experimental(box-sizing, $bs, -moz, -webkit, not -o, not -ms, not -khtml, official); }

/// http://compass-style.org/reference/compass/css3/inline_block/
@mixin inline-block($alignment: $inline-block-alignment) {
  @if $legacy-support-for-mozilla {
    display: -moz-inline-stack; }
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment; }
  @if $legacy-support-for-ie {
    *vertical-align: auto;
    zoom: 1;
    *display: inline; } }

/// @source http://compass-style.org/reference/compass/css3/shared/
@mixin experimental($property, $value, $moz: $experimental-support-for-mozilla, $webkit: $experimental-support-for-webkit, $o: $experimental-support-for-opera, $ms: $experimental-support-for-microsoft, $khtml: $experimental-support-for-khtml, $official: true) {
  @if $webkit and $experimental-support-for-webkit {
    -webkit-#{$property}: $value; }
  @if $khtml and $experimental-support-for-khtml {
    -khtml-#{$property}: $value; }
  @if $moz and $experimental-support-for-mozilla {
    -moz-#{$property}: $value; }
  @if $ms and $experimental-support-for-microsoft {
    -ms-#{$property}: $value; }
  @if $o and $experimental-support-for-opera {
    -o-#{$property}: $value; }
  @if $official {
    #{$property}: $value; } }

/// @source http://compass-style.org/reference/compass/css3/images/#mixin-background
@mixin background($background-1, $background-2: false, $background-3: false, $background-4: false, $background-5: false, $background-6: false, $background-7: false, $background-8: false, $background-9: false, $background-10: false) {
  $backgrounds: compact($background-1 $background-2 $background-3 $background-4 $background-5 $background-6 $background-7 $background-8 $background-9 $background-10); // adjusted for pure scss @compact
  $mult-bgs: length($backgrounds) > 1;
  $add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs;
  @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) {
    background: -svg($backgrounds); }
  @if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) {
    background: -owg($backgrounds); }
  @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) {
    background: -webkit($backgrounds); }
  @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) {
    background: -moz($backgrounds); }
  @if $experimental-support-for-opera and prefixed(-o, $backgrounds) {
    background: -o($backgrounds); }
  @if $experimental-support-for-pie and $add-pie-bg {
    -pie-background: -pie($backgrounds); }
  background: $backgrounds; }

/// @source http://compass-style.org/reference/compass/css3/background_size/
@mixin background-size($size-1: $default-background-size, $size-2: false, $size-3: false, $size-4: false, $size-5: false, $size-6: false, $size-7: false, $size-8: false, $size-9: false, $size-10: false) {
  $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
  $sizes: compact($size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 $size-8 $size-9 $size-10); // adjusted for pure scss @compact
  @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml); }

_compass-support.scss

// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
$legacy-support-for-ie: true !default;

// Setting this to false will result in smaller output, but no support for ie6 hacks
$legacy-support-for-ie6: $legacy-support-for-ie !default;

// Setting this to false will result in smaller output, but no support for ie7 hacks
$legacy-support-for-ie7: $legacy-support-for-ie !default;

// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$legacy-support-for-ie8: $legacy-support-for-ie !default;

// @private
// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
// But in case the user set each of those explicitly, we need to sync the value of
// this combined variable.
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;

// Whether to output legacy support for mozilla.
// Usually this means hacks to support Firefox 3.6 or earlier.
$legacy-support-for-mozilla: true;

// Support for mozilla in experimental css3 properties (-moz).
$experimental-support-for-mozilla      : true !default;
// Support for webkit in experimental css3 properties (-webkit).
$experimental-support-for-webkit       : true !default;
// Support for webkit's original (non-standard) gradient syntax.
$support-for-original-webkit-gradients : true !default;
// Support for opera in experimental css3 properties (-o).
$experimental-support-for-opera        : true !default;
// Support for microsoft in experimental css3 properties (-ms).
$experimental-support-for-microsoft    : true !default;
// Support for khtml in experimental css3 properties (-khtml).
$experimental-support-for-khtml        : false !default;
// Support for svg in experimental css3 properties.
// Setting this to true might add significant size to your
// generated stylesheets.
$experimental-support-for-svg          : false !default;
// Support for CSS PIE in experimental css3 properties (-pie).
$experimental-support-for-pie          : false !default;

_grid-core.scss

/// @source https://github.com/lesjames/Breakpoint/blob/fd52d601c894d55df8ab7d497281f8dc559b18e9/static/sass/framework/_grid-core.scss

/* Grid based on https://github.com/necolas/griddle by Nicolas Gallagher (@necolas) */

// Grid Core
// =============================================================================

// establish base font size in config so that media queries can be resized if the base context chagnes
body { font-size: em($base-font-size, 16px); }

// wrapper defaults to 100% fluid with side gutters
// when triggering a breakpoint wrapper becomes fixed width and centered
.wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-left: em($grid-gutter);
    padding-right: em($grid-gutter);
}

// for responsive images
img { max-width: 100%; }
.no-js .responsive-image { display: none; }

// Grid container
// Must only contain `.grid` or `.grid-cell` components as children.
.grid {
    display: block;
    padding: 0;
    margin: 0 -0.5 * em($grid-gutter);
    // Ensure consistent default alignment
    text-align: $grid-direction;
    // Remove inter-unit whitespace for all non-monospace font-families
    // If you're using a monospace base font, you will need to set the `grid`
    // font-family to `sans-serif` and then redeclare the monospace font on
    // the `grid-cell` objects.
    letter-spacing: -0.31em;
    // Protect against WebKit bug with optimizelegibility
    text-rendering: optimizespeed;
}

.grid :-o-prefocus,
.grid {
    word-spacing: -0.43em;
}

// Child `grid` object adjustments
// Used for more complex fixed-fluid hybrid grids
.grid > .grid {
    overflow: hidden;
    margin-right: 0;
    margin-left: 0;
}


// Grid units
// No explicit width by default
.grid__cell {
    width: 100%;
    @include inline-block;
    @include box-sizing('border-box');
    margin: 0;
    padding: 0 0.5 * em($grid-gutter);
    /* controls vertical positioning of units */
    vertical-align: top;
    /* keeps unit content correctly aligned */
    text-align: $grid-direction;
    /* reset text defaults */
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto;
}

// Modifier: horizontally center all grid units
// Allows for automatic unit centering irrespective of the number of
// units in the grid.
.grid--center {
    text-align: center;
}

// Modifier: horizontally center one unit
// Set a specific unit to be horizontally centered. Doesn't affect
// any other units. Can still contain a child `grid` object.
.grid__cell--center {
    display: block;
    margin: 0 auto;
}

_grid-helpers.scss

// https://raw.github.com/lesjames/Breakpoint/master/static/sass/framework/_grid-helpers.scss

// Variables
// =============================================================================

$grid-column: 60px !default; // can be px, em, or %
$grid-gutter: 20px !default; // can be px, em, or %
$grid-overlay: false !default; // generate visual grid overlay
$ie-support: false !default; // number of columns for IE fallback (must match a breakpoint)
$grid-direction: left !default; // switch to 'right' for rtl
$breakpoint-list: 'small' !default; // default the breakpoint label set to 'small'
$breakpoint-list: unquote($breakpoint-list);
$current-bp: 0; // init breakpoint variable


// Functions and Mixins
// =============================================================================

// clearfix mixin
@mixin clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } }
.clearfix { @include clearfix; }

// converting px to em
@function em($px, $base: $base-font-size) { @return ($px / $base) * 1em; }

// creates percentage width
@function fluid($col, $avail: $current-bp) { @return (100% / $avail) * $col }

// creates em width
// pass false as a second argument to remove the built in gutter (for creating height measurements)
@function fixed($col, $gutter: true) {
    @if ($gutter) { @return $col * ( em($grid-column + $grid-gutter) ) }
    @else { @return $col * ( em($grid-column + $grid-gutter) ) - em($grid-gutter) }
}


// Javascript hook for current breakpoint label
// =============================================================================

@media (min-width: 0px) {
    body::before { content: "#{nth($breakpoint-list, 1)}"; display: none; }
}


// Breakpoint mixin
// =============================================================================

@mixin breakpoint($min: false, $max: false, $label: false, $orientation: false, $wrapper: true, $resolution: false) {

    // set warnings if arguments are invalid
    @if ($min == false and $max == false and $label == false and $orientation == false and $wrapper == true and $resolution == false) {
      @warn "breakpoint requires you to pass some kind of argument. It can't read your mind. :)";
    }
    @if ($min == 0 and $max == false and $label == false and $orientation == false and $wrapper == true and $resolution == false) {
    	@warn "If you pass zero as a minimum you need to specify a max column value.";
    }

	// set current breakpoint for fluid function
	$current-bp: $min;

	// min width mq
	@if ($min and $max == false) {
		@if ($min > 0) {
    		// create min width mq
    		// can we remove duplication of code here?
    		@if ($orientation) {
        		@media ( min-width: (fixed($min) + em($grid-gutter)) * ($base-font-size / 16px) ) and ( orientation: $orientation ) {
            		@include breakpoint-extras($min, $wrapper, $label, $grid-overlay) { @content };
        		}
    		} @else {
        		@media ( min-width: (fixed($min) + em($grid-gutter)) * ($base-font-size / 16px) ) {
            		@include breakpoint-extras($min, $wrapper, $label, $grid-overlay) { @content };
        		}
    		}
    		// ie fallback
    		@if ($ie-support and $min <= $ie-support and $orientation == false) {
    			.lt-ie9 {
                    @include breakpoint-extras($min, $wrapper, $label: false, $grid-overlay: false) { @content };
    			}
    		}
		}
	}

	// max width mq
	@if ($max) {
		// create max only mq
		@if ($min == 0 or $min == false) {
    		@if ($orientation) {
            	@media ( max-width: fixed($max) + em($grid-gutter) * ($base-font-size / 16px) ) and ( orientation: $orientation ) { @content }
    		} @else {
        		@media ( max-width: fixed($max) + em($grid-gutter) * ($base-font-size / 16px) ) { @content }
    		}
		// create min and max mq
		} @else {
    		@if ($orientation) {
        		@media ( min-width: fixed($min) + em($grid-gutter) * ($base-font-size / 16px) ) and ( max-width: fixed($max) + em($grid-gutter) ) and ( orientation: $orientation ) { @content }
    		} @else {
            	@media ( min-width: fixed($min) + em($grid-gutter) * ($base-font-size / 16px) ) and ( max-width: fixed($max) + em($grid-gutter) ) { @content }
    		}
		}
	}

	// orientation only mq
	@if ($min == false and $max == false) {
    	@if ($orientation) {
        	@media ( orientation: $orientation ) { @content }
    	}
	}

	// pixel ratio mq
	@if ($resolution) {    	
    	// warn if invalid value
    	@if ($resolution != 'high' and $resolution != 'low') {
        	@warn "$resolution only supports values of 'high' or 'low'";
    	}
    	@if ($resolution == 'high') {
            @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { @content }	
    	}
    	@if ($resolution == 'low') {
        	@media (-webkit-max-device-pixel-ratio: 1.5), (max-resolution: 144dpi) { @content }
    	}
		// ie fallback
		@if ($ie-support and $resolution == 'low') {
			.lt-ie9 { @content }
		}
	}
}

// private mixin for generating extras in a min width mq
@mixin breakpoint-extras($min, $wrapper, $label, $grid-overlay) {
	@if($grid-overlay) { @include grid-overlay($min); }
	
	// create hook for js
	@if($label) {
	   
	   // label current breakpoint
	   body::before { content: $label; }
	
	   // push label to label list names = push(names, myname)
	   $breakpoint-list: append($breakpoint-list, unquote($label), comma);
	   
    }
	// proper sizing of wrapper
    
    @if($wrapper) { .wrapper { width: fixed($min) - em($grid-gutter); } }
	
	@content
}

// Grid overlay
// =============================================================================

@mixin grid-overlay($col: false) {
	.grid-overlay {
		position: fixed; top: 0; bottom: 0; pointer-events: none; z-index: 10000;
		@include background(linear-gradient(left, transparent $grid-gutter, transparentize(red, .9) $grid-gutter, transparentize(red, .9) $grid-gutter + $grid-column));
		@if ($col) {
			left: 50%;
			width: fixed($col) + em($grid-gutter); margin-left: fixed($col) / -2 - (em($grid-gutter)/2);
			@include background-size($grid-gutter + $grid-column);
		} @else {
			left: 0; right: $grid-gutter;
			@include background-size(25%);
		}
	}
}
@if($grid-overlay) { @include grid-overlay; }

app.scss

$unit: 1em;

//#region -------- Breakpoints -----------
// @see: http://24ways.org/2012/redesigning-the-media-query/
// @see: https://github.com/lesjames/breakpoint
// @see: http://codepen.io/lesjames/pen/ixjsc
// @see: https://github.com/lesjames/Breakpoint/blob/master/static/sass/framework/_grid-helpers.scss
@import "breakpoint-config";
@import "breakpoint/breakpoint";
//#endregion -------- Breakpoints -----------

// ===== layout =====
h2 { margin:0px; padding-right:$unit; }

@include breakpoint(5) {}
@include breakpoint(5, $label: 'handheld') {
	.panel-input { width: fixed(5); }
	.panel-output { width: fixed(5); }
}
@include breakpoint(8, $label: 'mini') {
	.panel-input { width: fixed(5); }
	.panel-output { width: fixed(3); }
}
@include breakpoint(12, $label: 'med') {
	.panel-input { width: fixed(6); }
	.panel-output { width: fixed(6); }
}

Start with app.scss -- with the exception of _compass-includes.scss (and the _breakpoint.scss index) everything should be as copied from the respective libraries.