piecss 0.2.0.0 → 0.3.0.1

data/sass/piecss/settings/_form.scss

@@ -49,7 +49,7 @@ $form-form-selector: "%form" !default;
 $form-fieldset-selector: "%fieldset" !default;
 
 .fieldset {
-	@extend #{$form-fieldset-selector} !optional;
+  @extend #{$form-fieldset-selector} !optional;
 }
 
 ///
@@ -195,7 +195,7 @@ $form-label-selector: "%field-label" !default;
 // Start collection of element-maps
 
 ///
-/// Collection of form selectors and property maps. For each selector, the corrresponding properties are rendered by the form behavior. 
+/// Collection of form selectors and property maps. For each selector, the corrresponding properties are rendered by the form behavior.
 /// You can override form behavior by a) overriding any of the field settings, or by b) replacing the selector entry in this element collection map.
 ///
 /// @since 0.1
@@ -346,7 +346,7 @@ $field-width: 100% !default;
 /// @type {Number}
 ///
 
-$field-height: $default-line-height + 2 * $field-border-width + $field-padding-top + $field-padding-bottom !default;
+$field-height: $line-height + 2 * $field-border-width + $field-padding-top + $field-padding-bottom !default;
 
 ///
 /// Field line-height, relevant for text-area.
@@ -356,7 +356,7 @@ $field-height: $default-line-height + 2 * $field-border-width + $field-padding-t
 /// @type {Number}
 ///
 
-$field-line-height: $default-line-height !default;
+$field-line-height: $line-height !default;
 
 ///
 /// Field shadow, simple inset shadow by default.
@@ -425,7 +425,7 @@ $field-focussed-outline-color: mix($field-border-color, $field-focussed-backgrou
 /// @type {Number}
 ///
 
-$field-focussed-outline-offset: -1*( $field-focussed-outline-width + 3*$field-border-width) !default; 
+$field-focussed-outline-offset: -1 * ($field-focussed-outline-width + 3 * $field-border-width) !default;
 
 
 // ==========================================================================
@@ -546,7 +546,7 @@ $textarea-height: auto !default;
 /// @type {Number | String}
 ///
 
-$textarea-height-medium: rhythm(5) - 2*$field-border-width !default;
+$textarea-height-medium: rhythm(5) - 2 * $field-border-width !default;
 
 ///
 /// Alternate height of textarea element, large.
@@ -556,7 +556,7 @@ $textarea-height-medium: rhythm(5) - 2*$field-border-width !default;
 /// @type {Number | String}
 ///
 
-$textarea-height-large: rhythm(10) - 2*$field-border-width !default;
+$textarea-height-large: rhythm(10) - 2 * $field-border-width !default;
 
 
 // ==========================================================================
@@ -564,5 +564,3 @@ $textarea-height-large: rhythm(10) - 2*$field-border-width !default;
 // LABEL SETTINGS
 //
 // ==========================================================================
-
-

data/sass/piecss/settings/{_grid.scss → _layout.scss}

@@ -6,14 +6,14 @@
 // Vertical measurements like line-height and %-top and %-bottom are factors of rhythm
 
 ///
-/// This measure is used to calculare vertical measurements like line-height and top and bottom paddings and margins. It defaults to the $default-line-height but some prefer to set it to a smaller value, like 1/2 or 1/3 times the $default-line-height.
+/// This measure is used to calculare vertical measurements like line-height and top and bottom paddings and margins. It defaults to the $line-height but some prefer to set it to a smaller value, like 1/2 or 1/3 times the $line-height.
 ///
 /// @since 0.1
 ///
 /// @type {Number}
 ///
 
-$rhythm: $default-line-height !default;
+$rhythm: 8px !default;
 
 ///
 /// If true,reveals the document's vertical rhythm. Also see: [mixin $debug-rhythm](./#mixin-debug-rhythm).
@@ -43,22 +43,7 @@ $debug-layout: false !default;
 /// @type {List}
 ///
 
-$single-direction-elements: (p,pre,table,hr,article) !default;
-
-///
-/// Column classes are rendered from this map. The first level of each item has a breakpoint string as a key, the value is another Map of classnames/column widths pairs. Column widths are expressed as factors.
-/// Piecss will render these columns by default, unless you override this Map from your project settings.
-///
-/// @since 0.1
-///
-/// @type {Map}
-///
-
-$column-widths: (
-    $small_handheld: (small-1-2: 1/2, small-1-3: 1/3, small-2-3: 2/3),
-    $medium_handheld: (medium-1-2: 1/2, medium-1-3: 1/3, medium-1-4: 1/4, medium-2-3: 2/3, medium-3-4: 3/4),
-    $small_desktop: (default-1-2: 1/2, default-1-3: 1/3, default-1-4: 1/4, default-2-3: 2/3, default-3-4: 3/4),
-) !default;
+$single-direction-elements: (p, pre, table, hr, article) !default;
 
 ///
 /// Default column width, all columns implemented with [column()](./#mixin-column) will have this width unless otherwise specified.
@@ -68,7 +53,9 @@ $column-widths: (
 /// @type {Number}
 ///
 
+// scss-lint:disable SpaceAroundOperator
 $column-width-default: 1/1 !default;
+// scss-lint:enable SpaceAroundOperator
 
 ///
 /// If set to true, the [column() mixin](./#mixin-column) will mixin a reset of all column widths to 100% at the smallest [breakpoint](./#variable-small_handheld). If you are developing mobile-first, leave this setting to false.
@@ -93,15 +80,15 @@ $column-breakpoint: false !default;
 
 $column-float: false !default; // If you prefer floated columns instead of inline-blocks, set to true.
 
-///
-/// Gutter widths are based on the vertical [rhythm](./#variable-rhythm) and default to 2*$rhythm. Gutters are implemented using the [gutter mixin](./#mixin-gutters) and are expressed in factors of this measure (usually 1/2).
-///
-/// @since 0.1
-///
-/// @type {Number}
-///
+// ///
+// /// Gutter widths are based on the vertical [rhythm](./#variable-rhythm) and default to 2*$rhythm. Gutters are implemented using the [gutter mixin](./#mixin-gutters) and are expressed in factors of this measure (usually 1/2).
+// ///
+// /// @since 0.1
+// ///
+// /// @type {Number}
+// ///
 
-$gutter-width: 2*$rhythm !default;
+// $gutter-width: 2*$rhythm !default;
 
 ///
 /// The final unit of output in which gutter widths are rendered
@@ -143,7 +130,7 @@ $negative-right-margin: false !default;
 
 
 ///
-/// Fixes content maximum width, 72em is 1152px at a 16px [$default-font-size](./#variable-default-font-size). It is used by the [root mixin](./#mixin-root).
+/// Fixes content maximum width, 72em is 1152px at a 16px [$font-size](./#variable-default-font-size). It is used by the [root mixin](./#mixin-root).
 ///
 /// @deprecated
 ///
@@ -177,7 +164,8 @@ $root-position: center !default;
 $columns: 4 !default;
 
 ///
-/// Totally arbitrary default breakpoint layouts.
+/// (Totally arbitrary) Default breakpoint layouts.
+/// Serves as an example layout
 ///
 /// @since 0.1
 ///
@@ -185,19 +173,30 @@ $columns: 4 !default;
 ///
 
 $layouts: (
-    $small_handheld: (
-        columns: 4,
-        color: $orange,
-        pages: (),
-    ),
-    $medium_handheld: (
-        columns: 8,
-        color: $cyan,
-        pages: (),
-    ),
-    $small_desktop: (
-        columns: 12,
-        color: $becca,
-        pages: (),
-    )
-);
+  debug-color: $orange,
+  columns: 4,
+  rhythm: $rhythm, // 8px
+  gutter-width: rhythm(3), // 24px
+  pages: (),
+  $gt-small-handheld: (
+    debug-color: $orange,
+    columns: 4,
+    rhythm: $rhythm,
+    gutter-width: rhythm(3),
+    pages: ()
+  ),
+  $gt-medium-handheld: (
+    debug-color: $cyan,
+    columns: 8,
+    rhythm: $rhythm,
+    gutter-width: rhythm(3),
+    pages: ()
+  ),
+  $gt-small-desktop: (
+    debug-color: $becca,
+    columns: 12,
+    rhythm: $rhythm,
+    gutter-width: rhythm(3),
+    pages: ()
+  )
+) !default;

data/sass/piecss/settings/_list.scss

@@ -125,7 +125,7 @@ $list-style-type-hiragana-iroha: false !default;
 /// @type {Bool}
 ///
 
-$list-style-type-inherit: true !default;    
+$list-style-type-inherit: true !default;
 
 ///
 /// If true, Piecss will render a placeholder for this list-style-type (%list--katakana)

data/sass/piecss/settings/_miscellaneous.scss

@@ -0,0 +1,5 @@
+$reset-fieldset: true;
+
+$legacy-support-for-ie: false !default;
+
+$legacy-support-for-mozilla: false !default;

data/sass/piecss/settings/_typography.scss

@@ -0,0 +1,13 @@
+// $font-family: $default-font;
+// $font-variant: normal;
+// $font-style: normal;
+// $font-weight: 300;
+//
+// $type-default: $default-font-regular;
+// $type-heading: $default-font-bold;
+// $type-anchor: $default-font-regular;
+// $type-button: $default-font-regular;
+// $type-label: $default-font-regular;
+//
+// $default-font: $type-default;
+$default-font-size: 16px !default;

data/sass/piecss/settings/fonts/_example.scss

@@ -1,43 +1,43 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-	// Use this file as a template for creating additional font files
-	// Replace the variable names accordingly
+// Use this file as a template for creating additional font files
+// Replace the variable names accordingly
 
-	// Weight reference:
-	// 100 ultra-light
-	// 200 light
-	// 300 book
-	// 400 regular, or normal
-	// 500 medium
-	// 600 semi-bold
-	// 700 bold
-	// 800 extra-bold
-	// 900 heavy, or ultra-bold
+// Weight reference:
+// 100 ultra-light
+// 200 light
+// 300 book
+// 400 regular, or normal
+// 500 medium
+// 600 semi-bold
+// 700 bold
+// 800 extra-bold
+// 900 heavy, or ultra-bold
 
 
-	// Example
-    // Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
-	$example-fontface 						: "Example";
-	$example-fallback						: sans-serif;
-	$example-family							: ($example-fontface, $example-fallback);
+// Example
+// Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
+$example-fontface: "Example";
+$example-fallback: sans-serif;
+$example-family: ($example-fontface, $example-fallback);
 
-	// style, variant, weight, family
-	$example-ultra-light 					: normal normal 100 $example-family;
-	$example-light 							: normal normal 200 $example-family;
-	$example-book 							: normal normal 300 $example-family;
-	$example-regular 						: normal normal 400 $example-family;
-	$example-medium							: normal normal 500 $example-family;
-	$example-semi-bold						: normal normal 600 $example-family;
-	$example-bold 							: normal normal 700 $example-family;
-	$example-extra-bold 					: normal normal 800 $example-family;
-	$example-heavy 							: normal normal 900 $example-family;
-	$example-ultra-light-italic 			: italic normal 100 $example-family;
-	$example-light-italic 					: italic normal 200 $example-family;
-	$example-book-italic 					: italic normal 300 $example-family;
-	$example-regular-italic 				: italic normal 400 $example-family;
-	$example-medium-italic					: italic normal 500 $example-family;
-	$example-semi-bold-italic				: italic normal 600 $example-family;
-	$example-bold-italic 					: italic normal 700 $example-family;
-	$example-extra-bold-italic 				: italic normal 800 $example-family;
-	$example-heavy-italic 					: italic normal 900 $example-family;
+// style, variant, weight, family
+$example-ultra-light: normal normal 100 $example-family;
+$example-light: normal normal 200 $example-family;
+$example-book: normal normal 300 $example-family;
+$example-regular: normal normal 400 $example-family;
+$example-medium: normal normal 500 $example-family;
+$example-semi-bold: normal normal 600 $example-family;
+$example-bold: normal normal 700 $example-family;
+$example-extra-bold: normal normal 800 $example-family;
+$example-heavy: normal normal 900 $example-family;
+$example-ultra-light-italic: italic normal 100 $example-family;
+$example-light-italic: italic normal 200 $example-family;
+$example-book-italic: italic normal 300 $example-family;
+$example-regular-italic: italic normal 400 $example-family;
+$example-medium-italic: italic normal 500 $example-family;
+$example-semi-bold-italic: italic normal 600 $example-family;
+$example-bold-italic: italic normal 700 $example-family;
+$example-extra-bold-italic: italic normal 800 $example-family;
+$example-heavy-italic: italic normal 900 $example-family;

data/sass/piecss/settings/fonts/_monospace.scss

@@ -1,39 +1,39 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-	// Weight reference:
-	// 100 ultra-light
-	// 200 light
-	// 300 book
-	// 400 regular, or normal
-	// 500 medium
-	// 600 semi-bold
-	// 700 bold
-	// 800 extra-bold
-	// 900 heavy, or ultra-bold
+// Weight reference:
+// 100 ultra-light
+// 200 light
+// 300 book
+// 400 regular, or normal
+// 500 medium
+// 600 semi-bold
+// 700 bold
+// 800 extra-bold
+// 900 heavy, or ultra-bold
 
 
-	// Example
-    // Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
-	$monospace-fontface 						: monospace;
-	$monospace-family							: $monospace-fontface;
+// Example
+// Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
+$monospace-fontface: monospace;
+$monospace-family: $monospace-fontface;
 
-	// style, variant, weight, family
-	$monospace-ultra-light 						: normal normal 400 $monospace-family;
-	$monospace-light 							: normal normal 400 $monospace-family;
-	$monospace-book 							: normal normal 400 $monospace-family;
-	$monospace-regular 							: normal normal 400 $monospace-family;
-	$monospace-medium							: normal normal 600 $monospace-family;
-	$monospace-semi-bold						: normal normal 600 $monospace-family;
-	$monospace-bold 							: normal normal 600 $monospace-family;
-	$monospace-extra-bold 						: normal normal 600 $monospace-family;
-	$monospace-heavy 							: normal normal 600 $monospace-family;
-	$monospace-ultra-light-italic 				: italic normal 400 $monospace-family;
-	$monospace-light-italic 					: italic normal 400 $monospace-family;
-	$monospace-book-italic 						: italic normal 400 $monospace-family;
-	$monospace-regular-italic 					: italic normal 400 $monospace-family;
-	$monospace-medium-italic					: italic normal 600 $monospace-family;
-	$monospace-semi-bold-italic					: italic normal 600 $monospace-family;
-	$monospace-bold-italic 						: italic normal 600 $monospace-family;
-	$monospace-extra-bold-italic 				: italic normal 600 $monospace-family;
-	$monospace-heavy-italic 					: italic normal 600 $monospace-family;
+// style, variant, weight, family
+$monospace-ultra-light: normal normal 400 $monospace-family;
+$monospace-light: normal normal 400 $monospace-family;
+$monospace-book: normal normal 400 $monospace-family;
+$monospace-regular: normal normal 400 $monospace-family;
+$monospace-medium: normal normal 600 $monospace-family;
+$monospace-semi-bold: normal normal 600 $monospace-family;
+$monospace-bold: normal normal 600 $monospace-family;
+$monospace-extra-bold: normal normal 600 $monospace-family;
+$monospace-heavy: normal normal 600 $monospace-family;
+$monospace-ultra-light-italic: italic normal 400 $monospace-family;
+$monospace-light-italic: italic normal 400 $monospace-family;
+$monospace-book-italic: italic normal 400 $monospace-family;
+$monospace-regular-italic: italic normal 400 $monospace-family;
+$monospace-medium-italic: italic normal 600 $monospace-family;
+$monospace-semi-bold-italic: italic normal 600 $monospace-family;
+$monospace-bold-italic: italic normal 600 $monospace-family;
+$monospace-extra-bold-italic: italic normal 600 $monospace-family;
+$monospace-heavy-italic: italic normal 600 $monospace-family;

data/sass/piecss/settings/fonts/_sans-serif.scss

@@ -1,39 +1,39 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-	// Weight reference:
-	// 100 ultra-light
-	// 200 light
-	// 300 book
-	// 400 regular, or normal
-	// 500 medium
-	// 600 semi-bold
-	// 700 bold
-	// 800 extra-bold
-	// 900 heavy, or ultra-bold
+// Weight reference:
+// 100 ultra-light
+// 200 light
+// 300 book
+// 400 regular, or normal
+// 500 medium
+// 600 semi-bold
+// 700 bold
+// 800 extra-bold
+// 900 heavy, or ultra-bold
 
 
-	// Example
-    // Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
-	$sans-serif-fontface 						: sans-serif;
-	$sans-serif-family							: $sans-serif-fontface;
+// Example
+// Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
+$sans-serif-fontface: sans-serif;
+$sans-serif-family: $sans-serif-fontface;
 
-	// style, variant, weight, family
-	$sans-serif-ultra-light 					: normal normal 400 $sans-serif-family;
-	$sans-serif-light 							: normal normal 400 $sans-serif-family;
-	$sans-serif-book 							: normal normal 400 $sans-serif-family;
-	$sans-serif-regular 						: normal normal 400 $sans-serif-family;
-	$sans-serif-medium							: normal normal 600 $sans-serif-family;
-	$sans-serif-semi-bold						: normal normal 600 $sans-serif-family;
-	$sans-serif-bold 							: normal normal 600 $sans-serif-family;
-	$sans-serif-extra-bold 						: normal normal 600 $sans-serif-family;
-	$sans-serif-heavy 							: normal normal 600 $sans-serif-family;
-	$sans-serif-ultra-light-italic 				: italic normal 400 $sans-serif-family;
-	$sans-serif-light-italic 					: italic normal 400 $sans-serif-family;
-	$sans-serif-book-italic 					: italic normal 400 $sans-serif-family;
-	$sans-serif-regular-italic 					: italic normal 400 $sans-serif-family;
-	$sans-serif-medium-italic					: italic normal 600 $sans-serif-family;
-	$sans-serif-semi-bold-italic				: italic normal 600 $sans-serif-family;
-	$sans-serif-bold-italic 					: italic normal 600 $sans-serif-family;
-	$sans-serif-extra-bold-italic 				: italic normal 600 $sans-serif-family;
-	$sans-serif-heavy-italic 					: italic normal, 600, $sans-serif-family;
+// style, variant, weight, family
+$sans-serif-ultra-light: normal normal 400 $sans-serif-family;
+$sans-serif-light: normal normal 400 $sans-serif-family;
+$sans-serif-book: normal normal 400 $sans-serif-family;
+$sans-serif-regular: normal normal 400 $sans-serif-family;
+$sans-serif-medium: normal normal 600 $sans-serif-family;
+$sans-serif-semi-bold: normal normal 600 $sans-serif-family;
+$sans-serif-bold: normal normal 600 $sans-serif-family;
+$sans-serif-extra-bold: normal normal 600 $sans-serif-family;
+$sans-serif-heavy: normal normal 600 $sans-serif-family;
+$sans-serif-ultra-light-italic: italic normal 400 $sans-serif-family;
+$sans-serif-light-italic: italic normal 400 $sans-serif-family;
+$sans-serif-book-italic: italic normal 400 $sans-serif-family;
+$sans-serif-regular-italic: italic normal 400 $sans-serif-family;
+$sans-serif-medium-italic: italic normal 600 $sans-serif-family;
+$sans-serif-semi-bold-italic: italic normal 600 $sans-serif-family;
+$sans-serif-bold-italic: italic normal 600 $sans-serif-family;
+$sans-serif-extra-bold-italic: italic normal 600 $sans-serif-family;
+$sans-serif-heavy-italic: italic normal, 600, $sans-serif-family;

data/sass/piecss/settings/fonts/_serif.scss

@@ -1,39 +1,39 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-	// Weight reference:
-	// 100 ultra-light
-	// 200 light
-	// 300 book
-	// 400 regular, or normal
-	// 500 medium
-	// 600 semi-bold
-	// 700 bold
-	// 800 extra-bold
-	// 900 heavy, or ultra-bold
+// Weight reference:
+// 100 ultra-light
+// 200 light
+// 300 book
+// 400 regular, or normal
+// 500 medium
+// 600 semi-bold
+// 700 bold
+// 800 extra-bold
+// 900 heavy, or ultra-bold
 
 
-	// Example
-    // Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
-	$serif-fontface 						: serif;
-	$serif-family							: $serif-fontface;
+// Example
+// Available styles on Google Fonts: 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic
+$serif-fontface: serif;
+$serif-family: $serif-fontface;
 
-	// style, variant, weight, family
-	$serif-ultra-light 						: normal normal 400 $serif-family;
-	$serif-light 							: normal normal 400 $serif-family;
-	$serif-book 							: normal normal 400 $serif-family;
-	$serif-regular 							: normal normal 400 $serif-family;
-	$serif-medium							: normal normal 600 $serif-family;
-	$serif-semi-bold						: normal normal 600 $serif-family;
-	$serif-bold 							: normal normal 600 $serif-family;
-	$serif-extra-bold 						: normal normal 600 $serif-family;
-	$serif-heavy 							: normal normal 600 $serif-family;
-	$serif-ultra-light-italic 				: italic normal 400 $serif-family;
-	$serif-light-italic 					: italic normal 400 $serif-family;
-	$serif-book-italic 						: italic normal 400 $serif-family;
-	$serif-regular-italic 					: italic normal 400 $serif-family;
-	$serif-medium-italic					: italic normal 600 $serif-family;
-	$serif-semi-bold-italic					: italic normal 600 $serif-family;
-	$serif-bold-italic 						: italic normal 600 $serif-family;
-	$serif-extra-bold-italic 				: italic normal 600 $serif-family;
-	$serif-heavy-italic 					: italic normal 600 $serif-family;
+// style, variant, weight, family
+$serif-ultra-light: normal normal 400 $serif-family;
+$serif-light: normal normal 400 $serif-family;
+$serif-book: normal normal 400 $serif-family;
+$serif-regular: normal normal 400 $serif-family;
+$serif-medium: normal normal 600 $serif-family;
+$serif-semi-bold: normal normal 600 $serif-family;
+$serif-bold: normal normal 600 $serif-family;
+$serif-extra-bold: normal normal 600 $serif-family;
+$serif-heavy: normal normal 600 $serif-family;
+$serif-ultra-light-italic: italic normal 400 $serif-family;
+$serif-light-italic: italic normal 400 $serif-family;
+$serif-book-italic: italic normal 400 $serif-family;
+$serif-regular-italic: italic normal 400 $serif-family;
+$serif-medium-italic: italic normal 600 $serif-family;
+$serif-semi-bold-italic: italic normal 600 $serif-family;
+$serif-bold-italic: italic normal 600 $serif-family;
+$serif-extra-bold-italic: italic normal 600 $serif-family;
+$serif-heavy-italic: italic normal 600 $serif-family;

data/sass/piecss/settings/fonts/_verdana.scss

@@ -1,40 +1,40 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-	// Weight reference:
-	// 100 ultra-light
-	// 200 light
-	// 300 book
-	// 400 regular, or normal
-	// 500 medium
-	// 600 semi-bold
-	// 700 bold
-	// 800 extra-bold
-	// 900 heavy, or ultra-bold
+// Weight reference:
+// 100 ultra-light
+// 200 light
+// 300 book
+// 400 regular, or normal
+// 500 medium
+// 600 semi-bold
+// 700 bold
+// 800 extra-bold
+// 900 heavy, or ultra-bold
 
 
-	// Example
-    // Available styles on Google Fonts: 400,700,400italic,700italic
-	$verdana-fontface 						: "Verdana";
-	$verdana-fallback						: sans-serif;
-	$verdana-family							: $verdana-fontface, $verdana-fallback;
+// Example
+// Available styles on Google Fonts: 400,700,400italic,700italic
+$verdana-fontface: "Verdana";
+$verdana-fallback: sans-serif;
+$verdana-family: $verdana-fontface, $verdana-fallback;
 
-	// style, variant, weight, family
-	$verdana-ultra-light 					: normal normal 400 $verdana-family;
-	$verdana-light 							: normal normal 400 $verdana-family;
-	$verdana-book 							: normal normal 400 $verdana-family;
-	$verdana-regular 						: normal normal 400 $verdana-family;
-	$verdana-medium							: normal normal 400 $verdana-family;
-	$verdana-semi-bold						: normal normal 700 $verdana-family;
-	$verdana-bold 							: normal normal 700 $verdana-family;
-	$verdana-extra-bold 					: normal normal 700 $verdana-family;
-	$verdana-heavy 							: normal normal 700 $verdana-family;
-	$verdana-ultra-light-italic 			: italic normal 400 $verdana-family;
-	$verdana-light-italic 					: italic normal 400 $verdana-family;
-	$verdana-book-italic 					: italic normal 400 $verdana-family;
-	$verdana-regular-italic 				: italic normal 400 $verdana-family;
-	$verdana-medium-italic					: italic normal 400 $verdana-family;
-	$verdana-semi-bold-italic				: italic normal 700 $verdana-family;
-	$verdana-bold-italic 					: italic normal 700 $verdana-family;
-	$verdana-extra-bold-italic 				: italic normal 700 $verdana-family;
-	$verdana-heavy-italic 					: italic normal 700 $verdana-family;
+// style, variant, weight, family
+$verdana-ultra-light: normal normal 400 $verdana-family;
+$verdana-light: normal normal 400 $verdana-family;
+$verdana-book: normal normal 400 $verdana-family;
+$verdana-regular: normal normal 400 $verdana-family;
+$verdana-medium: normal normal 400 $verdana-family;
+$verdana-semi-bold: normal normal 700 $verdana-family;
+$verdana-bold: normal normal 700 $verdana-family;
+$verdana-extra-bold: normal normal 700 $verdana-family;
+$verdana-heavy: normal normal 700 $verdana-family;
+$verdana-ultra-light-italic: italic normal 400 $verdana-family;
+$verdana-light-italic: italic normal 400 $verdana-family;
+$verdana-book-italic: italic normal 400 $verdana-family;
+$verdana-regular-italic: italic normal 400 $verdana-family;
+$verdana-medium-italic: italic normal 400 $verdana-family;
+$verdana-semi-bold-italic: italic normal 700 $verdana-family;
+$verdana-bold-italic: italic normal 700 $verdana-family;
+$verdana-extra-bold-italic: italic normal 700 $verdana-family;
+$verdana-heavy-italic: italic normal 700 $verdana-family;

data/sass/piecss/utilities/_breakpoint.scss

@@ -15,25 +15,25 @@
 /// @example scss
 ///  $small_handheld: "(max-width: #{to-unit(480px,1em,16px)})";
 ///  @include breakpoint($small_handheld);
-/// 
+///
 /// @access public
 /// @since 0.1
 ///
 /// @param {String} $breakpoints - A valid breakpoint
 /// @param {Map} $media - The media to which this breakpoint applies
 ///
-@mixin breakpoint($breakpoints, $media: "only screen")
-{
+@mixin breakpoint($breakpoints, $media: "only screen") {
+
   $breakpoints: unquote($breakpoints);
 
   $query: ();
-  @if list-separator($breakpoints)=="comma" {
+  @if list-separator($breakpoints) == "comma" {
     @each $breakpoint in $breakpoints {
       $breakpoint: unquote($breakpoint);
       $query: append($query, $breakpoint, comma);
     }
   }
-  @else {
+@else {
     $query: append($query, $breakpoints, comma);
   }