piecss 0.6.0 → 0.7.0

data/sass/piecss/settings/_grid.scss

@@ -0,0 +1,119 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Grid settings
+
+
+// ///
+// /// 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: $default-line-height !default;
+
+///
+/// The final unit of output in which gutter widths are rendered
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$gutter-width-unit: $unit !default;
+
+// Root settings
+// Set a max width on a root container of your choice, the content will not stretch beyond this width.
+// The root container can be positioned left or center, for alternate position you can provide your own behavior.
+
+
+///
+/// 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).
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$root-max-width: 72em !default;
+
+///
+/// Aligns content inside the viewport, center by default. Used by the [root mixin](./#mixin-root).
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$root-position: center !default;
+
+///
+/// The page's default number of columns. Used in debug-layout to visualize column layout.
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$columns: 4 !default;
+
+///
+/// The color used for debugging
+///
+/// @since 0.7
+///
+/// @type {Color} (#ff1493)
+///
+
+$debug-color: $deeppink;
+
+///
+/// A wing is a whitespace of one or more columns. Use in conjunction with page
+/// layouts.
+///
+/// @since 0.7
+///
+/// @type {Color} (#ff1493)
+///
+
+$wings: 0;
+
+///
+/// (Totally arbitrary) Default breakpoint grids.
+/// The first breakpoint should be a `$lt-###` breakpoint and will be condiered
+/// the default, smallest breakpoint.
+/// Serves as an example grid.
+///
+/// @since 0.1
+///
+/// @type {Map}
+///
+
+$grids: (
+  $gt-small-handheld: (
+    debug-color: $orange, // #ffa500
+    columns: 6,
+    rhythm: $rhythm,
+    gutter-width: $gutter-width,
+    wings: 0,
+    layouts: ()
+  ),
+  $gt-medium-handheld: (
+    debug-color: $cyan, // #0ff
+    columns: 9,
+    rhythm: $rhythm,
+    gutter-width: $gutter-width,
+    wings: 0,
+    layouts: ()
+  ),
+  $gt-small-desktop: (
+    debug-color: $becca, // #639
+    columns: 12,
+    rhythm: $rhythm,
+    gutter-width: $gutter-width,
+    wings: 0,
+    layouts: ()
+  )
+) !default;

data/sass/piecss/settings/_legacy.scss

@@ -0,0 +1,24 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+///
+/// Use this to create separate stylesheets for older MSIE browsers.
+/// When false, it will not compile rules wrapped in the [old-ie() mixin](./#mixin-old-ie).
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$legacy-support-for-ie: false !default;
+
+///
+/// Use this to create separate stylesheets for old Firefox browsers.
+/// When false, it will not compile rules wrapped in the [old-ie() mixin](./#mixin-old-mozilla).
+///
+/// @since 0.1
+///
+/// @type {Number}
+///
+
+$legacy-support-for-mozilla: false !default;

data/sass/piecss/settings/_rhythm.scss

@@ -14,13 +14,3 @@
 ///
 
 $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/utilities/_collection.scss

@@ -166,7 +166,11 @@
 
 @mixin get-properties($selector) {
   @each $property in $selector {
-    #{nth($property, 1)}: unquote(nth($property, 2));
+
+    $_property: nth($property, 1);
+    $_value: unquote(#{nth($property, 2)});
+
+    #{$_property}: $_value;
   }
 }
 

data/sass/piecss/utilities/_colour.scss

@@ -10,9 +10,9 @@
 
 
 ///
-/// Mixin to force consistent shades in a project.
-/// Set acceptable shades in the colour settings.
-/// If a shade is not acceptable, the function throws an errror
+/// Mixin to force consistent shades in a project. Set acceptable shades in the
+/// colour settings. If a shade is not acceptable, the function throws an errror.
+/// See `[$shades](./#variable-shades)` for default values.
 ///
 /// @since 0.1
 ///

data/sass/piecss/utilities/_grid.scss

@@ -0,0 +1,355 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content
+//
+// 1. Functions
+//    fraction-to-text
+//    gutter
+//    get-grid
+//    get-grid-property
+//    get-grid-columns
+//    get-grid-gutter-width
+//    get-grid-rhythm
+//    get-grid-debug-color
+
+// 2. Mixins
+//    2a. Layout
+//        root
+//        bleed
+//    2b. Source Ordering
+//        move
+//        pull
+//        push
+
+
+// 1. FUNCTIONS
+
+
+///
+/// Convert a fraction to a word.
+/// Used to build style rules based on column widths.
+/// For values up to #/16.
+///
+/// @example scss
+///  .#{fraction-to-text(1/2)} {
+///      // Column properties }
+///  // Output:
+///  .half {
+///     // Column properties }
+///
+/// @since 0.1
+///
+/// @param {Number} $fraction - A fraction, e.g. 1/2
+///
+/// @return {String}
+///
+
+@function fraction-to-text($fraction) {
+
+  @if $fraction ==  1/1 { @return "full"; }
+  @if $fraction ==  1/2 { @return "half"; }
+  @if $fraction ==  1/3 { @return "third"; }
+  @if $fraction ==  1/4 { @return "fourth"; }
+  @if $fraction ==  1/5 { @return "fifth"; }
+  @if $fraction ==  1/6 { @return "sixth"; }
+  @if $fraction ==  1/7 { @return "seventh"; }
+  @if $fraction ==  1/8 { @return "eighth"; }
+  @if $fraction ==  1/9 { @return "ninth"; }
+  @if $fraction ==  1/10 { @return "tenth"; }
+  @if $fraction ==  1/11 { @return "eleventh"; }
+  @if $fraction ==  1/12 { @return "twelfth"; }
+  @if $fraction ==  1/13 { @return "thirteenth"; }
+  @if $fraction ==  1/14 { @return "fourteenth"; }
+  @if $fraction ==  1/15 { @return "fifteenth"; }
+  @if $fraction ==  1/16 { @return "sixteenth"; }
+  @if $fraction ==  2/3 { @return "two-third"; }
+  @if $fraction ==  3/4 { @return "three-fourth"; }
+  @if $fraction ==  2/5 { @return "two-fifth"; }
+  @if $fraction ==  3/5 { @return "three-fifth"; }
+  @if $fraction ==  4/5 { @return "four-fifth"; }
+  @if $fraction ==  5/6 { @return "five-sixth"; }
+  @if $fraction ==  2/7 { @return "two-seventh"; }
+  @if $fraction ==  3/7 { @return "three-seventh"; }
+  @if $fraction ==  4/7 { @return "four-seventh"; }
+  @if $fraction ==  5/7 { @return "five-seventh"; }
+  @if $fraction ==  6/7 { @return "six-seventh"; }
+  @if $fraction ==  3/8 { @return "three-eighth"; }
+  @if $fraction ==  5/8 { @return "five-eighth"; }
+  @if $fraction ==  7/8 { @return "seven-eighth"; }
+  @if $fraction ==  2/9 { @return "two-ninth"; }
+  @if $fraction ==  4/9 { @return "four-ninth"; }
+  @if $fraction ==  5/9 { @return "five-ninth"; }
+  @if $fraction ==  7/9 { @return "seven-ninth"; }
+  @if $fraction ==  8/9 { @return "eight-ninth"; }
+  @if $fraction ==  3/10 { @return "three-tenth"; }
+  @if $fraction ==  7/10 { @return "seven-tenth"; }
+  @if $fraction ==  9/10 { @return "nine-tenth"; }
+  @if $fraction ==  2/11 { @return "two-eleventh"; }
+  @if $fraction ==  3/11 { @return "three-eleventh"; }
+  @if $fraction ==  4/11 { @return "four-eleventh"; }
+  @if $fraction ==  5/11 { @return "five-eleventh"; }
+  @if $fraction ==  6/11 { @return "six-eleventh"; }
+  @if $fraction ==  7/11 { @return "seven-eleventh"; }
+  @if $fraction ==  8/11 { @return "eight-eleventh"; }
+  @if $fraction ==  9/11 { @return "nine-eleventh"; }
+  @if $fraction == 10/11 { @return "ten-eleventh"; }
+  @if $fraction ==  5/12 { @return "five-twelfth"; }
+  @if $fraction ==  7/12 { @return "seven-twelfth"; }
+  @if $fraction ==  9/12 { @return "nine-twelfth"; }
+  @if $fraction == 11/12 { @return "eleven-twelfth"; }
+  @if $fraction ==  2/13 { @return "two-thirteenth"; }
+  @if $fraction ==  3/13 { @return "three-thirteenth"; }
+  @if $fraction ==  4/13 { @return "four-thirteenth"; }
+  @if $fraction ==  5/13 { @return "five-thirteenth"; }
+  @if $fraction ==  6/13 { @return "six-thirteenth"; }
+  @if $fraction ==  7/13 { @return "seven-thirteenth"; }
+  @if $fraction ==  8/13 { @return "eight-thirteenth"; }
+  @if $fraction ==  9/13 { @return "nine-thirteenth"; }
+  @if $fraction == 10/13 { @return "ten-thirteenth"; }
+  @if $fraction == 11/13 { @return "twelve-thirteenth"; }
+  @if $fraction == 12/13 { @return "thirteen-thirteenth"; }
+  @if $fraction ==  3/14 { @return "three-fourteenth"; }
+  @if $fraction ==  5/14 { @return "five-fourteenth"; }
+  @if $fraction ==  9/14 { @return "nine-fourteenth"; }
+  @if $fraction == 11/14 { @return "eleven-fourteenth"; }
+  @if $fraction == 13/14 { @return "thirteen-fourteenth"; }
+  @if $fraction ==  2/15 { @return "two-fifteenth"; }
+  @if $fraction ==  4/15 { @return "four-fifteenth"; }
+  @if $fraction ==  7/15 { @return "seven-fifteenth"; }
+  @if $fraction ==  8/15 { @return "eight-fifteenth"; }
+  @if $fraction == 11/15 { @return "eleven-fifteenth"; }
+  @if $fraction == 13/15 { @return "thirteen-fifteenth"; }
+  @if $fraction == 14/15 { @return "fourteen-fifteenth"; }
+  @if $fraction ==  3/16 { @return "three-sixteenth"; }
+  @if $fraction ==  5/16 { @return "five-sixteenth"; }
+  @if $fraction ==  7/16 { @return "seven-sixteenth"; }
+  @if $fraction ==  9/16 { @return "nine-sixteenth"; }
+  @if $fraction == 11/16 { @return "eleven-sixteenth"; }
+  @if $fraction == 13/16 { @return "thirteen-sixteenth"; }
+  @if $fraction == 15/16 { @return "sixteen-sixteenth"; }
+
+  @return "full";
+}
+
+///
+/// Return a value based on the gutter-width.
+/// If no breakpoint is set, the function will return the default gutter-width.
+/// If a breakpoint is set, the function will return a gutter-width from the
+/// grids map.
+///
+/// @param {Arglist} $args - An argument list, may contain 2 values (a fraction and/or a valid breakpoint)
+///
+/// @return {Number} - The resulting value in px
+///
+
+@function gutter($args...) {
+
+  $_fraction: 1/2;
+  $_breakpoint: false;
+
+  // Process arguments
+  @if length($args) {
+    @each $var in $args {
+      @if type-of($var) == number {
+        $_fraction: $var;
+      }
+      @if type-of($var) == list {
+        $_breakpoint: $var;
+      }
+    }
+  }
+
+  // Retrieve the gutter-width from the settings, but check if one is set in grids and take that in stead
+  $_gutter-width: $gutter-width;
+  @if $_breakpoint {
+    $_gutter-width: if(get-grid-gutter-width(get-grid($_breakpoint)), get-grid-gutter-width(get-grid($_breakpoint)), $_gutter-width);
+  }
+
+  @return $_fraction * $gutter-width;
+}
+
+///
+/// Get grid settings from a grid map
+///
+///
+/// @param {String} $breakpoints - A valid breakpoint
+/// @param {Map} $grids ($grids) - A grid map
+///
+/// @return {Map} - A breakpoint global grid, or a breakpoint nested page grid from [$grids map](./#variable-grids)
+///
+
+@function get-grid($breakpoint, $grids: $grids) {
+
+  @if not( map-has-key($grids, $breakpoint) ) {
+    @error "Unknown breakpoint: #{$breakpoint}";
+  }
+
+  @return map-get($grids, $breakpoint);
+}
+
+///
+/// Retrieves a property setting for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $columns: get-grid-property($columns, $grid);
+///
+/// @param {String} $property - The grid-map property to retrieve
+/// @param {Map} $grids ($grids) - A grid map
+///
+/// @return {*}
+///
+
+@function get-grid-property($property, $grid) {
+
+  $_value: null;
+
+  @if map-has-key($grid, $property) {
+    $_value: map-get($grid, $property);
+  }
+  @else {
+    @error "Unknown grid property: #{$property}";
+  }
+
+  @return $_value;
+}
+
+///
+/// Retrieves the column setting for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $columns: get-grid-columns();
+///
+/// @param {Map} $grids ($grid) - A grid map
+///
+/// @since 1.0
+///
+
+@function get-grid-columns($grid) {
+  @return get-grid-property("columns", $grid);
+}
+
+///
+/// Retrieves the gutter-width setting for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $gutter-width: get-grid-gutter-width();
+///
+/// @param {Map} $grids ($grid) - A grid map
+///
+/// @since 1.0
+///
+
+@function get-grid-gutter-width($grid) {
+  @return get-grid-property("gutter-width", $grid);
+}
+
+
+///
+/// Retrieves the rhythm settings for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $rhythm: get-grid-rhythm();
+///
+/// @param {Map} $grids ($grid) - A grid map
+///
+/// @since 1.0
+///
+
+@function get-grid-rhythm($grid) {
+  @return get-grid-property("rhythm", $grid);
+}
+
+
+///
+/// Retrieves the debug colour settings for a specific breakpoint
+///
+/// @since 1.0
+///
+/// @example
+/// $debug-color: get-grid-debug-color();
+///
+/// @param {Map} $grids ($grid) - A grid map
+///
+/// @since 1.0
+///
+
+@function get-grid-debug-color($grid) {
+  @return get-grid-property("debug-color", $grid);
+}
+
+
+
+// 2. MIXINS
+
+
+///
+/// Fixes content width and aligns in viewport. [$root-position](./#variable-root-position) is defind in grid settings. Centers content inside the viewport by default.
+///
+/// @since 0.1
+///
+/// @param {Number} $root-max-width (72em) - The maximum width of your content
+///
+
+@mixin root($root-max-width: $root-max-width, $set-display: false) {
+
+  @if $root-position == center {
+    margin: 0 auto;
+  }
+
+  max-width: $root-max-width;
+}
+
+
+///
+/// Mixin to reverse padding on a container.
+/// Use it to remove padded column spacing on columns, helpful when nesting columns and when applying backgrounds.
+///
+/// @since 0.1
+///
+/// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
+///
+
+@mixin bleed($fraction: -1/2) {
+  margin-left: gutter($fraction, true);
+  margin-right: gutter($fraction, true);
+}
+
+
+///
+/// Mixin for soure ordering
+///
+/// @since 0.1
+///
+/// @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
+///
+
+@mixin move($fraction) {
+  left: percentage($fraction);
+}
+
+
+///
+/// @alias move
+///
+
+@mixin push($fraction) {
+  @include move($fraction);
+}
+
+
+///
+/// @alias move
+///
+
+@mixin pull($fraction) {
+  @include move(-1 * $fraction);
+}

data/sass/piecss/utilities/_legacy.scss

@@ -0,0 +1,42 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Mixins
+//    old-ie
+//    old-mozilla
+
+
+// 1. Mixins
+
+
+///
+/// Support for old-ie, use it to separate old-ie declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
+///
+/// @since 0.1
+///
+/// @example
+///  @include old-ie() { // properties }
+///
+
+@mixin old-ie() {
+  @if $legacy-support-for-ie {
+    @content;
+  }
+}
+
+
+///
+/// Support for old-mozilla, use it to separate old-mozilla declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
+///
+/// @since 0.1
+///
+/// @example
+///  @include old-mozilla() { // properties }
+///
+
+@mixin old-mozilla() {
+  @if $legacy-support-for-mozilla {
+    @content;
+  }
+}

data/sass/piecss/utilities/_miscellaneous.scss

@@ -37,7 +37,8 @@
 }
 
 ///
-/// Converts a list of property values to a property map. Use to convert 'old-style' associative arrays to SASS's new Map type.
+/// Converts a list of property values to a property map. Use to convert
+/// 'old-style' associative arrays to SASS's new Map type.
 ///
 /// @example
 /// list-to-map((color $white, text-align left))
@@ -66,54 +67,9 @@
 
 
 ///
-/// Mixin for border properties
-///
-/// @todo: fix line 96: #{$property}-#{$key}
-///
-/// @since 0.1
-///
-/// @param {String | Map | List | Number} $values - The border (or outline) properties
-/// @param {Bool} $outline - If true, will render the values as outline properties
-///
-
-@mixin border($values, $outline: false) {
-
-  // This mixin needs a value-map to work, so convert argument if it is not a value-map;
-  @if not(is-value-map($values, $keys-border)) {
-    $values: value-map($values, $keys-border);
-  }
-
-  $property: if($outline, outline, border);
-
-  // Rem fallback
-  $width: map-get($values, width);
-  @if type-of($width) == number and unit($width) == rem {
-    #{$property}-width: to-px($width);
-  }
-
-  @if map-has-key($values, width) and map-has-key($values, style) and map-has-key($values, color) {
-    #{$property}: map-get($values, width) map-get($values, style) map-get($values, color);
-  }
-@else {
-    @each $key, $value in $values {
-      // styleguide:ignore:start
-      #{$property}-#{$key}: $value;
-      // styleguide:ignore:end
-    }
-  }
-}
-
-///
-/// @alias border
-///
-
-@mixin outline($attributes) {
-  @include border($attributes, true);
-}
-
-
-///
-/// Provides a cross-browser method to implement opacity. This replaces [Compass's](http://compass-style.org/reference/compass/css3/opacity/) mixin by the same name with a more accessible implementation.
+/// Provides a cross-browser method to implement opacity. This replaces
+/// [Compass's](http://compass-style.org/reference/compass/css3/opacity/) mixin
+/// by the same name with a more accessible implementation.
 ///
 /// @since 0.1
 ///
@@ -145,39 +101,9 @@
 }
 
 ///
-/// Support for old-ie, use it to separate old-ie declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
-///
-/// @since 0.1
-///
-/// @example
-///  @include old-ie() { // properties }
-///
-
-@mixin old-ie() {
-  @if $legacy-support-for-ie {
-    @content;
-  }
-}
-
-
-///
-/// Support for old-mozilla, use it to separate old-mozilla declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
-///
-/// @since 0.1
-///
-/// @example
-///  @include old-mozilla() { // properties }
-///
-
-@mixin old-mozilla() {
-  @if $legacy-support-for-mozilla {
-    @content;
-  }
-}
-
-
-///
-/// Provides a cross-browser method to implement display: inline-block;. This replaces [Compass's](http://compass-style.org/reference/compass/css3/inline_block/) mixin by the same name with a more accessible implementation.
+/// Provides a cross-browser method to implement display: inline-block;. This
+/// replaces [Compass's](http://compass-style.org/reference/compass/css3/inline_block/)
+/// mixin by the same name with a more accessible implementation.
 /// See for valid property values: [http://www.w3schools.com/cssref/pr_pos_vertical-align.asp](http://www.w3schools.com/cssref/pr_pos_vertical-align.asp)
 ///
 /// @since 0.1