piecss 0.1.0.alpha.01

data/sass/piecss/utilities/breakpoint.scss

@@ -0,0 +1,46 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Functions
+//    breakpoint
+
+
+// 1. FUNCTIONS
+
+/**
+ * Expects a valid breakpoint expression like (min-width: 30em)
+ * A collection of pre-defined breakpoints are defined in [settings/breakpoints](*). Override and add breakpoints in your project's settings file.
+ *
+ * @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")
+{
+    $breakpoints: unquote($breakpoints);
+    $query: ();
+
+    @if list-separator($breakpoints)=="comma" {
+
+        @each $breakpoint in $breakpoints {
+            $breakpoint: unquote($breakpoint);
+            $query: append($query, $breakpoint, comma);
+        }
+    }
+    @else {
+        $query: append($query, $breakpoints, comma);
+    }
+
+    $query: "#{unquote($media)} and #{unquote($query)}";
+
+    @media #{$query} {
+        @content;
+    }
+}

data/sass/piecss/utilities/cache.scss

@@ -0,0 +1,74 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Variables
+//    smart-cache
+// 2. Mixins
+//    smart-cache
+
+
+// 1. Variables
+
+
+/**
+ * This is where we collect the properties and their selectors
+ *
+ * @type {Map}
+ */
+
+$smart-cache: ();
+
+
+// 1. Functions
+
+
+/**
+ * Function smart-cache
+ *
+ * @example scss
+ * %inline-block {
+ *   @include smart-cache((
+ *     display: inline-block
+ *   ));
+ * }
+ * %no-padding {
+ *   @include smart-cache((
+ *     padding: 0
+ *   ));
+ * }
+ * %no-margin {
+ *   @include smart-cache((
+ *     margin: 0,
+ *   ));
+ * }
+ *
+ * @todo This mixin is under construction and experimental - do not use yet
+ *
+ * @since 0.1
+ *
+ * @param {Map} $properties - Map of CSS properties
+ */
+
+@mixin smart-cache($properties) {
+
+  // Looping through all properties/values from map
+  @each $property, $value in $declarations {
+    // Get the stored values for the current property
+    $stored-values: map-get($smart-cache, $property);
+ 
+    // If the value doesn't exist in stored values
+    @if not index($stored-values, $value) {
+      // Add it
+      $smart-cache: map-merge($smart-cache, ($property: append($stored-values or (), $value))) !global;
+      // And create a placeholder at root level
+      @at-root %#{$property}-#{length(map-get($smart-cache, $property))} {
+        #{$property}: $value;
+      }
+    }
+ 
+    // Extend the placeholder
+    @extend %#{$property}-#{index(map-get($smart-cache, $property), $value)};
+  }
+
+}

data/sass/piecss/utilities/elements.scss

@@ -0,0 +1,182 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Functions
+//    add-element
+//    add-properties
+// 2. Mixins
+//    element
+//    elements
+
+
+// 1. FUNCTIONS
+
+
+/**
+ * Mixes in a new namespace (selector) and css properties into an elements collection.
+ *
+ * @access public
+ * @since 0.1
+ *
+ * @param {Map} $elements - Map, a collection of $selector: $property pairs
+ * @param {Map} $selector - The selector under which the properties will be rendered, for example: %placeholder
+ * @param {Map} $properties (()) - Map of CSS properties
+ *
+ * @return {Map}
+ */
+
+@function add-element($elements, $selector, $properties: ())
+{
+    $_: (
+        #{$selector}: $properties
+    );
+    $elements: map-merge($elements, $_);
+    @return $elements;
+}
+
+/**
+ * Mixes in properties into a selector namespace
+ *
+ * @access public
+ * @since 0.1
+ *
+ * @param {Map} $properties - Map of CSS properties
+ * @param {Map} $selector - The selector under which the properties will be rendered, for example: %placeholder
+ * @param {Map} $elements - Map, a collection of $selector: $property pairs
+ *
+ * @return {Map}
+ */
+
+@function add-properties($properties, $selector, $elements)
+{
+
+    @if not map-has-key($elements, $selector) {
+        $elements: add-element($elements, $selector);
+    }
+
+    // Merge the nested property-map first
+    $element: map-get($elements, $selector);
+    $element: map-merge($element, $properties);
+
+    // Merge the property-map with the element collection
+    $_: (
+        #{$selector}: $element
+    );
+    $elements: map-merge($elements, $_);
+
+    @return $elements;
+}
+
+/**
+ * @alias add-properties
+ */
+@function add-props($properties, $selector, $elements)
+{
+    $elements: add-properties($properties, $selector, $elements);
+    @return $elements;
+}
+
+/**
+ * @alias add-properties
+ */
+@function merge-properties($properties, $selector, $elements)
+{
+    $elements: add-properties($properties, $selector, $elements);
+    @return $elements;
+}
+
+/**
+ * @alias add-properties
+ */
+@function merge-props($properties, $selector, $elements)
+{
+    $elements: add-properties($properties, $selector, $elements);
+    @return $elements;
+}
+
+
+// 2. MIXINS
+
+
+/**
+ * Mixes in properties
+ *
+ * @access public
+ * @since 0.1
+ *
+ * @param {Map} $element - Map of CSS properties
+ */
+
+@mixin properties($element)
+{
+    // Lift out properties that have their own mixins
+    @if map-has-key($element, margin) {
+        $value: map-get($element, margin);
+        $element: map-remove($element, margin);
+        @include margin($value);
+    }
+    @if map-has-key($element, padding) {
+        $value: map-get($element, padding);
+        $element: map-remove($element, padding);
+        @include padding($value);
+    }
+    @if map-has-key($element, border-radius) {
+        $value: map-get($element, border-radius);
+        $element: map-remove($element, border-radius);
+        @include border-radius($value);
+    }
+    @if map-has-key($element, box-shadow) {
+        $value: map-get($element, box-shadow);
+        $element: map-remove($element, box-shadow);
+        @include box-shadow($value);
+    }
+    @if map-has-key($element, font-type) {
+        $value: ();
+        $value: append( $value, map-get($element, font-type));
+        @if map-has-key($element, font-size) {
+            $value: append( ($value), map-get($element, font-size));
+        }
+        @if map-has-key($element, line-height) {
+            $value: append($value, map-get($element, line-height));
+        }
+        $element: map-remove($element, font-family);
+        $element: map-remove($element, font-size);
+        $element: map-remove($element, line-height);
+        $element: map-remove($element, font);
+
+        @include font(nth($value,1), nth($value,2), nth($value,3));
+    }
+    @if map-has-key($element, font) {
+        $value: map-get($element, font);
+        $element: map-remove($element, font);
+        @include font(nth($value,1), nth($value,2), nth($value,3));
+    }
+    
+    $properties: map-keys($element);
+
+    @each $property in $properties {
+        #{$property}: map-get($element, $property);
+    }
+}
+
+
+/**
+ * Mixes in all elements from an element collection
+ *
+ * @access public
+ * @since 0.1
+ *
+ * @param {Map} $elements - Map, a collection of $selector: $property pairs
+ */
+
+@mixin elements($elements) {
+    $selectors: map-keys($elements);
+
+    @each $selector in $selectors {
+        #{$selector} {
+            $element: map-get($elements, $selector);
+            @include properties($element);
+        }
+    }
+}

data/sass/piecss/utilities/image.scss

@@ -0,0 +1,58 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content:
+// 1. Functions
+//    proportion
+//    orientation
+
+
+// 1. FUNCTIONS
+
+
+/**
+ * Calculates the proportions of an element based on its width and height 
+ *
+ * @since 0.1
+ *
+ * @todo: do something when numbers are not the same units
+ *
+ * @param {Map} $size - Map of width and height pairs (width: 100px, height: 100px)
+ *
+ * @return {Number} 
+ */
+
+@function proportion($size)
+{
+    $width: map-get($size, width);
+    $height: map-get($size, height);
+
+    @return $width / $height;
+}
+
+/**
+ * Returns a string for horizontal, portrait or square proportions
+ *
+ * @since 0.1
+ *
+ * @param {Map} $size - Map of width and height pairs (width: 100px, height: 100px)
+ *
+ * @return {String} 
+ */
+
+@function orientation($size)
+{
+    $proportion: proportion($size);
+
+    @if $proportion > 1 {
+        @return landscape;
+    }
+    
+    @if $proportion < 1 {
+        @return portrait;
+    }
+    
+    @if $proportion == 1 {
+        @return square;
+    }
+}

data/sass/piecss/utilities/layout.scss

@@ -0,0 +1,367 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content
+//
+// 1. Functions
+//    percentage
+//    fraction-to-text
+// 2. Mixins
+//    2a. Columns
+//        column
+//        column-behavior
+//        column-width
+//        gutters
+//    2b. Containers
+//        root
+//        bleed
+//        container-behavior
+//    2c. Source Ordering
+//        move
+//        pull
+//        push
+//        reset-source-order
+
+
+// 1. FUNCTIONS
+
+
+/**
+ * Convert a fraction to a percentage.
+ *
+ * @deprecated
+ *
+ * @param {Number} $fraction (1/3) - A fraction, e.g. 1/2
+ *
+ * @return {Number} - The resulting percentage value
+ */
+
+@function fraction-to-percentage($fraction: 1/3)
+{
+    @return percentage($fraction);
+}
+
+
+/**
+ * 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 false;
+}
+
+
+// 2. MIXINS
+
+
+/**
+ * Shorthand mixin for column.
+ * Uses padding by default, can be overridden to use margins instead which is especially helpful when assigning backgrounds or borders.
+ *
+ * @since 0.1
+ * 
+ * @param {Number} $fraction (1/1) - A fraction, e.g. 1/2
+ * @param {Number | Bool} $apply-padding (1/2) - A fraction, e.g. 1/2, or false
+ * @param {Number | Bool} $apply-margin (false) - A fraction, e.g. 1/2, or false
+ */
+
+@mixin column($fraction: 1/1, $apply-padding: 1/2, $apply-margin: false)
+{
+    @include column-behavior();
+    @include column-width($fraction);
+
+    @if $apply-padding {
+        @include gutters($apply-padding);            
+    }
+
+    @if $apply-margin {
+        @include gutters($apply-margin, true);           
+    }
+}
+
+
+/**
+ * Mixin column-behavior: prepares an element to behave as a column. Widths must be set separately with [column-width](./#mixin-column-width).
+ *
+ * @since 0.1
+ * 
+ * @param {Bool} $column-float (false) - If true, render columns as left floated block element. If false, render as inline-blocks.
+ * @param {Bool | Number} $negative-right-margin (false) - If set, applies a negative right margin to force inline-blocks to render without gaps. Only use this if you cannot minify your markup.
+ */
+
+@mixin column-behavior($column-float: $column-float, $negative-right-margin: $negative-right-margin)
+{
+    @if $column-float {
+        display: block;
+        float: left;
+    }
+    @else {
+        @include inline-block(top);
+        @if $negative-right-margin {
+            margin-right: $negative-right-margin !important;
+        }
+    }
+}
+
+
+/**
+ * Mixin column-width. If [$negative-right-margin]() is set, it will automatically remove if from columns that span the full width of their containers.
+ *
+ * @since 0.1
+ * 
+ * @param {Number} $fraction (1/1) - A fraction, e.g. 1/2
+ */
+
+@mixin column-width($fraction: $column-width-default)
+{
+    width: percentage($fraction);
+
+    // Remove negative margin on elements that span full width of their container
+    @if $fraction == 1/1 and $negative-right-margin {
+        margin-right: 0;
+    }
+}
+
+
+/**
+ * Mixes in gutter properties. Gutters are declared inside the column (padding) by default, on both sides. Can be overridden to use margins instead, which is helpful when assigning backgrounds or borders
+ *
+ * @since 0.1
+ * 
+ * @param {Number} $fraction (1/2) - A fraction, e.g. 1/2
+ * @param {Bool} $use-margin (false) - If true, will render gutters outside the column using margins
+ */
+
+@mixin gutters($fraction: 1/2, $use-margin: false)
+{
+    $both: length($fraction);
+
+    $left: $fraction;
+    $right: $fraction;
+
+    @if $both > 1 {
+        $left: nth($fraction,1);
+        $right: nth($fraction,2);
+    }
+
+    @if ($use-margin) {
+        @if $left != false {
+            margin-left: hrhythm($left);
+        }
+        @if $right != false {
+            margin-right: hrhythm($right);
+        }
+    }
+    @else {
+        @if $left != false {
+            padding-left: hrhythm($left);
+        }
+        @if $right != false {
+            padding-right: hrhythm($right);
+        }
+    }
+}
+
+
+/**
+ * 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;
+}
+
+
+/**
+ * Use it to remove column spacing on columns
+ *
+ * @since 0.1
+ * 
+ * @param {Bool} $use-margin (false)
+ */
+
+@mixin container-behavior($use-margin: false)
+{
+    @if $use-margin {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    @else {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+
+/**
+ * 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)
+{
+    @include gutters($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);
+}
+
+
+/**
+ * Mixin for soure ordering.
+ * Will reset positioning for smallest breakpoint.
+ *
+ * @since 0.1
+ */
+
+@mixin reset-source-order()
+{
+    @if $column-breakpoint {
+        @include breakpoint( $column-breakpoint ) {
+            position: static;
+            position: initial;
+        }
+    }
+}