piecss 0.1.0.alpha.01

data/sass/piecss/utilities/list.scss

@@ -0,0 +1,26 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Mixins
+//    list-style-type
+
+
+// 1. Mixins
+
+
+/**
+ * Mixin a list-style-type
+ * @example scss
+ *  @include list-style-type(bullet);
+ *
+ * @since 0.1
+ *
+ * @param {String} $type
+ */
+
+@mixin list-style-type($type) {
+	%#{$list-selector}--#{$type} {
+		list-style-type: $type;
+	}
+}

data/sass/piecss/utilities/miscellaneous.scss

@@ -0,0 +1,260 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Functions
+//    to-bool
+// 2. Mixins
+//    property
+//    border
+//    outline
+//    old-ie
+//    old-mozilla
+//    inline-block
+
+
+// 1. Functions
+
+
+/**
+ * Converts a value to a proper boolean value
+ * 
+ * @since 0.1
+ *
+ * @param {*} $value
+ *
+ * @return {Bool}
+ */
+
+@function to-bool($value) {
+  @if not $value or $value == "" or $value == 0 {
+    @return false;
+  }
+  @return true;
+}
+
+/**
+ * Converts a list of property values to a property map. Use to convert 'old-style' associative arrays to SASS's new Map type.
+ * 
+ * @example
+ *  @include list-to-map(color #FFF, text-align left)
+ *  // Output:
+ *  (color: #FFF, text-align: left)
+ *
+ * @since 0.1
+ *
+ * @param {List} $properties
+ *
+ * @return {Map}
+ */
+
+@function list-to-map($properties)
+{
+    $map: ();
+    @each $property in $properties {
+        $map: map-merge($map, ( nth($property,1): nth($property,2) ) );
+    }
+
+    @return $map;
+}
+
+
+// 2. Mixins
+
+
+/**
+ * Conditional mixin of property
+ * 
+ * @since 0.1
+ * @deprecated
+ *
+ * @param {String} $property - A CSS property
+ * @param {Bool | *} $value - A value for the property, or false if the property should not be rendered.
+ */
+
+@mixin property($property, $value)
+{
+    @if to-bool($value) {
+        #{$property}: $value;
+    }
+}
+
+/**
+ * 
+ * @alias border
+ * Mixin for outline properties.
+ */
+
+@mixin outline($attributes)
+{
+    @include border($attributes, true);
+}
+
+/**
+ * Mixin for border properties
+ * 
+ * @since 0.1
+ *
+ * @todo Provide examples
+ *
+ * @param {String | Map | List | Numner} $values - The border (or outline) properties
+ * @param {Bool} $outline - If true, will render the values as outline properties
+ */
+
+@mixin border($values, $outline: false)
+{
+    $property: if($outline, outline, border);
+
+    @if type-of($values)=="list" {
+        $map: ();
+        @each $value in $values {
+            @if type-of($value)==number {
+                $map: append($map, width, space);
+            }
+            @else if type-of($value)==color {
+                $map: append($map, color, space);
+            }
+            @elseif type-of($value)==string {
+                $map: append($map, style, space);
+            }
+        }
+        @include border( list-to-map( zip($map, $values) ), $outline);
+    }
+    @elseif type-of($values)=="string" {
+        #{$property}: $values;
+    }
+    @elseif type-of($values)=="map" {
+
+        @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 {
+            $keys: map-keys($values);
+            @each $key in $keys {
+                #{$property}-#{$key}: map-get($values, $key);
+            }
+        }
+    }
+}
+
+
+/**
+ * Support for old-mozilla, cuse 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, cuse 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.
+ * 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
+ *
+ * @example
+ *  @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.
+ */
+
+@mixin inline-block($vertical-alignment: baseline) {
+    $vertical-alignment: unquote($vertical-alignment);
+
+    @include old-mozilla() {
+        display: -moz-inline-stack;
+    }
+
+    display: inline-block;
+    @if to-bool($vertical-alignment) {
+        vertical-align: #{$vertical-alignment};
+    }
+
+    @include old-ie() {
+        zoom: 1;
+        display: inline;
+        vertical-align: #{$vertical-alignment};
+    }
+}
+/**
+ * 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
+ *
+ * @param {Number} $opacity - A number between 0 and 1, where 0 is transparent and 1 is opaque.
+ */
+
+@mixin opacity($opacity) {
+    @include old-ie() {
+        filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
+    }
+    opacity: $opacity;
+}
+
+/**
+ * Accepts a string which a valid appearance
+ *
+ * @since 0.1
+ *
+ * @param {String} $appearance
+ */
+
+@mixin reset-appearance($appearance)
+{
+    @include reset-webkit-appearance($appearance);
+    @include reset-mozilla-appearance($appearance);
+}
+
+
+
+
+/**
+ * Accepts a string which a valid appearance
+ *
+ * @since 0.1
+ *
+ * @param {String} $appearance
+ */
+
+@mixin reset-webkit-appearance($appearance)
+{
+    -webkit-appearance: $appearance; /* mobile firefox too! */
+}
+
+
+/**
+ * Accepts a string which a valid appearance
+ *
+ * @since 0.1
+ *
+ * @param {String} $appearance
+ */
+
+@mixin reset-mozilla-appearance($appearance)
+{
+    -moz-appearance: $appearance; /* mobile firefox too! */
+}

data/sass/piecss/utilities/rhythm.scss

@@ -0,0 +1,173 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Functions
+//    1a. Vertical Rhythm:
+//        vrhythm
+//        vrhythm-units
+//    1b. Horizontal Rhythm
+//        hrhythm
+//        vrhythm-units
+// 2. Mixins
+//    2a. Vertical Rhythm:
+//        vrhythm
+//    2b. Horizontal Rhythm:
+//        hrhythm
+//    2c. Miscellaneaous;
+//        debug-rhythm
+ 
+
+// 1. Functions
+
+/**
+ * Calculates a value based on the [$rhythm](./#variable-rhythm).
+ * 
+ * @since 0.1
+ *
+ * @param {Int | Fraction} $span (1) - The number of rhythm-units (whole or fraction) to span
+ *
+ * @return {Number} - The calculated span in px
+ */
+
+@function vrhythm($span: 1)
+{
+    @return $rhythm * $span;
+}
+
+
+/**
+ * Find the optimal rhythm units for a given font-size.
+ * If the specified span is too small for the font-size, find the next best one 
+ * based on a specified increment.
+ *
+ * @since 0.1
+ * 
+ * @param {Number} $font-size (16px) - The font-size in px
+ * @param {Number} (1) $span - The number of rhythm units to span, 1 equals 1 $rhythm
+ * @param {Number} (1) $increment - The increment in rhythm-units
+ *
+ * @return {Number} - The calculated span in px
+ */
+
+@function vrhythm-units($font-size: $default-font-size, $span: 1, $increment: 1)
+{
+    $line-height: $span * $rhythm;
+
+    @if $font-size >= $line-height {
+        // call line-height again, but increase span with increment
+        @return vrhythm-units($font-size, $span + $increment, $increment);
+    }
+
+    @return $span;
+}
+
+
+/**
+ * Calculates a value based on the [$gutter-width](./#variable-gutter-width) as declared in the Layout settings
+ *
+ * @example
+ *  padding: hrhythm(.5);
+ *  padding: to-unit( hrhythm(.5) );
+ *  // Output:
+ *  padding: 8px;
+ *  padding: .5em;
+ *
+ * @since 0.1
+ * 
+ * @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
+ * @param {Value} $context (16px) - The font-size context, defaults to [$default-font-size](./#variable-default-font-size).
+ *
+ * @return {Number} - The calculated span in px
+ */
+
+@function hrhythm($fraction: 1/2, $context: $default-font-size)
+{
+    // Cannot multiply with 0
+    @if $fraction == 0 {
+        @return $fraction;
+    }
+
+    @return $fraction * $gutter-width;
+}
+
+
+// 2. MIXINS
+
+
+/**
+ * Use for top and bottom margins and paddings.
+ *
+ * @example
+ *  @include vrhythm(1, padding-top);
+ *
+ * @since 0.1
+ *
+ * @param {Number} $span - The number of rhythm-units - whole or fraction - to span
+ * @param {String} $property - The property to be set, e.g. padding, margin-top
+ * @param {Value} $context (16px) - The font-size context
+ */
+
+@mixin vrhythm($span, $property, $context: $default-font-size) 
+{
+    @if strip-unit($span)==0 {
+        #{$property}: 0;
+    }
+    @else {
+        @if unit($unit)==rem {
+            #{$property}: $span*$default-line-height;
+        }
+        #{$property}: vrhythm($span);
+    }
+    
+}
+
+
+/**
+ * Use for left and right margins and paddings. Uses  [$gutter-width](./#variable-gutter-width) declared in grid settings
+ *
+ * @example
+ *  @include hrhythm(1, padding-left);
+ * 
+ * @since 0.1
+ *
+ * @param {Number} $fraction - The fraction of the gutter measurement
+ * @param {String} $property - The property to be set, e.g. padding, margin-left
+ * @param {Number} $context (16px) - The font-size context
+ */
+
+@mixin hrhythm($fraction, $property, $context: $default-font-size) 
+{
+    @if strip-unit($span)==0 {
+        #{$property}: 0;
+    }
+    @if unit($unit)==rem {
+        #{$property}: $fraction*$gutter-width;
+    }
+    #{$property}: hrhythm($fraction, $context);
+}
+
+
+/**
+ * Reveals the document's vertical rhythm. Will automatically be mixed in when [$debug-rhythm](./#variable-debug-rhythm) is set to true.
+ *
+ * @since 0.1
+ */
+
+@mixin debug-rhythm()
+{
+    $to: transparent;
+    $from: rgba(226, 255, 255, .5);
+
+    background-image: -webkit-linear-gradient($from 50%, $to 50%);
+    background-image: linear-gradient($from 50%, $to 50%);
+    background-size: 2*$default-line-height 2*$default-line-height;
+
+    * {
+        background-color: transparent !important;
+        background-image: none !important;
+        outline: rgba(255,0,255,.1) dotted 1px;
+        outline: #D6D6D6 dotted 1px;
+        outline: lighten(rgb(255,0,255),.1) dotted 1px \9;
+    }
+}