Contents

//==================================================
// Devices.scss
//
// Index
// -----
// 1) Screen Size Scale
// 2) Media Queries Mixins
//==================================================


//=========================
// 1) Screen Size Scale
//=========================
// Define your screen screen sizes here
$small-range: (0em, 37.5em); /* 0, 600px */
$medium-range: (37.5em, 64em); /* 600px, 1024px */
$large-range: (64em, 90em); /* 1024px, 1440px */
$xlarge-range: (90em, 120em); /* 1440px, 1920px */

// Functions for determining lower and upper range of screen
// Source: https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

//=========================
// 2) Media Queries Mixins
//=========================
@mixin bp-landscape {
  @media screen and (orientation: landscape) {
    @content;
  }
}

@mixin bp-portrait {
	@media screen and (orientation: portrait) {
		@content;
	}
}

@mixin bp-small-only {
	@media screen and (max-width: "#{upper-bound($small-range)}") {
		@content;
	}
}

@mixin bp-medium-up {
	@media screen and (min-width:"#{lower-bound($medium-range)}") {
		@content;
	}
}

@mixin bp-medium-only {
	@media screen and (min-width:"#{lower-bound($medium-range)}") and (max-width:"#{upper-bound($medium-range)}") {
		@content;
	}
}

@mixin bp-large-up {
	@media screen and (min-width:"#{lower-bound($large-range)}") {
		@content;
	}
}

@mixin bp-large-only {
	@media screen and (min-width:"#{lower-bound($large-range)}") and (max-width:"#{upper-bound($large-range)}") {
		@content;
	}
}

@mixin bp-xlarge-up {
	@media screen and (min-width:"#{lower-bound($xlarge-range)}") {
		@content;
	}
}

@mixin bp-xlarge-only {
	@media screen and (min-width:"#{lower-bound($xlarge-range)}") and (max-width:"#{upper-bound($xlarge-range)}") {
		@content;
	}
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
aesthetics-rails-0.1.3.pre.alpha	assets/stylesheets/settings/_devices.scss
aesthetics-rails-0.1.1.pre.alpha	assets/stylesheets/settings/_devices.scss
aesthetics-rails-0.1.0.pre.alpha	assets/stylesheets/settings/_devices.scss