piecss 0.6.0 → 0.7.0

data/sass/piecss/behavior/layout/_leader.scss

@@ -0,0 +1,57 @@
+/*
+Leader
+
+.leader - Adds a margin of 3 rhythms to top
+.leader--tiny - Adds a margin of 1 rhythms to top
+.leader--small - Adds a margin of 2 rhythms to top
+.leader--large - Adds a margin of 4 rhythms to top
+.leader--hug - Adds a margin of 6 rhythms to top
+
+markup:
+<div class="{$modifiers}">I am content inside of a semanticless container</div>
+*/
+
+.leader {
+  margin-top: rhythm(3);
+  &--tiny {
+    margin-top: rhythm();
+  }
+  &--small {
+    margin-top: rhythm(2);
+  }
+  &--large {
+    margin-top: rhythm(4);
+  }
+  &--huge {
+    margin-top: rhythm(6);
+  }
+}
+
+/*
+Leader inside
+
+.leader-inside - Adds a padding of 3 rhythms to top
+.leader-inside--tiny - Adds a padding of 1 rhythms to top
+.leader-inside--small - Adds a padding of 2 rhythms to top
+.leader-inside--large - Adds a padding of 4 rhythms to top
+.leader-inside--huge - Adds a padding of 6 rhythms to top
+
+markup:
+<div class="{$modifiers}">I am content inside of a semanticless container</div>
+*/
+
+.leader-inside {
+  padding-top: rhythm(3);
+  &--tiny {
+    padding-top: rhythm();
+  }
+  &--small {
+    padding-top: rhythm(2);
+  }
+  &--large {
+    padding-top: rhythm(4);
+  }
+  &--huge {
+    padding-top: rhythm(6);
+  }
+}

data/sass/piecss/behavior/layout/_trailer.scss

@@ -0,0 +1,57 @@
+/*
+Trailer
+
+.trailer - Adds a margin of 3 rhythms to bottom
+.trailer--tiny - Adds a margin of 1 rhythms to bottom
+.trailer--small - Adds a margin of 2 rhythms to bottom
+.trailer--large - Adds a margin of 4 rhythms to bottom
+.trailer--huge - Adds a margin of 6 rhythms to bottom
+
+markup:
+<div class="{$modifiers}">I am content inside of a semanticless container</div>
+*/
+
+.trailer {
+  margin-bottom: rhythm(3);
+  &--tiny {
+    margin-bottom: rhythm();
+  }
+  &--small {
+    margin-bottom: rhythm(2);
+  }
+  &--large {
+    margin-bottom: rhythm(4);
+  }
+  &--huge {
+    margin-bottom: rhythm(6);
+  }
+}
+
+/*
+Trailer inside
+
+.trailer-inside - Adds a padding of 3 rhythms to bottom
+.trailer-inside--tiny - Adds a padding of 1 rhythms to bottom
+.trailer-inside--small - Adds a padding of 2 rhythms to bottom
+.trailer-inside--large - Adds a padding of 4 rhythms to bottom
+.trailer-inside--huge - Adds a padding of 6 rhythms to bottom
+
+markup:
+<div class="{$modifiers}">I am content inside of a semanticless container</div>
+*/
+
+.trailer-inside {
+  padding-bottom: rhythm(3);
+  &--tiny {
+    padding-bottom: rhythm();
+  }
+  &--small {
+    padding-bottom: rhythm(2);
+  }
+  &--large {
+    padding-bottom: rhythm(4);
+  }
+  &--huge {
+    padding-bottom: rhythm(6);
+  }
+}

data/sass/piecss/behavior/layout/_wings.scss

@@ -0,0 +1,122 @@
+/*
+Wings
+
+.wings - Wings on an element outside a layout
+
+markup:
+<div class="{$modifiers}  |  gutters  |  txt--l  |  leader">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+*/
+$wing-collection: ();
+$wing-selector: ".wing";
+@if variable-exists($wings) {
+  @if $wings > 0 {
+    @include add-properties(
+      $wing-collection,
+      $wing-selector,
+      (
+        width: percentage(($columns - $wings) / $columns);
+      )
+    );
+  }
+  @each $breakpoint, $grid in $grids {
+    @if $wings > 0 {
+      width: percentage(($columns - $wings) / $columns);
+    }
+  }
+
+  .wings {
+    @if $wings > 0 {
+      width: percentage(($columns - $wings) / $columns);
+    } @else {
+      width: 100%;
+    }
+    @each $breakpoint, $grid in $grids {
+      @if $wings > 0 {
+        width: percentage(($columns - $wings) / $columns);
+      }
+    }
+
+
+    @include breakpoint($gt-medium-handheld) {
+      width: percentage(10 / 12);
+      margin-right: auto;
+      margin-left: auto;
+    }
+    @include breakpoint($gt-large-handheld) {
+      width: percentage(12 / 16);
+    }
+    @include breakpoint($gt-small-desktop) {
+      width: percentage(10 / 18);
+      .layout__cell--main & {
+        width: percentage(10 / 12);
+        .layout--sidebar & {
+          width: percentage(10 / 14);
+        }
+      }
+      .layout__cell--aside & {
+        width: 100%;
+      }
+    }
+    @include breakpoint($gt-medium-desktop) {
+      .layout__cell--aside & {
+        width: percentage(4 / 6);
+        .layout--sidebar & {
+          width: 100%;
+        }
+      }
+    }
+    @include breakpoint($gt-large-desktop) {
+      width: percentage(10 / 20);
+      .layout__cell--main & {
+        width: percentage(10 / 14);
+        .layout--sidebar & {
+          width: percentage(10 / 16);
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+/*
+Wings
+
+.wings - Wings on an element in a split layout
+
+markup:
+<div class="layout layout--split  |  trailer">
+  <div class="layout__cell layout__cell--main" style="border-right: 1px solid $color-structure--02;">
+    <div class="{$modifiers}  |  gutters  |  txt--l">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+    <div class="{$modifiers}  |  gutters  |  leader">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+  </div>
+  <div class="layout__cell layout__cell--aside">
+    <div class="{$modifiers}  |  gutters">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+  </div>
+</div>
+
+Styleguide 3.97.2.1
+*/
+
+
+
+/*
+Wings
+
+.wings - Wings on an element in a sidebar layout
+
+markup:
+<div class="layout layout--sidebar  |  leader">
+  <div class="layout__cell layout__cell--main" style="border-right: 1px solid $color-structure--02;">
+    <div class="{$modifiers}  |  gutters  |  txt--l">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+    <div class="{$modifiers}  |  gutters  |  leader">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+  </div>
+  <div class="layout__cell layout__cell--aside">
+    <div class="{$modifiers}  |  gutters">Lorem ipsum dolor sit amet, consectetur adipisici|ng elit, sed do eius|mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
+  </div>
+</div>
+
+Styleguide 3.97.2.2
+*/

data/sass/piecss/behavior/list/_list.scss

@@ -2,189 +2,148 @@
 
 @import "settings";
 
-// ==========================================================================
-//
-// CONTENT
-//
-// ==========================================================================
-//
-// 1. Reset
-// 2. Placeholders
-//    %list--incognito
-//    %list--inline
-//    %list--outside
-//    %list--inside
-//    %list--{type}
+#{$list-selector} {
 
+  // ==========================================================================
+  // List all items inline
+  // ==========================================================================
 
-// ==========================================================================
-//
-// 1. RESET
-//
-// ==========================================================================
-//
-// If $reset-list-style equals true (see settings/list) all lists are reset.
-// Applying a class of list to a ul or ol will restore the default behavior.
-//
-// 1. Remove default list behavior
-// 2. Restore default list behavior when a class of list is applied
-// 3. Ensure list items inherit from their parent list
-//
-// --------------------------------------------------------------------------
-
-@if $reset-list {
-  ol {
-    &.#{$list-selector} {
-      @extend %#{$list-selector}--#{$list-ol-default} !optional;
-      @extend %#{$list-selector}--inside;
-    }
-    li {
-      list-style-type: $list-ul-default;
-    }
-  }
-  ul {
-    &.#{$list-selector} {
-      @extend %#{$list-selector}--#{$list-ul-default} !optional;
-      @extend %#{$list-selector}--inside;
+  @if $list-inline {
+    &--inline {
+      >li {
+        display: inline;
+      }
     }
   }
-  li {
-    list-style-type: inherit;
-    list-style-position: inherit;
-    list-style-image: inherit;
-  }
-}
-
-
-// ==========================================================================
-//
-// 2. PLACEHOLDERS
-//
-// ==========================================================================
-
-
-// ==========================================================================
-// Placeholder %list--reset
-// --------------------------------------------------------------------------
-// Remove default list behavior
-// ==========================================================================
-
-%#{$list-selector}--reset {
-  padding: 0;
-  list-style-type: none;
-}
-
 
-// ==========================================================================
-// Placeholder %list--inline
-// --------------------------------------------------------------------------
-// List all items inline
-// ==========================================================================
+  // ==========================================================================
+  // Moves bullets outside of the left text margin
+  // ==========================================================================
 
-%#{$list-selector}--inline {
-  >li {
-    display: inline;
+  @if $list-style-position-outside {
+    &--outside {
+      list-style-position: outside;
+    }
   }
-}
-
-
-// ==========================================================================
-// Placeholder %list--outside
-// --------------------------------------------------------------------------
-// Moves bullets outside of the left text margin
-// ==========================================================================
 
-%#{$list-selector}--outside {
-  list-style-position: outside;
-}
-
-
-// ==========================================================================
-// Placeholder %list--inside
-// --------------------------------------------------------------------------
-// Moves bullets inside of the left text margin
-// ==========================================================================
-
-%#{$list-selector}--inside {
-  list-style-position: inside;
-  // padding-left: 1em;
-  // text-indent: -1em;
-}
+  // ==========================================================================
+  // Moves bullets inside of the left text margin
+  // ==========================================================================
 
+  @if $list-style-position-inside {
+    &--inside {
+      list-style-position: inside;
+    }
+  }
 
-// ==========================================================================
-// List bullet types
-// --------------------------------------------------------------------------
-// All bullet types:
-// %list--circle,
-// %list--decimal,
-// %list--lower-alpha,
-// etc.
-// ==========================================================================
-
-@if $list-style-type-armenian {
-  @include list-style-type(armenian);
-}
-@if $list-style-type-circle {
-  @include list-style-type(circle);
-}
-@if $list-style-type-cjk-ideographic {
-  @include list-style-type(armenian);
-}
-@if $list-style-type-decimal {
-  @include list-style-type(decimal);
-}
-@if $list-style-type-decimal-leading-zero {
-  @include list-style-type(decimal-leading-zero);
-}
-@if $list-style-type-disc {
-  @include list-style-type(disc);
-}
-@if $list-style-type-georgian {
-  @include list-style-type(georgian);
-}
-@if $list-style-type-hebrew {
-  @include list-style-type(hebrew);
-}
-@if $list-style-type-hiragana {
-  @include list-style-type(hiragana);
-}
-@if $list-style-type-hiragana-iroha {
-  @include list-style-type(hiragana-iroha);
-}
-@if $list-style-type-inherit {
-  @include list-style-type(inherit);
-}
-@if $list-style-type-katakana {
-  @include list-style-type(katakana);
-}
-@if $list-style-type-katakana-iroha {
-  @include list-style-type(katakana-iroha);
-}
-@if $list-style-type-lower-alpha {
-  @include list-style-type(lower-alpha);
-}
-@if $list-style-type-lower-greek {
-  @include list-style-type(lower-greek);
-}
-@if $list-style-type-lower-latin {
-  @include list-style-type(lower-latin);
-}
-@if $list-style-type-lower-roman {
-  @include list-style-type(lower-roman);
-}
-@if $list-style-type-none {
-  @include list-style-type(none);
-}
-@if $list-style-type-square {
-  @include list-style-type(square);
-}
-@if $list-style-type-upper-alpha {
-  @include list-style-type(upper-alpha);
-}
-@if $list-style-type-upper-latin {
-  @include list-style-type(upper-latin);
-}
-@if $list-style-type-upper-roman {
-  @include list-style-type(upper-roman);
+  // ==========================================================================
+  // List bullet types
+  // --------------------------------------------------------------------------
+  // All bullet types:
+  // %list--circle,
+  // %list--decimal,
+  // %list--lower-alpha,
+  // etc.
+  // ==========================================================================
+
+  @if $list-style-type-armenian {
+    &--armenian {
+      list-style-type: armenian;
+    }
+  }
+  @if $list-style-type-circle {
+    &--circle {
+      list-style-type: circle;
+    }
+  }
+  @if $list-style-type-cjk-ideographic {
+    &--cjk-ideographic {
+      list-style-type: cjk-ideographic;
+    }
+  }
+  @if $list-style-type-decimal {
+    &--decimal {
+      list-style-type: decimal;
+    }
+  }
+  @if $list-style-type-decimal-leading-zero {
+    &--decimal-leading-zero {
+      list-style-type: decimal-leading-zero;
+    }
+  }
+  @if $list-style-type-disc {
+    &--disc {
+      list-style-type: disc;
+    }
+  }
+  @if $list-style-type-georgian {
+    &--georgian {
+      list-style-type: georgian;
+    }
+  }
+  @if $list-style-type-hebrew {
+    &--hebrew {
+      list-style-type: hebrew;
+    }
+  }
+  @if $list-style-type-hiragana {
+    &--hiragana {
+      list-style-type: hiragana;
+    }
+  }
+  @if $list-style-type-hiragana-iroha {
+    &--hiragana-iroha {
+      list-style-type: hiragana-iroha;
+    }
+  }
+  @if $list-style-type-katakana {
+    &--katakana {
+      list-style-type: katakana;
+    }
+  }
+  @if $list-style-type-katakana-iroha {
+    &--katakana-iroha {
+      list-style-type: katakana-iroha;
+    }
+  }
+  @if $list-style-type-lower-alpha {
+    &--lower-alpha {
+      list-style-type: lower-alpha;
+    }
+  }
+  @if $list-style-type-lower-greek {
+    &--lower-greek {
+      list-style-type: lower-greek;
+    }
+  }
+  @if $list-style-type-lower-latin {
+    &--lower-latin {
+      list-style-type: lower-latin;
+    }
+  }
+  @if $list-style-type-lower-roman {
+    &--lower-roman {
+      list-style-type: lower-roman;
+    }
+  }
+  @if $list-style-type-square {
+    &--square {
+      list-style-type: square;
+    }
+  }
+  @if $list-style-type-upper-alpha {
+    &--upper-alpha {
+      list-style-type: upper-alpha;
+    }
+  }
+  @if $list-style-type-upper-latin {
+    &--upper-latin {
+      list-style-type: upper-latin;
+    }
+  }
+  @if $list-style-type-upper-roman {
+    &--upper-roman {
+      list-style-type: upper-roman;
+    }
+  }
 }

data/sass/piecss/behavior/list/_settings.scss

@@ -2,42 +2,36 @@
 
 
 ///
-/// If true, the default behavior of lists will be reset (remove padding and list-style-type none).
+/// The namespace for the list placeholders
 ///
-/// @type {Bool}
+/// @type {String}
 ///
 
-$reset-list: false;
+$list-selector: "%list" !default;
 
 ///
-/// The namespace for the list placeholders
+/// If true, a --inline modifier lists all items inline
 ///
 /// @type {String}
 ///
 
-$list-selector: "list" !default;
+$list-inline: true !default;
 
 ///
-/// The default list-style-type for ul lists
+/// If true, a --outside modifier moves bullets outside of the left text margin
 ///
 /// @type {String}
 ///
 
-$list-ul-default: disc !default;
+$list-style-position-outside: false !default;
 
 ///
-/// The default list-style-type for ol lists
+/// If true, a --inside modifier moves bullets inside of the left text margin
 ///
 /// @type {String}
 ///
 
-$list-ol-default: decimal !default;
-
-
-// ==========================================================================
-// List Style Types
-// See: http://www.w3schools.com/cssref/pr_list-style-type.asp
-// ==========================================================================
+$list-style-position-inside: false !default;
 
 ///
 /// If true, Piecss will render a placeholder for this list-style-type (%list--armenian)
@@ -119,14 +113,6 @@ $list-style-type-hiragana: false;
 
 $list-style-type-hiragana-iroha: false !default;
 
-///
-/// If true, Piecss will render a placeholder for this list-style-type (%list--inherit)
-///
-/// @type {Bool}
-///
-
-$list-style-type-inherit: true !default;
-
 ///
 /// If true, Piecss will render a placeholder for this list-style-type (%list--katakana)
 ///
@@ -175,14 +161,6 @@ $list-style-type-lower-latin: true !default;
 
 $list-style-type-lower-roman: true !default;
 
-///
-/// If true, Piecss will render a placeholder for this list-style-type (%list--none)
-///
-/// @type {Bool}
-///
-
-$list-style-type-none: true !default;
-
 ///
 /// If true, Piecss will render a placeholder for this list-style-type (%list--square)
 ///

data/sass/piecss/settings/_colour.scss

@@ -1,5 +1,14 @@
+///
+/// Force consistent shades in a project. These default values are based on
+/// Google’s [Material Design](https://material.io/guidelines/style/color.html#).
+/// See `[$shades](./#mixin-shades)` on how to use.
+///
+/// @since 0.7
+///
+/// @return {Bool}
+///
 
-$shades: (20%, 40%, 60%, 80%, 100%) !default;
+$shades: (10%, 12%, 30%, 38%, 50%, 54%, 70%, 87%, 100%) !default;
 
 $aliceblue: #f0f8ff;
 $antiquewhite: #faebd7;

data/sass/piecss/settings/_font.scss

@@ -8,4 +8,3 @@
 @import "fonts/serif";
 @import "fonts/sans-serif";
 @import "fonts/monospace";
-@import "fonts/verdana";