From 4d8a64636e0c86914482ec3286cb02843b7c34b7 Mon Sep 17 00:00:00 2001
From: Kyle Brumm <kyle@webspecdesign.com>
Date: Thu, 20 Nov 2014 11:38:47 -0600
Subject: [PATCH] Add underscore to make the file a partial

---
 dist/_juice.scss  | 474 ++++++++++++++++++++++++++++++++++++++++++++++
 sass/_colors.scss |   8 +
 sass/_fonts.scss  |   5 +
 3 files changed, 487 insertions(+)
 create mode 100755 dist/_juice.scss
 create mode 100644 sass/_colors.scss
 create mode 100644 sass/_fonts.scss

diff --git a/dist/_juice.scss b/dist/_juice.scss
new file mode 100755
index 0000000..7e664af
--- /dev/null
+++ b/dist/_juice.scss
@@ -0,0 +1,474 @@
+////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+// SASS Utilities v2.0       ///////////////////////////////////////////////////
+// By: Kyle Brumm            ///////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+// --------------------------------------------------
+// BREAKPOINTS
+// --------------------------------------------------
+// Breakpoint settings
+$hdpi-ratio: 1.3 !default;
+$breakpoints: (
+	'xxlarge':		 						(min-width: 120.0625em),												// >= 1921px
+	'xlarge':			 						(max-width: 120em),															// <= 1920px
+	'xlarge-only': 						(min-width: 90.0625em) and (max-width: 120em),	// 1441px - 1920px
+	'large':			 						(max-width: 90em),															// <= 1440px
+	'large-only':	 						(min-width: 64.0625em) and (max-width: 90em),		// 1025px - 1440px
+	'medium':			 						(max-width: 64em),															// <= 1024px
+	'medium-only': 						(min-width: 40.0625em) and (max-width: 64em),		// 641px - 1024px
+	'not-small':	 						(min-width: 40.0625em),													// >= 641px
+	'small':			 						(max-width: 40em),															// <= 640px
+	'xsmall':			 						(max-width: 30em),															// <= 480px
+	'xxsmall':		 						(max-width: 20em),															// <= 320px
+	'iphone3':		 						(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1),
+	'iphone3-landscape':		 	(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape),
+	'iphone3-portrait':				(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait),
+	'iphone4':		 						(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3),
+	'iphone4-landscape':			(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: landscape),
+	'iphone4-portrait':				(min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: portrait),
+	'iphone5':		 						(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71),
+	'iphone5-landscape':			(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation: landscape),
+	'iphone5-portrait':		 		(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation: portrait),
+	'iphone6':		 						(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2),
+	'iphone6-landscape':			(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape),
+	'iphone6-portrait':		 		(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait),
+	'iphone6-plus':						(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3),
+	'iphone6-plus-landscape':	(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape),
+	'iphone6-plus-portrait':	(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
+	'ipad':		 		 						(min-device-width: 768px) and (max-device-width: 1024px),
+	'ipad-landscape':		 			(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
+	'ipad-portrait':		 			(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
+	'ipad-retina': 						(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2),
+	'ipad-retina-landscape': 	(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape),
+	'ipad-retina-portrait': 	(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait),
+	'hdpi':				 						"(-webkit-min-device-pixel-ratio: $hdpi-ratio),
+														only screen and (min--moz-device-pixel-ratio: $hdpi-ratio),
+														only screen and (-moz-min-device-pixel-ratio: $hdpi-ratio),
+														only screen and (-o-min-device-pixel-ratio: #{$hdpi-ratio}/1),
+														only screen and (min-resolution: #{round($hdpi-ratio*96)}dpi),
+														only screen and (min-resolution: #{$hdpi-ratio}dppx)",
+);
+@mixin bp($break, $viewport1: null) {
+	// Check if we are just passing a default value
+	@if not $viewport1 {
+		@if map-has-key($breakpoints, $break) {
+			@media only screen and #{inspect(map-get($breakpoints, $break))} { @content; }
+		}
+		@else {
+			@warn "Couldn't find a breakpoint named `#{$break}`.";
+		}
+	}
+	@else {
+		// Min breakpoint
+		@if $break == min {
+			@media screen and (min-width: $viewport1) { @content; }
+		}
+		// Max breakpoint
+		@else if $break == max {
+			@media screen and (max-width: $viewport1) { @content; }
+		}
+		// Custom breakpoint
+		@else {
+			@media screen and (min-width: $break) and (max-width: $viewport1) { @content; }
+		}
+	}
+}
+
+// --------------------------------------------------
+// BORDER RADIUS
+// --------------------------------------------------
+
+// Single side border radius
+// -------------------------
+@mixin border-top-radius($radius) {
+	border-top-right-radius: $radius;
+	border-top-left-radius: $radius;
+}
+@mixin border-right-radius($radius) {
+	border-top-right-radius: $radius;
+	border-bottom-right-radius: $radius;
+}
+@mixin border-bottom-radius($radius) {
+	border-bottom-right-radius: $radius;
+	border-bottom-left-radius: $radius;
+}
+@mixin border-left-radius($radius) {
+	border-top-left-radius: $radius;
+	border-bottom-left-radius: $radius;
+}
+
+// --------------------------------------------------
+// TRANSFORMATIONS
+// --------------------------------------------------
+@mixin transform-single($property, $value) {
+	transform: #{$property}unquote("("#{$value}")");
+}
+@mixin rotate($deg) {
+	@include transform-single(rotate, $deg);
+}
+@mixin rotateX($deg) {
+	@include transform-single(rotateX, $deg);
+}
+@mixin rotateY($deg) {
+	@include transform-single(rotateY, $deg);
+}
+@mixin rotateZ($deg) {
+	@include transform-single(rotateZ, $deg);
+}
+@mixin rotate3d($rotate3d...) {
+	@include transform-single(rotate3d, $rotate3d);
+}
+@mixin scale($ratio) {
+	@include transform-single(scale, $ratio);
+}
+@mixin scaleX($ratio) {
+	@include transform-single(scaleX, $ratio);
+}
+@mixin scaleY($ratio) {
+	@include transform-single(scaleY, $ratio);
+}
+@mixin scaleZ($ratio) {
+	@include transform-single(scaleZ, $ratio);
+}
+@mixin scale3d($x, $y, $z) {
+	$multi-var: $x, $y, $z;
+	@include transform-single(scale3d, $multi-var);
+}
+@mixin skew($x, $y) {
+	$multi-var: $x, $y;
+	@include transform-single(skew, $multi-var);
+	backface-visibility: hidden;
+}
+@mixin skewX($deg) {
+	@include transform-single(skewX, $deg);
+	backface-visibility: hidden;
+}
+@mixin skewY($deg) {
+	@include transform-single(skewY, $deg);
+	backface-visibility: hidden;
+}
+@mixin translate($x, $y) {
+	$multi-var: $x, $y;
+	@include transform-single(translate, $multi-var);
+}
+@mixin translateX($x) {
+	@include transform-single(translateX, $x);
+}
+@mixin translateY($y) {
+	@include transform-single(translateY, $y);
+}
+@mixin translateZ($z) {
+	@include transform-single(translateZ, $z);
+}
+@mixin translate3d($x, $y, $z) {
+	$multi-var: $x, $y, $z;
+	@include transform-single(translate3d, $multi-var);
+}
+
+// --------------------------------------------------
+// GRADIENTS - https://github.com/twbs/bootstrap-sass
+// --------------------------------------------------
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
+  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
+  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
+}
+
+@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+  background-repeat: repeat-x;
+  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
+  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}
+@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
+  background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
+  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+  background-repeat: no-repeat;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
+  background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
+  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+  background-repeat: no-repeat;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
+  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
+  background-image: radial-gradient(circle, $inner-color, $outer-color);
+  background-repeat: no-repeat;
+}
+@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
+
+// --------------------------------------------------
+// UTILITIES / EXTRAS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+%clearfix {
+ *zoom: 1;
+ &:before,
+ &:after {
+	 display: table;
+	 content: "";
+	 line-height: 0;
+ }
+ &:after {
+	 clear: both;
+ }
+}
+
+// Hide text
+// ---------
+%hide-text {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+}
+
+// Center an element
+// -----------------
+%centerer {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+// Center an element vertically
+// ----------------------------
+%vert-centerer {
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+// Cover everything
+// ----------------
+%coverer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+// Center-align a block level element
+// ----------------------------------
+%center-block {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+// Emboss Effect
+// -------------
+@mixin box-emboss($opacity, $opacity2){
+	box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
+}
+
+// Letterpress Effect
+// ------------------
+@mixin letterpress($opacity){
+	text-shadow:white($opacity) 0 1px 0;
+}
+
+// Placeholder text
+// ----------------
+@mixin placeholder-color($color: #555555) {
+ &:-moz-placeholder {
+	 color: $color;
+ }
+ &:-ms-input-placeholder {
+	 color: $color;
+ }
+ &::-webkit-input-placeholder {
+	 color: $color;
+ }
+}
+
+// Sizing
+// ------
+@mixin size($width, $height: $width) {
+ width: $width;
+ height: $height;
+}
+@mixin square($size) {
+ @include size($size, $size);
+}
+
+// Add hover state
+// ---------------
+@mixin hoverer($attr, $normal, $hovered) {
+	#{$attr}: #{$normal};
+	&:hover {
+		#{$attr}: #{$hovered};
+	}
+}
+
+// Add responsive styling for multiple widths
+// ------------------------------------------
+@mixin responsive($attr, $full, $medium:false, $small:false) {
+	#{$attr}: #{$full};
+	@include bp(medium) {
+		#{$attr}: #{$medium};
+	}
+	@include bp(small) {
+		#{$attr}: #{$small};
+	}
+}
+
+// Create an triangle using borders (add in the option to make a border)
+// http://cssarrowplease.com/
+// ------------------------------------------------------------------
+@mixin triangle($direction: "right", $size: "0.5rem", $color: "black", $center: false, $element: "after") {
+  &:#{$element} {
+    position: if($center,'',absolute);
+    content: '';
+    @include square(0);
+    border: #{$size} solid transparent;
+  }
+  @if $direction == "up" {
+    &:#{$element} {
+      border-bottom-color: #{$color};
+      @if $center {
+        @include absolute(null,null,100%,50%);
+        transform: translateX(-#{$size});
+      }
+    }
+  }
+  @if $direction == "right" {
+    &:#{$element} {
+      border-left-color: #{$color};
+      @if $center {
+        @include absolute(50%,null,null,100%);
+        transform: translateY(-#{$size});
+      }
+    }
+  }
+  @if $direction == "down" {
+    &:#{$element} {
+      border-top-color: #{$color};
+      @if $center {
+        @include absolute(100%,null,null,50%);
+        transform: translateX(-#{$size});
+      }
+    }
+  }
+  @if $direction == "left" {
+    &:#{$element} {
+      border-right-color: #{$color};
+      @if $center {
+        @include absolute(50%,100%);
+        transform: translateY(-#{$size});
+      }
+    }
+  }
+}
+
+// Advanced Positioning
+// ------------------------------------------------------
+$default-position: null !default;
+@mixin position($type, $top: $default-position, $right: $default-position, $bottom: $default-position, $left: $default-position) {
+	position: #{$type};
+
+	$allowed_types: "absolute" "relative" "fixed";
+	@if not index($allowed_types, $type) {
+		@warn "Unknown position: #{$type}.";
+	}
+	@each $data in top $top, right $right, bottom $bottom, left $left {
+		#{nth($data, 1)}: nth($data, 2);
+	}
+}
+@mixin absolute($top: $default-position, $right: $default-position, $bottom: $default-position, $left: $default-position) {
+	@include position("absolute", $top, $right, $bottom, $left);
+}
+@mixin relative($top: $default-position, $right: $default-position, $bottom: $default-position, $left: $default-position) {
+	@include position("relative", $top, $right, $bottom, $left);
+}
+@mixin fixed($top: $default-position, $right: $default-position, $bottom: $default-position, $left: $default-position) {
+	@include position("fixed", $top, $right, $bottom, $left);
+}
+
+// --------------------------------------------------
+// FUNCTIONS
+// --------------------------------------------------
+
+// Mix white with another color
+// ----------------------------
+@function tint($color, $percent){
+	@return mix(white, $color, $percent);
+}
+ 
+// Mix black with another color
+// ----------------------------
+@function shade($color, $percent){
+	@return mix(black, $color, $percent);
+}
+
+// Strip the units from a value
+// ----------------------------
+@function strip-units($value) {
+	@return $value / ($value * 0 + 1);
+}
+
+// Calculate rems from a px value
+// ------------------------------
+$base-px: 16 !default;
+@function rem-calc($px) {
+	@if not unitless($px) {
+		$px: strip-units($px);
+	}
+	@if not unitless($base-px) {
+		$base-px: strip-units($base-px);
+	}
+	@return ($px / $base-px) * 1rem;
+}
+
+// Calculate ems from a px value
+// ------------------------------
+@function em-calc($px, $base-val: $base-px) {
+	@if not unitless($px) {
+		$px: strip-units($px);
+	}
+	@if not unitless($base-val) {
+		$base-val: strip-units($base-val);
+	}
+	@return ($px / $base-val) * 1em;
+}
+
+// Create a random color
+// ---------------------
+@function random-color() {
+	$red: random(256)-1;
+	$green: random(256)-1;
+	$blue: random(256)-1;
+	@return rgb($red, $green, $blue);
+}
diff --git a/sass/_colors.scss b/sass/_colors.scss
new file mode 100644
index 0000000..95104a5
--- /dev/null
+++ b/sass/_colors.scss
@@ -0,0 +1,8 @@
+// Custom Colors
+// --------------------------------------------------
+	$white: 				#ffffff !default;
+	$black: 				#000000 !default;
+	$dark-blue:			#222232 !default;
+	$light-blue:		lighten($dark-blue, 5%) !default;
+	$purple:				#B96CFF !default;
+	$teal:					#56D7C6 !default;
\ No newline at end of file
diff --git a/sass/_fonts.scss b/sass/_fonts.scss
new file mode 100644
index 0000000..57ade91
--- /dev/null
+++ b/sass/_fonts.scss
@@ -0,0 +1,5 @@
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Raleway:300,700|Open+Sans+Condensed:300,700);
+
+$ds: "Droid Sans", Helvetica, Arial, sans-serif !default;
+$raleway: "Raleway", Helvetica, Arial, sans-serif !default;
+$open-sans: "Open Sans Condensed", Helvetica, Arial, sans-serif !default;
\ No newline at end of file