piecss 0.1.6.4.6 → 0.1.6.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ca51ced66570e47d9f898e0880977627a04ddb0a
-  data.tar.gz: cc74d66eec7551dc762a9b81fe198169999ff44c
+  metadata.gz: 612e4fffeb6515034377786c1cd7020edfdb4c71
+  data.tar.gz: a8b0e03d83178a2ecb11303e36a6efb0364ea1ff
 SHA512:
-  metadata.gz: cb440e76c6cf0ee08af23fd6077477d3c27e153e78808c41ad47f225fcf775795ad674fc1bfb8230c40a3961c1fa4aff601960ca63eaa5b6d48c549ccc12af41
-  data.tar.gz: 02c6c1fa63cf2d961647d9fd90ab84c608efb30a54a708a35746d78b1681806566da9d4ccf093b8dafb4002a3b06ee09dee7227a8fadc751d468d6fdf7239824
+  metadata.gz: 337bac6bb7ddef1bfd7d9f07e0d120122255f862fbb4afd2468197d3feee0ee35908844a8bd93a77980957fbfd228eec95b28ff79941f4c1b117398cff20b458
+  data.tar.gz: 5c639d9b08b2ecd72877e9e9c8729329245d36928f48171e54075ca211f238fdfe087594712b6cd7ccff35752fcb2f9fb19fa901d931052707d2d1dd7c6dd81a

data/README.md

@@ -2,6 +2,4 @@
 
 gem install piecss
 
-More info can be found here: [http://www.piecss.com](http://www.piecss.com)
-
-[![Gem Version](https://badge.fury.io/rb/piecss.svg)](http://badge.fury.io/rb/piecss)
+[![Gem Version](https://badge.fury.io/rb/piecss.svg)](http://badge.fury.io/rb/piecss)

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

@@ -167,4 +167,39 @@
 	        }
 	    }
 	}
+}
+
+
+@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);
+                }
+            }
+        }
+    }
+
+    .debug-layout {
+        @extend %debug-layout;
+    }
 }

data/sass/piecss/behavior/grid/_rhythm.scss

@@ -7,7 +7,7 @@ Debug helpers
 -----------------------------------------------------------------------------
 */
 
-%debug {
+%debug-rhythm {
     /*
      * Mixin debug-rhythm to display the vertical rhythm units
      */
@@ -15,7 +15,7 @@ Debug helpers
 }
 
 @if $debug-rhythm {
-    body.debug-rhythm {
-        @extend %debug;         
+    .debug-rhythm {
+        @extend %debug-rhythm;         
     }
 }

data/sass/piecss/settings/_grid.scss

@@ -25,6 +25,16 @@ $rhythm: $default-line-height !default;
 
 $debug-rhythm: false !default;
 
+/**
+ * If true,reveals the document's horizontal rhythm. Also see: [mixin $debug-layout](./#mixin-debug-layout).
+ *
+ * @since 0.1
+ *
+ * @type {Bool}
+ */
+
+$debug-layout: false !default;
+
 /**
  * Based on an idea by [@csswizardry](https://twitter.com/csswizardry): apply a bottom margin of one rhythm height to any element in this comma separated list.
  *
@@ -154,4 +164,15 @@ $root-max-width: 72em !default;
  * @type {Number}
  */
 
-$root-position: center !default;
+$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;
+

data/sass/piecss/utilities/_layout.scss

@@ -153,6 +153,25 @@
 }
 
 
+/**
+ * Get layout settings from a layout map
+ *
+ *
+ * @param {String} $breakpoints - A valid breakpoint
+ * @param {Map} $page - An optional page layout
+ *
+ * @return {Map} - A breakpoint global layout, or a breakpoint nested page layout from [$layouts map](./#variable-layouts)
+ */
+
+@function get-layout($breakpoint, $page: null) {
+    $layout: map-get($layouts, $breakpoint);
+    @if $page {
+        $layout: map-get($layout, $page);
+    }
+    @return  $layout;
+}
+
+
 // 2. MIXINS
 
 
@@ -368,4 +387,37 @@
             position: initial;
         }
     }
-}
+}
+
+
+/**
+ * Reveals the document's horizontal rhythm. Will automatically be mixed in when [$debug-layout](./#variable-debug-layout) is set to true.
+ *
+ * @since 0.1
+ */
+
+@mixin debug-layout($columns: $columns, $color: #000, $gutter-width: $gutter-width)
+{
+    background-size: percentage(1 / $columns) 100%;
+    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(0,0,0,.5) 1px,
+            transparent 1px,
+            transparent  percentage($columns / $columns)
+        )
+    ;
+}
+

data/templates/project/_settings.scss

@@ -3,8 +3,27 @@
  * Licensed under MIT; see LICENSE.txt
  */
 
-// Example configuration for layout
+// Example configuration for columns
 $column-widths: (
     $small_handheld: (main: 1/1, side: 1/1),
     $small_desktop: (main: 2/3, side: 1/3),
+);
+
+// Example configuration for layout
+$layouts: (
+    $small_handheld: (
+        columns: 4,
+        color: $orange,
+        pages: (),
+    ),
+    $medium_handheld: (
+        columns: 8,
+        color: $cyan,
+        pages: (),
+    ),
+    $small_desktop: (
+        columns: 12,
+        color: $becca,
+        pages: (),
+    )
 );

data/templates/project/screen.scss

@@ -18,7 +18,7 @@
 //    2c. Settings
 //        Piecss settings
 //        Project settings
-//    2d. Elements
+//    2d. Sets
 //    2e. Behavior (output)
 //        Piecss behavior
 //        Project behavior
@@ -78,13 +78,13 @@ $debug-rhythm: false;
 
 // ==========================================================================
 //
-// 2d. ELEMENTS
+// 2d. Sets
 //
-// 2. Project elements
+// 2. Project sets
 //
 // ==========================================================================
 
-@import "elements";
+@import "sets";
 
 
 // ==========================================================================

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: piecss
 version: !ruby/object:Gem::Version
-  version: 0.1.6.4.6
+  version: 0.1.6.5
 platform: ruby
 authors:
 - Babs Gosgens
@@ -104,10 +104,10 @@ files:
 - sass/piecss/utilities/_side.scss
 - sass/piecss/utilities/_typography.scss
 - sass/piecss/utilities/_unit.scss
-- templates/project/_elements.scss
+- templates/project/_sets.scss
+- templates/project/_sets/_button.scss
+- templates/project/_sets/_form.scss
 - templates/project/_settings.scss
-- templates/project/elements/_button.scss
-- templates/project/elements/_form.scss
 - templates/project/examples.html
 - templates/project/manifest.rb
 - templates/project/screen.scss