piecss 0.3.0.1 → 0.3.2

data/sass/piecss/settings/_layout.scss

@@ -1,29 +1,7 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-// Rhythm settings
-
-// 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 $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: 8px !default;
-
-///
-/// If true,reveals the document's vertical rhythm. Also see: [mixin $debug-rhythm](./#mixin-debug-rhythm).
-///
-/// @since 0.1
-///
-/// @type {Bool}
-///
-
-$debug-rhythm: false !default;
+// Layout settings
 
 ///
 /// If true,reveals the document's horizontal rhythm. Also see: [mixin $debug-layout](./#mixin-debug-layout).
@@ -53,9 +31,7 @@ $single-direction-elements: (p, pre, table, hr, article) !default;
 /// @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.
@@ -88,7 +64,7 @@ $column-float: false !default; // If you prefer floated columns instead of inlin
 // /// @type {Number}
 // ///
 
-// $gutter-width: 2*$rhythm !default;
+$gutter-width: $default-line-height !default;
 
 ///
 /// The final unit of output in which gutter widths are rendered
@@ -173,27 +149,27 @@ $columns: 4 !default;
 ///
 
 $layouts: (
-  debug-color: $orange,
+  debug-color: $deeppink, // #ff1493
   columns: 4,
   rhythm: $rhythm, // 8px
   gutter-width: rhythm(3), // 24px
   pages: (),
   $gt-small-handheld: (
-    debug-color: $orange,
+    debug-color: $orange, // #ffa500
     columns: 4,
     rhythm: $rhythm,
     gutter-width: rhythm(3),
     pages: ()
   ),
   $gt-medium-handheld: (
-    debug-color: $cyan,
+    debug-color: $cyan, // #0ff
     columns: 8,
     rhythm: $rhythm,
     gutter-width: rhythm(3),
     pages: ()
   ),
   $gt-small-desktop: (
-    debug-color: $becca,
+    debug-color: $becca, // #639
     columns: 12,
     rhythm: $rhythm,
     gutter-width: rhythm(3),

data/sass/piecss/settings/_rhythm.scss

@@ -0,0 +1,26 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Rhythm settings
+
+// 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 8px which is 1/3 times the $default-line-height.
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$rhythm: 8px !default;
+
+///
+/// If true,reveals the document's vertical rhythm. Also see: [mixin $debug-rhythm](./#mixin-debug-rhythm).
+///
+/// @since 0.1
+///
+/// @type {Bool}
+///
+
+$debug-rhythm: false !default;

data/sass/piecss/settings/_typography.scss

@@ -1,13 +0,0 @@
-// $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/utilities/_breakpoint.scss

@@ -2,11 +2,11 @@
 
 
 // Content:
-// 1. Functions
+// 1. Mixins
 //    breakpoint
 
 
-// 1. FUNCTIONS
+// 1. Mixins
 
 ///
 /// Expects a valid breakpoint expression like (min-width: 30em)
@@ -22,6 +22,7 @@
 /// @param {String} $breakpoints - A valid breakpoint
 /// @param {Map} $media - The media to which this breakpoint applies
 ///
+
 @mixin breakpoint($breakpoints, $media: "only screen") {
 
   $breakpoints: unquote($breakpoints);
@@ -33,7 +34,7 @@
       $query: append($query, $breakpoint, comma);
     }
   }
-@else {
+  @else {
     $query: append($query, $breakpoints, comma);
   }
 

data/sass/piecss/utilities/_layout.scss

@@ -7,6 +7,13 @@
 //    percentage
 //    fraction-to-text
 //    gutters
+//    get-layout
+//    get-layout-property
+//    get-layout-columns
+//    get-layout-gutter-width
+//    get-layout-rhythm
+//    get-layout-debug-color
+
 // 2. Mixins
 //    2a. Columns
 //        column
@@ -37,11 +44,9 @@
 /// @return {Number} - The resulting percentage value
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @function fraction-to-percentage($fraction: 1/3) {
   @return percentage($fraction);
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
@@ -63,11 +68,7 @@
 /// @return {String}
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @function fraction-to-text($fraction) {
-  @if type-of($fraction) == string {
-    @warn 'The function fraction-to-text only accepts unquoted fractions (1/2 and not \"1/2\")';
-  }
 
   @if $fraction ==  1/1 { @return "full"; }
   @if $fraction ==  1/2 { @return "half"; }
@@ -153,7 +154,6 @@
 
   @return "full";
 }
-// scss-lint:enable SpaceAroundOperator
 
 ///
 /// Return a value based on the gutter-width. The gutter width is set as a property of the layouts map.
@@ -164,7 +164,6 @@
 /// @return {Number} - The resulting value in px
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @function gutter($args...) {
 
   $_fraction: 1/2;
@@ -182,58 +181,143 @@
     }
   }
 
-  $gutter-width: get-layout-gutter-width($layouts);
-
+  // Retrieve the gutter-width from the settings, but check if one is set in layouts and take that in stead
+  $_gutter-width: $gutter-width;
   @if $_breakpoint {
-    $gutter-width: get-layout-gutter-width(get-layout($_breakpoint));
+    $_gutter-width: if(get-layout-gutter-width(get-layout($_breakpoint)), get-layout-gutter-width(get-layout($_breakpoint)), $_gutter-width);
   }
 
+
   @return $_fraction * $gutter-width;
 }
-// scss-lint:enable SpaceAroundOperator
-
 
 ///
 /// Get layout settings from a layout map
 ///
 ///
 /// @param {String} $breakpoints - A valid breakpoint
-/// @param {Map} $page - An optional page layout
+/// @param {Map} $layouts ($layouts) - A layout map
 ///
 /// @return {Map} - A breakpoint global layout, or a breakpoint nested page layout from [$layouts map](./#variable-layouts)
 ///
 
-@function get-layout($breakpoint: null, $page: null) {
+@function get-layout($breakpoint, $layouts: $layouts) {
+
+  @if not( map-has-key($layouts, $breakpoint) ) {
+    @error "Unknown breakpoint: #{$breakpoint}";
+  }
 
-  $layout: map-get($layouts, $breakpoint);
+  @return map-get($layouts, $breakpoint);
+}
 
-  @if $page {
-    $layout: map-get($layout, $page);
+///
+/// Retrieves a property setting for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $columns: get-layout-property($columns);
+///
+/// @param {String} $property - The layout-map property to retrieve
+/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
+/// @param {Map} $layouts ($layouts) - A layout map
+///
+/// @return {*}
+///
+
+@function get-layout-property($property, $breakpoint: false, $layouts: $layouts) {
+
+  $_value: null;
+
+  // Retrieve the layout – default values are not nested in a breakpoint
+  $_layout: $layouts;
+
+  @if $breakpoint and map-has-key($layouts, $breakpoint) {
+    $_layout: get-layout($breakpoint);
+  }
+
+  @if map-has-key($_layout, $property) {
+    $_value: map-get($_layout, $property);
+  }
+  @else {
+    @error "Unknown layout property: #{$property}";
   }
 
-  @return  $layout;
+  @return $_value;
 }
 
+///
+/// Retrieves the column setting for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $columns: get-layout-columns();
+///
+/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
+/// @param {Map} $layouts ($layouts) - A layout map
+///
+/// @since 1.0
+///
+
+@function get-layout-columns($breakpoint: false, $layouts: $layouts) {
+  @return get-layout-property("columns", $breakpoint);
+}
 
 ///
-/// Get layout settings from a layout map
+/// Retrieves the gutter-width setting for a specific breakpoint
 ///
+/// @since 1.0
 ///
-/// @param {String} $breakpoints - A valid breakpoint
-/// @param {Map} $page - An optional page layout
+/// @example
+/// $gutter-width: get-layout-gutter-width();
 ///
-/// @return {Map} - A breakpoint global layout, or a breakpoint nested page layout from [$layouts map](./#variable-layouts)
+/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
+/// @param {Map} $layouts ($layouts) - A layout map
+///
+/// @since 1.0
 ///
 
-@function get($key, $breakpoint) {
+@function get-layout-gutter-width($breakpoint: false, $layouts: $layouts) {
+  @return get-layout-property("gutter-width", $breakpoint);
+}
 
-  @if not( map-has-key($layout, $breakpoint) ) {
-    @error "Unknown breakpoint: #{$breakpoint}";
-  }
 
-  $config: map-get($layout, $breakpoint);
+///
+/// Retrieves the rhythm settings for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $rhythm: get-layout-rhythm();
+///
+/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
+/// @param {Map} $layouts ($layouts) - A layout map
+///
+/// @since 1.0
+///
 
-  @return map-get($config, "columns");
+@function get-layout-rhythm($breakpoint: false, $layouts: $layouts) {
+  @return get-layout-property("rhythm", $breakpoint);
+}
+
+
+///
+/// Retrieves the debug colour settings for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $debug-color: get-layout-debug-color();
+///
+/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
+/// @param {Map} $layouts ($layouts) - A layout map
+///
+/// @since 1.0
+///
+
+@function get-layout-debug-color($breakpoint: false, $layouts: $layouts) {
+  @return get-layout-property("debug-color", $breakpoint);
 }
 
 
@@ -252,7 +336,6 @@
 /// @param {Number | Bool} $apply-margin (false) - A fraction, e.g. 1/2, or false
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin column($fraction: 1/1, $apply-padding: 1/2, $apply-margin: false) {
 
   @include column-behavior();
@@ -266,7 +349,6 @@
     @include gutters($apply-margin, true);
   }
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
@@ -303,7 +385,6 @@
 /// @param {Number} $fraction (1/1) - A fraction, e.g. 1/2
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin column-width($fraction: $column-width-default) {
 
   width: percentage($fraction);
@@ -313,7 +394,6 @@
     margin-right: 0;
   }
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
@@ -325,7 +405,6 @@
 /// @param {Bool} $use-margin (false) - If true, will render gutters outside the column using margins
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin gutters($fraction: 1/2, $use-margin: false) {
 
   $both: length($fraction);
@@ -355,7 +434,6 @@
     }
   }
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
@@ -406,11 +484,9 @@
 /// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin bleed($fraction: -1/2) {
   @include gutters($fraction, true);
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
@@ -421,33 +497,27 @@
 /// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin move($fraction) {
   left: percentage($fraction);
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
 /// @alias move
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin push($fraction) {
   @include move($fraction);
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
 /// @alias move
 ///
 
-// scss-lint:disable SpaceAroundOperator
 @mixin pull($fraction) {
   @include move(-1 * $fraction);
 }
-// scss-lint:enable SpaceAroundOperator
 
 
 ///
@@ -476,7 +546,7 @@
 
 @mixin debug-layout($columns: $columns, $color: $black, $gutter-width: $gutter-width) {
   background-size: percentage(1 / $columns) 100%;
-  // scss-lint:disable SpaceAfterPropertyColon TrailingWhitespace
+  // scss-lint:disable TrailingWhitespace SpaceAfterPropertyColon
   background-image:
     linear-gradient(to right,
       rgba($color, .1) 0,
@@ -496,97 +566,5 @@
       transparent 1px,
       transparent  percentage($columns / $columns)
     );
-  // scss-lint:enable SpaceAfterPropertyColon TrailingWhitespace
-}
-
-
-
-///
-/// Retrieves the layout settings for a specific breakpoint
-///
-/// @since 1.0
-///
-
-@function get-layout($breakpoint) {
-  @return map-get($layouts, $breakpoint);
-}
-
-
-///
-/// Retrieves the column setting for a specific breakpoint
-///
-/// @since 1.0
-///
-
-@function get-layout-columns($breakpoint: false) {
-  @return get-layout-property("columns", $breakpoint);
-}
-
-
-///
-/// Retrieves the gutter-width setting for a specific breakpoint
-///
-/// @since 1.0
-///
-
-@function get-layout-gutter-width($breakpoint: false) {
-  @return get-layout-property("gutter-width", $breakpoint);
-}
-
-
-///
-/// Retrieves the rhythm settings for a specific breakpoint
-///
-/// @since 1.0
-///
-
-@function get-layout-rhythm($breakpoint: false) {
-  @return get-layout-property("rhythm", $breakpoint);
-}
-
-
-///
-/// Retrieves the debug colour settings for a specific breakpoint
-///
-/// @since 1.0
-///
-
-@function get-layout-debug-color($breakpoint: false) {
-  @return get-layout-property("debug-color", $breakpoint);
-}
-
-
-///
-/// Retrieves a property setting for a specific breakpoint
-///
-/// @since 1.0
-///
-/// @example
-/// $columns: get-layout-property($columns);
-///
-/// @param {String} $property - The layout-map property to retrieve
-/// @param {String | Bool} $breakpoint (false) - A valid breakpoint string, or false to retrieve the default value
-///
-/// @return {*}
-///
-
-@function get-layout-property($property, $breakpoint: false, $layouts: $layouts) {
-
-  $_value: null;
-
-  // Retrieve the layout – default values are not nested in a breakpoint
-  $_layout: $layouts;
-
-  @if $breakpoint and map-has-key($layouts, $breakpoint) {
-    $_layout: map-get($layouts, $breakpoint);
-  }
-
-  @if map-has-key($_layout, $property) {
-    $_value: map-get($_layout, $property);
-  }
-@else {
-    @error "Unknown layout property: #{$property}";
-  }
-
-  @return $_value;
+  // scss-lint:enable TrailingWhitespace SpaceAfterPropertyColon
 }

data/sass/piecss/utilities/_list.scss

@@ -19,10 +19,8 @@
 /// @param {String} $type
 ///
 
-// scss-lint:disable Indentation
 @mixin list-style-type($type) {
-	%list--#{$type} {
-		list-style-type: $type;
-	}
+  %list--#{$type} {
+    list-style-type: $type;
+  }
 }
-// scss-lint:enable Indentation

data/sass/piecss/utilities/_miscellaneous.scss

@@ -183,7 +183,7 @@
 /// @since 0.1
 ///
 /// @example
-/// @include inline-block(baseline);
+///  @include inline-block(baseline);
 ///
 /// @param {String} $vertical-alignment (baseline) - Set $inline-block-alignment to none or false to disable the output of a vertical-align property in the inline-block mixin. Or set it to a legal value for vertical-align to change the default.
 ///
@@ -273,8 +273,6 @@
 /// @param {String} $selector (&) - The selector to append the pseudo-element to
 /// @param {List | String} $placement (before) - The pseudo-element(s)
 ///
-/// @return {Bool}
-///
 
 @mixin pseudo-element($placements: "before", $selectors: "&") {
 

data/sass/piecss/utilities/_rhythm.scss

@@ -64,7 +64,7 @@
 /// @param {Number} $context (16px) - The font-size context
 ///
 
-@mixin rhythm($units, $property, $context: $font-size) {
+@mixin rhythm($units, $property, $context: $default-font-size) {
     // @if strip-unit($units)==0 {
     //     #{$property}: 0;
     // }
@@ -83,7 +83,6 @@
 /// @param {Number} $rhythm - The rhythm height
 ///
 
-// scss-lint:disable ImportantRule DuplicateProperty
 @mixin debug-rhythm($rhythm: $rhythm) {
   $to: transparent;
   $from: rgba($lightcyan, .5);
@@ -92,13 +91,14 @@
   background-size: (2 * $rhythm) (2 * $rhythm);
 
   * {
+    // scss-lint:disable ImportantRule DuplicateProperty
     background-image: none !important;
     background-color: transparent !important;
     outline: rgba($fuchsia, .1) dotted 1px;
     outline: $lightgray dotted 1px;
+    // scss-lint:enable ImportantRule DuplicateProperty
     @include old-ie {
       outline: lighten($fuchsia, .1) dotted 1px \9;
     }
   }
 }
-// scss-lint:enable ImportantRule DuplicateProperty

data/sass/piecss/utilities/_side.scss

@@ -80,11 +80,12 @@
 ///
 /// @param {List} $values - The value to test, can be a single number or a list
 /// @param {Number} $unit ($unit) - A list of keys to match
+/// @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em
 ///
 /// @return {Map}
 ///
 
-@function value-map-to-unit($map, $unit: $unit) {
+@function value-map-to-unit($map, $unit: $unit, $context: $default-font-size) {
 
   @if not(type-of($map) == map) {
     @warn "Argument $map needs to be a map.";
@@ -93,7 +94,7 @@
 
   // Convert to units
   @each $key, $value in $map {
-    $map: map-merge($map, ($key: to-unit($value, $unit)));
+    $map: map-merge($map, ($key: to-unit($value, $unit, $context)));
   }
 
   @return $map;