Merge pull request #2 from TryKickoff/name-spacing

v2 – Name spacing and eyeglass-module

functions/_get-value.scss

@@ -1,12 +1,12 @@
 /**
  * Usage:
  *
- * getVal(100, $map) - uses an integer
- * getVal(mid, $map) - uses a Sass map
- * getVal($foo, $map) - uses a Sass variable
+ * ko-getVal(100, $map) - uses an integer
+ * ko-getVal(mid, $map) - uses a Sass map
+ * ko-getVal($foo, $map) - uses a Sass variable
  */
 
-@function getValue($val, $map: '') {
+@function ko-getValue($val, $map: '') {
 	@if type-of($val) == 'number' {
 		@return $val;
 	} @else if variable-exists($val) {
@@ -20,28 +20,28 @@
 /**
  * Get breakpoints
  *
- * bp()
+ * ko-bp()
  *
  * Usage:
- * bp(100) - uses an integer
- * bp(mid) - uses the $breakpoints Sass map
- * bp($foo) - uses a Sass variable
+ * ko-bp(100) - uses an integer
+ * ko-bp(mid) - uses the $breakpoints Sass map
+ * ko-bp($foo) - uses a Sass variable
  */
-@function bp($val) {
+@function ko-bp($val) {
 	@return getValue($val, $breakpoints);
 }
 
 
 /**
  * Get type size
  *
- * type()
+ * ko-type()
  *
  * Usage:
- * type(100) - uses an integer
- * type(mid) - uses the $type Sass map
- * type($foo) - uses a Sass variable
+ * ko-type(100) - uses an integer
+ * ko-type(mid) - uses the $type Sass map
+ * ko-type($foo) - uses a Sass variable
  */
-@function type($val) {
+@function ko-type($val) {
 	@return getValue($val, $type);
 }

functions/_map-deep-get.scss

@@ -11,12 +11,12 @@
  );
 
  div {
-   font-size: map-deep-get($grid-configuration, 'columns');
-   width: map-deep-get($grid-configuration, 'layouts', 'medium');
+   font-size: ko-map-deep-get($grid-configuration, 'columns');
+   width: ko-map-deep-get($grid-configuration, 'layouts', 'medium');
  }
  */
 
-@function map-deep-get($map, $keys...) {
+@function ko-map-deep-get($map, $keys...) {
 	@each $key in $keys {
 		$map: map-get($map, $key);
 

functions/_modular-scale.scss

@@ -18,7 +18,7 @@ $major-twelfth    : 3;
 $double-octave    : 4;
 
 
-@function modular-scale($value, $increment, $ratio) {
+@function ko-modular-scale($value, $increment, $ratio) {
   $v1: nth($value, 1);
   $v2: nth($value, length($value));
   $value: $v1;

functions/_px-to-em.scss

@@ -1,13 +1,13 @@
 // ==========================================================================
 // Convert pixels to ems
-// For a relational value of 12px write em(12) when the parent is 16px
-// If the parent is another value say 24px write em(12, 24)
+// For a relational value of 12px write ko-em(12) when the parent is 16px
+// If the parent is another value say 24px write ko-em(12, 24)
 //
 // Usage:
-// font-size : em(12);
-// font-size : em(12, 24);
+// font-size : ko-em(12);
+// font-size : ko-em(12, 24);
 // ==========================================================================
-@function em($pxval, $base: $font-size-base) {
+@function ko-em($pxval, $base: $font-size-base) {
   @return ($pxval / $base) * 1em;
 }
 
@@ -17,18 +17,18 @@
 // Takes a map of breakpoints (in px) and a base-font-size
 //
 // Usage:
-// $breakpoints: map-to-em((
+// $breakpoints: ko-map-to-em((
 // 	narrow : 400px,
 // 	mid    : 750px,
 // 	wide   : 1000px,
 // 	huge   : 1250px
 // ), 16);
 // ==========================================================================
-@function map-to-em($breakpoints, $base: $font-size-base) {
+@function ko-map-to-em($breakpoints, $base: $font-size-base) {
   $newBreakpoints: ();
 
   @each $name, $pxValue in $breakpoints {
-    $emValue: em(strip-units($pxValue), $base);
+    $emValue: ko-em(ko-strip-units($pxValue), $base);
     $newBreakpoints: map-merge($newBreakpoints, ($name: $emValue));
   }
 

functions/_px-to-rem.scss

@@ -1,13 +1,13 @@
 // ==========================================================================
 // Convert pixels to rems
-// For a relational value of 12px write rem(12) when the parent is 16px
-// If the parent is another value say 24px write rem(12, 24)
+// For a relational value of 12px write ko-rem(12) when the parent is 16px
+// If the parent is another value say 24px write ko-rem(12, 24)
 //
 // Usage:
-// font-size : rem(12);
-// font-size : rem(12, 24);
+// font-size : ko-rem(12);
+// font-size : ko-rem(12, 24);
 // ==========================================================================
-@function rem($pxval, $base: $font-size-base) {
+@function ko-rem($pxval, $base: $font-size-base) {
   @return ($pxval / $base) * 1rem;
 }
 

functions/_strip-units.scss

@@ -1,8 +1,8 @@
 /// Remove the unit of a length
 /// @param {Number} $number - Number to remove unit from
 /// @return {Number} - Unitless number
-/// @example strip-units(400px)
-@function strip-units($val) {
+/// @example ko-strip-units(400px)
+@function ko-strip-units($val) {
 	$newVal: 0;
 	@if $val == null {
 		$newVal: 0;

functions/_tint-shade.scss

@@ -1,13 +1,13 @@
 // Add percentage of white to a color
 // Usage:
-// background-color: tint(blue, 20%);
-@function tint($color, $percent) {
+// background-color: ko-tint(blue, 20%);
+@function ko-tint($color, $percent) {
 	@return mix(white, $color, $percent);
 }
 
 // Add percentage of black to a color
 // Usage:
-// background-color: shade(blue, 20%);
-@function shade($color, $percent) {
+// background-color: ko-shade(blue, 20%);
+@function ko-shade($color, $percent) {
 	@return mix(black, $color, $percent);
 }

mixins/_hidpi.scss

@@ -1,9 +1,9 @@
 /**
  *  HiDPI mixin.
- *  @include hidpi { ... };
+ *  @include ko-hidpi { ... };
  *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
  */
-@mixin hidpi($ratio: 1.25) {
+@mixin ko-hidpi($ratio: 1.25) {
 	@media print,
 		(-webkit-min-device-pixel-ratio: $ratio),
 		(min-resolution: #{$ratio}dppx),
@@ -15,10 +15,10 @@
 
 /**
  * Hidpi with a minimum width media query
- * @include hidpi-min(bp(mid), 1.5) { ... };
+ * @include ko-hidpi-min(bp(mid), 1.5) { ... };
  */
-@mixin hidpi-min($width, $ratio: 1.25) {
-	$width-em: em(strip-units(bp($width)), $mq-base);
+@mixin ko-hidpi-min($width, $ratio: 1.25) {
+	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);
 
 	@media print,
 		screen and (min-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
@@ -31,10 +31,10 @@
 
 /**
  * Hidpi with a max width media query
- * @include hidpi-max(bp(mid), 1.3) { ... };
+ * @include ko-hidpi-max(bp(mid), 1.3) { ... };
  */
-@mixin hidpi-max($width, $ratio: 1.25) {
-	$width-em: em(strip-units(bp($width)), $mq-base);
+@mixin ko-hidpi-max($width, $ratio: 1.25) {
+	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);
 
 	@media print,
 		screen and (max-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),

mixins/_module-naming-helpers.scss

@@ -30,34 +30,34 @@ $state-prefix: "is";
 
 
 // Mixins
-// @include block('form') {}
-@mixin block($name) {
+// @include ko-block('form') {}
+@mixin ko-block($name) {
 	.#{$name} {
 		@content;
 	}
 }
 
-// @include element('item') {}
-@mixin element($name) {
+// @include ko-element('item') {}
+@mixin ko-element($name) {
 	@at-root {
 		&#{$element-separator}#{$name} {
 			@content;
 		}
 	}
 }
 
-// @include modifier('stacked') {}
-@mixin modifier($name) {
+// @include ko-modifier('stacked') {}
+@mixin ko-modifier($name) {
 	@at-root {
 		&#{$modifier-separator}#{$name} {
 			@content;
 		}
 	}
 }
 
-// @include state('active') {}
-// @include state('nav', 'has') {}
-@mixin state($state, $prefix: $state-prefix) {
+// @include ko-state('active') {}
+// @include ko-state('nav', 'has') {}
+@mixin ko-state($state, $prefix: $state-prefix) {
 	@if $combined-state-selectors == true {
 		@at-root {
 			&.#{$prefix}-#{$state} {
@@ -78,30 +78,30 @@ $state-prefix: "is";
 
 
 // Aliases
-// @include component('form') {}
-@mixin component($name) {
-	@include block($name) {
+// @include ko-component('form') {}
+@mixin ko-component($name) {
+	@include ko-block($name) {
 		@content;
 	}
 }
 
-// @include child('item') {}
-@mixin child($name) {
-	@include element($name) {
+// @include ko-child('item') {}
+@mixin ko-child($name) {
+	@include ko-element($name) {
 		@content;
 	}
 }
 
-// @include subcomponent('item') {}
-@mixin subcomponent($name) {
-	@include element($name) {
+// @include ko-subcomponent('item') {}
+@mixin ko-subcomponent($name) {
+	@include ko-element($name) {
 		@content;
 	}
 }
 
-// @include sub('item') {}
-@mixin sub($name) {
-	@include element($name) {
+// @include ko-sub('item') {}
+@mixin ko-sub($name) {
+	@include ko-element($name) {
 		@content;
 	}
 }

mixins/_position.scss

@@ -1,9 +1,9 @@
 /**
- * position
+ * ko-position
  * Usage:
- * @include position(absolute, 10px 20px 30px 10px);
+ * @include ko-position(absolute, 10px 20px 30px 10px);
  */
-@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+@mixin ko-position ($position: relative, $coordinates: 0 0 0 0) {
 
 	@if type-of($position) == list {
 		$coordinates: $position;

mixins/_responsive.scss

@@ -22,10 +22,10 @@ $mq-base: 16;
 /**
  * Min-width media query:
  * - Equivalent to: @media screen and (min-width: 20em) { ... }
- * - Usage: @include respond-min(mid) { ... };
+ * - Usage: @include ko-respond-min(mid) { ... };
  */
-@mixin respond-min($width) {
-	$width-em: em(strip-units(bp($width)), $mq-base);
+@mixin ko-respond-min($width) {
+	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);
 
 	@media screen and (min-width: $width-em) {
 		@content;
@@ -36,10 +36,10 @@ $mq-base: 16;
 /**
  * Max-width media query:
  * - Equivalent to: @media screen and (max-width: 20em) { ... }
- * - Usage: @include respond-max(mid) { ... };
+ * - Usage: @include ko-respond-max(mid) { ... };
  */
-@mixin respond-max($width) {
-	$width-em: em(strip-units(bp($width)), $mq-base);
+@mixin ko-respond-max($width) {
+	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);
 
 	@media screen and (max-width: $width-em) {
 		@content;
@@ -50,11 +50,11 @@ $mq-base: 16;
 /**
  * Min-max-width media query:
  * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
- * - Usage: @include respond-min-max(narrow, 600) { ... };
+ * - Usage: @include ko-respond-min-max(narrow, 600) { ... };
  */
-@mixin respond-min-max($min-width, $max-width) {
-	$min-width-em: em(strip-units(bp($min-width)), $mq-base);
-	$max-width-em: em(strip-units(bp($max-width)), $mq-base);
+@mixin ko-respond-min-max($min-width, $max-width) {
+	$min-width-em: ko-em(ko-strip-units(ko-bp($min-width)), $mq-base);
+	$max-width-em: ko-em(ko-strip-units(ko-bp($max-width)), $mq-base);
 
 	@media screen and (min-width: $min-width-em) and (max-width: $max-width-em) {
 		@content;