piecss 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6dd677484178f1d302a79e21c4677ccdc015f92d
-  data.tar.gz: ff54e13a8248c969331db448649b454ba0446d4a
+  metadata.gz: d2a23652a5d0b03880f5b75d6d3e8f3c5315aabe
+  data.tar.gz: 74c6228fe81d6404fcb7254de21d36272735c294
 SHA512:
-  metadata.gz: 7f5f72f13371626698a104d01406f6426a6d319b2b861d9f1f0f439015439b46c7c23c54a84e7aa658d3e64b64731d8664232839d67dc7b6c005e8b479730b14
-  data.tar.gz: 75037098279877294a702561e0f1c1fa3437ad44c75b2fbe6d356ca1075c81615356dc6b609c689889fad6adc9d2bae0c9050057b5795e0693e0ba035bf4f811
+  metadata.gz: 11bdda0c25b8d4d5a5b30e7674c5e1a028a24c23d868d32501503615c826bcbc6e45675347d0eb3854a896424eb244eabe2e03bd779339d65bd7c7c3e05ea56f
+  data.tar.gz: 6608f6cef2707995919e47efb1a13260a1be241fcf3e5f788931db40985b6987d3b14977b3d6316cb6f6415d7b871cf028a6a0f928187c58f7263cc96747f6f0

data/sass/piecss/_behavior.scss

@@ -23,3 +23,8 @@
 
 /* List */
 @import "behavior/list/list";
+
+/* Debug */
+@import "behavior/debug/settings";
+@import "behavior/debug/mixins";
+@import "behavior/debug/behavior";

data/sass/piecss/_settings.scss

@@ -7,15 +7,15 @@
 
 @import "settings/constants";
 @import "settings/colour";
-@import "settings/fallback";
 @import "settings/font";
 @import "settings/rhythm";
 @import "settings/unit";
 @import "settings/typography";
+@import "settings/legacy";
 @import "settings/miscellaneous";
 
 // settings/breakpoint on settings/unit and settings/typography
 @import "settings/breakpoint";
 
 // settings/layout on settings/breakpoint
-@import "settings/layout";
+@import "settings/grid";

data/sass/piecss/_utilities.scss

@@ -1,16 +1,14 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
-@import "utilities/cache";
 @import "utilities/unit";
 @import "utilities/string";
-@import "utilities/side";
 @import "utilities/rhythm";
 @import "utilities/breakpoint";
-@import "utilities/layout";
+@import "utilities/grid";
 @import "utilities/typography";
 @import "utilities/collection";
 @import "utilities/image";
-@import "utilities/list";
 @import "utilities/colour";
 @import "utilities/svg";
+@import "utilities/legacy";
 @import "utilities/miscellaneous";

data/sass/piecss/behavior/anchor/_anchor.scss

@@ -1,29 +1,15 @@
-// /*
-// * @copyright  Copyright (C) 2013 Babs Gösgens. All rights reserved.
-// * @license    GNU General Public License version 2 or later; see LICENSE.txt
-// */
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
-/*
------------------------------------------------------------------------------
-Anchors
------------------------------------------------------------------------------
-*/
-
-// @include anchor("#{$anchor-base-selector}", $color-anchor, $color-anchor--hover, $color-anchor--active, $color-anchor--visited, $anchor-mixin-states);
+// -----------------------------------------------------------------------------
+// Element (Atom): Anchor
+// -----------------------------------------------------------------------------
 
 %anchor {
-  text-decoration: none;
-  &--incognito {
-    color: inherit;
+  &--hush {
+    &,
     &:hover {
+      text-decoration: none;
       color: inherit;
     }
   }
 }
-
-a {
-  @extend %anchor !optional;
-  &:hover {
-    color: $color-anchor--hover;
-  }
-}

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

@@ -0,0 +1,11 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+///
+/// The anchor selector
+///
+/// @since 0.7
+///
+/// @type {String} (%anchor)
+///
+
+$anchor-selector: "%anchor";

data/sass/piecss/behavior/base/_base.scss

@@ -1,6 +1,5 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
-// @import "normalize";
 @import "settings";
 @import "collection";
 

data/sass/piecss/behavior/base/_collection.scss

@@ -206,7 +206,7 @@ $base-collection: add-properties(
   (
     text-decoration: dotted /* 2 */
   ),
-  true
+    true
 );
 
 
@@ -218,7 +218,7 @@ $base-collection: add-properties(
   $base-collection,
   "b, strong",
   (
-   font-weight: inherit
+    font-weight: inherit
   )
 );
 
@@ -232,7 +232,7 @@ $base-collection: add-properties(
   (
     font-weight: bolder
   ),
-  true
+    true
 );
 
 /**

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

@@ -10,7 +10,7 @@
 // 1. Collection settings
 
 ///
-/// Collection of base selectors.
+/// Base collection container.
 ///
 /// @since 0.1
 ///

data/sass/piecss/behavior/debug/_behavior.scss

@@ -0,0 +1,22 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+@if $debug-grid or $debug-columns {
+  #{$debug-grid-selector},
+  #{$debug-columns-selector} {
+    @include debug-columns();
+  }
+}
+
+@if $debug-grid or $debug-rhythm {
+  #{$debug-grid-selector},
+  #{$debug-rhythm-selector} {
+    @include debug-rhythm(rgba($color-body, .05));
+  }
+}
+
+@if $debug-grid or $debug-breakpoint {
+  #{$debug-grid-selector},
+  #{$debug-breakpoint-selector} {
+    @include debug-breakpoint();
+  }
+}

data/sass/piecss/behavior/debug/_mixins.scss

@@ -0,0 +1,127 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+///
+/// Renders columns.
+///
+/// @since 0.7
+///
+/// @param {Number} $columns - The number of columns
+/// @param {String} $color - The debug color
+/// @param {Number} $gutter-width - The gutter-width
+///
+
+@mixin _columns($columns: $columns, $color: $black, $gutter-width: $gutter-width) {
+  background-size: percentage(1 / $columns) 100%;
+  // scss-lint:disable SpaceAfterPropertyColon
+  background-image:
+    linear-gradient(to right,
+      rgba($color, .1) 0,
+      rgba($color, .1) $gutter-width / 2,
+      transparent $gutter-width / 2,
+      transparent percentage($columns / $columns)
+    ),
+    linear-gradient(to left,
+      rgba($color, .1) 0,
+      rgba($color, .1) $gutter-width / 2,
+      transparent $gutter-width / 2,
+      transparent percentage($columns / $columns)
+    ),
+    linear-gradient(to left,
+      transparent 0%,
+      rgba($black, .5) 1px,
+      transparent 1px,
+      transparent  percentage($columns / $columns)
+    );
+  // scss-lint:disable SpaceAfterPropertyColon
+}
+
+
+
+
+///
+/// Reveals the document's horizontal rhythm. Will automatically be mixed in
+/// when [$debug-columns](./#variable-debug-layout) or when
+/// [$debug](./#variable-debug) is set to true.
+///
+/// @since 0.1
+///
+
+@mixin debug-columns() {
+  position: relative;
+  @include pseudo-element("before") {
+    pointer-events: none;
+    content: "";
+    display: block;
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    background-color: transparent;
+    background-repeat: repeat-x;
+    background-position: 0 0;
+
+    @include _columns($columns, $debug-color, $gutter-width);
+  }
+  @each $breakpoint, $grid in $grids {
+    $debug-color: get-grid-debug-color($grid);
+    $columns: get-grid-columns($grid);
+    $gutter-width: get-grid-gutter-width($grid);
+    @include breakpoint($breakpoint) {
+      @include pseudo-element("before") {
+        @include _columns($columns, $debug-color, $gutter-width);
+      }
+    }
+  }
+}
+
+///
+/// Reveals the document's vertical rhythm. Will automatically be mixed in when
+/// [$debug-rhythm](./#variable-debug-rhythm) or when
+/// [$debug](./#variable-debug) is set to true.
+///
+/// @since 0.1
+///
+/// @param {String} $color - The debug color
+///
+
+@mixin debug-rhythm($color) {
+  background-image: linear-gradient($color 50%, transparent 50%);
+  background-size: 2 * $rhythm 2 * $rhythm;
+}
+
+///
+/// Reveals the active breakpoint. Will automatically be mixed in when
+/// [$debug-rhythm](./#variable-debug-breakpoint) or when
+/// [$debug](./#variable-debug) is set to true.
+///
+/// @since 0.7
+///
+
+@mixin debug-breakpoint() {
+  position: relative;
+  @include pseudo-element("after") {
+    position: fixed;
+    z-index: 10;
+    top: rhythm(2);
+    left: rhythm(2);
+    display: inline-block;
+    padding: rhythm(2);
+    background: rgba($white, .9);
+    color: $color-body;
+    font-size: small;
+    content: "no breakpoint, columns: #{$columns}";
+    border: 2px solid mix($debug-color, $color-shadow, 90%);
+  }
+  @each $breakpoint, $grid in $grids {
+    @include breakpoint($breakpoint) {
+      @include pseudo-element("after") {
+        content: "#{$breakpoint}, columns: #{get-grid-columns($grid)}";
+        border: 2px solid mix(get-grid-debug-color($grid), $color-shadow, 90%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+///
+/// If true,reveals the document's columns.
+///
+/// @since 0.1
+///
+/// @type {Bool} (false)
+///
+
+$debug-columns: false !default;
+
+///
+/// If true,reveals the document's vertical rhythm.
+///
+/// @since 0.1
+///
+/// @type {Bool} (false)
+///
+
+$debug-rhythm: false !default;
+
+///
+/// If true,reveals the current active breakpoint.
+///
+/// @since 0.1
+///
+/// @type {Bool} (false)
+///
+
+$debug-breakpoint: false !default;
+
+///
+/// Set all debug types to true at once.
+///
+/// @since 0.1
+///
+/// @type {Bool} (false)
+///
+
+$debug-grid: false !default;
+
+///
+/// The selector for the debug class.
+///
+/// @since 0.1
+///
+/// @type {String} (.debug-layout)
+///
+
+$debug-columns-selector: ".debug-layout" !default;
+
+///
+/// The selector for the debug class.
+///
+/// @since 0.1
+///
+/// @type {String} (.debug-rhythm)
+///
+
+$debug-rhythm-selector: ".debug-rhythm" !default;
+
+///
+/// The selector for the debug class.
+///
+/// @since 0.1
+///
+/// @type {String} (.debug-breakpoint)
+///
+
+$debug-breakpoint-selector: ".debug-breakpoint" !default;
+
+///
+/// The selector for the debug class.
+///
+/// @since 0.1
+///
+/// @type {String} (.debug)
+///
+
+$debug-grid-selector: ".debug-grid" !default;

data/sass/piecss/behavior/is/_collection.scss

@@ -0,0 +1,57 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+/*
+General reset that can be applied to most elements.
+
+markup:
+<ol>
+  <li>I</li>
+  <li>look</li>
+  <li>like</li>
+  <li>single</li>
+  <li>lines</li>
+</ol>
+*/
+
+@include set-selector(
+  $is-collection,
+  ".is-reset",
+  (
+    margin: 0,
+    padding: 0,
+    border: 0,
+    background: none,
+    box-shadow: 0,
+    list-style-type: none,
+    color: inherit,
+    text-decoration: none,
+    font-style: inherit,
+    font-variant: inherit,
+    font-weight: inherit,
+    font-size: inherit,
+    line-height: inherit,
+    font-family: inherit,
+    text-decoration: none
+  )
+);
+
+/*
+Hides content outside of the viewport while keeping its content accessible to
+screenreaders.
+
+markup:
+<a class="is-narrative" href="javascript(void);">Skiplink</a>
+*/
+
+@include set-selector(
+  $is-collection,
+  ".is-narrative",
+  (
+    margin: 0,
+    padding: 0,
+    border: 0,
+    background: none,
+    box-shadow: 0,
+    text-decoration: none
+  )
+);

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

@@ -0,0 +1,12 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+///
+/// Is collection container.
+///
+/// @since 0.1
+///
+/// @type {Map} () - A map of selectors and properties
+///
+
+$is-collection: ();

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

@@ -0,0 +1,23 @@
+/*
+bleed
+
+Bleeds a half gutter-width so that elements with gutters can be aligned
+
+.bleed - Bleed both sides
+.bleed--left - Bleed left side
+.bleed--right - Bleed right side
+
+markup:
+<div class="{$modifiers}">{$modifiers}</div>
+*/
+
+.bleed {
+  &,
+  &--left {
+    margin-left: -1 * gutter();
+  }
+  &,
+  &--right {
+    margin-right: -1 * gutter();
+  }
+}

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

@@ -0,0 +1,45 @@
+/*
+Chain
+
+Chain is a more verstatile alternative to the media object.
+* Apply a `chain__item--stretch` to any `chain__item` to make that item take up maximum available space.
+* Apply a `chain__item--nowrap` to any `chain__item` to keep child content on a single line.
+
+.chain - Chains elements horizontally.
+
+markup:
+<div class="{$modifiers}">
+  <div class="chain__item chain__item--stretch">
+    I take up all the space I can
+  </div>
+	<div class="chain__item">
+		<span>I take whatever space is left</span>
+	</div>
+	<div class="chain__item chain__item--nowrap">
+		<span>I claim my space!</span>
+	</div>
+</div>
+
+
+Styleguide 3.97.4
+*/
+
+.chain {
+  display: flex;
+  box-shadow: 0 3px 6px rgba($color-shadow, 0);
+  &__item {
+  }
+  &,
+  &__item--stretch {
+    flex: 1 0 auto;
+  }
+  &__item--nowrap {
+    white-space: nowrap;
+  }
+  &--bottom {
+    align-items: bottom;
+  }
+  &--middle {
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,14 @@
+/*
+Column
+
+Styleguide 3.97.8
+*/
+
+.column-group {
+  display: table;
+  width: 100%;
+  padding: 0;
+}
+.column-group__cell {
+  display: table-cell;
+}

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

@@ -1,5 +1,15 @@
-// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+/*
+Grid
 
+Styleguide 3.97.7
+*/
 
-@import "rhythm";
-@import "layout";
+.grid {
+  @include breakpoint($gt-medium-handheld) {
+    column-count: 2;
+    column-gap: 0;
+  }
+  @include breakpoint($gt-small-desktop) {
+    column-count: 4;
+  }
+}

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

@@ -0,0 +1,32 @@
+/*
+Gutter
+
+.gutter--left - Small padding on left side
+.gutter--right - Small padding on right side
+.gutters - Small padding on left and right side
+.gutter-outside--left - Small padding on left side
+.gutter-outside--right - Small padding on right side
+.gutters-outside - Small padding on left and right side
+
+markup:
+<div class="{$modifiers}">{$modifiers}</div>
+*/
+
+.gutter {
+  &s,
+  &--left {
+    padding-left: gutter();
+  }
+  &s,
+  &--right {
+    padding-right: gutter();
+  }
+  &s-outside,
+  &-outside--left {
+    margin-left: gutter();
+  }
+  &-outside,
+  &-outside--right {
+    margin-right: gutter();
+  }
+}

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

@@ -170,36 +170,36 @@
 // }
 
 
-@if $debug-layout {
-    %debug-layout {
-        position: relative;
-        &::after {
-            content: '';
-            display: block;
-            position: absolute;
-            z-index: -1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-
-            background-color: transparent;
-            background-repeat: repeat-x;
-            background-position: 0 0;
-
-            @include debug-layout();
-
-            @each $breakpoint, $layout in $layouts {
-                @include breakpoint($breakpoint) {
-                    $columns: map-get($layout, columns);
-                    $color: map-get($layout, color);
-                    @include debug-layout($columns, $color, $gutter-width);
-                }
-            }
+@if $debug-columns {
+  %debug-layout {
+    position: relative;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      background-color: transparent;
+      background-repeat: repeat-x;
+      background-position: 0 0;
+
+      @include debug-layout();
+
+      @each $breakpoint, $layout in $layouts {
+        @include breakpoint($breakpoint) {
+          $columns: map-get($layout, columns);
+          $color: map-get($layout, color);
+          @include debug-layout($columns, $color, $gutter-width);
         }
+      }
     }
+  }
 
-    .debug-layout {
-        @extend %debug-layout;
-    }
+  .debug-layout {
+    @extend %debug-layout;
+  }
 }