compass-griddle 0.1.0 → 0.2.0

data/stylesheets/_griddle.scss

@@ -1,2 +1 @@
-@import "griddle/grid-helpers";
-@import "griddle/grid-core";
+@import "griddle/base";

data/stylesheets/griddle/{_grid-core.scss → _base.scss}

@@ -1,4 +1,4 @@
-/* =============================================================================
+/* ==========================================================================
    Grid
    ========================================================================== */
 
@@ -18,34 +18,42 @@
  * </div>
  */
 
+@import "griddle-build";
+
+$grid-direction: left !default; // switch to 'right' for rtl
+$grid-gutter: 20px !default; // can be px, em, or %
+
+
 /* Grid core
    ========================================================================== */
 
-/*
+/**
  * Grid container
  * Must only contain `.grid` or `.grid__cell` components as children.
+ *
+ * 1. Adjustment for child element margins.
+ * 2. Ensure consistent default alignment/
+ * 3. Remove inter-unit whitespace that appears between `inline-block` child
+ *    elements. Work for all non-monospace font-families.  If you're using a
+ *    monospace base font, you will need to set the `grid` font-family to
+ *   `sans-serif` and then redeclare the monospace font on the `grid__cell`
+ *    objects.
+ * 4. Protect against WebKit bug with optimizelegibility.
  */
 
 .grid {
     display: block;
     padding: 0;
-    margin: 0 -0.5 * $grid-gutter;
-    /* Ensure consistent default alignment */
-    text-align: $grid-direction;
-    /* Remove inter-unit whitespace for all non-monospace font-families
-     * If you're using a monospace base font, you will need to set the `grid`
-     * font-family to `sans-serif` and then redeclare the monospace font on
-     * the `grid__cell` objects.
-     */
-    letter-spacing: -0.31em;
-    word-spacing: -0.43em;
-    /* Protect against WebKit bug with optimizelegibility */
-    text-rendering: optimizespeed;
+    margin: 0 -0.5 * $grid-gutter; /* 1 */
+    text-align: $grid-direction; /* 2 */
+    letter-spacing: -0.31em; /* 3 */
+    word-spacing: -0.43em; /* 3 */
+    text-rendering: optimizespeed; /* 4 */
 }
 
-/*
+/**
  * Child `grid` object adjustments
- * Used for more complex fixed-fluid hybrid grids
+ * Used for more complex fixed-fluid hybrid grids.
  */
 
 .grid > .grid {
@@ -54,28 +62,32 @@
     margin-left: 0;
 }
 
-/*
+/**
  * Grid units
  * No explicit width by default. Apply `.unit-x-y` classes.
+ *
+ * 1. Fundamentals of the non-float grid layout mechanism.
+ * 2. Apply grid gutter.
+ * 3. Controls vertical positioning of units.
+ * 4. Keeps content correctly aligned with the grid direction.
+ * 5. Reset text defaults.
  */
 
 .grid__cell {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     width: 100%;
-    display: inline-block;
-    @include box-sizing(border-box);
+    display: inline-block; /* 1 */
     margin: 0;
-    padding: 0 0.5 * $grid-gutter;
-    /* controls vertical positioning of units */
-    vertical-align: top;
-    /* keeps unit content correctly aligned */
-    text-align: $grid-direction;
-    /* reset text defaults */
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-rendering: auto;
+    padding: 0 0.5 * $grid-gutter; /* 2 */
+    vertical-align: top; /* 3 */
+    text-align: $grid-direction; /* 4 */
+    letter-spacing: normal; /* 5 */
+    word-spacing: normal; /* 5 */
+    text-rendering: auto; /* 5 */
 }
 
-/*
+/**
  * Modifier: horizontally center all grid units
  * Allows for automatic unit centering irrespective of the number of
  * units in the grid.
@@ -85,7 +97,7 @@
     text-align: center;
 }
 
-/*
+/**
  * Modifier: horizontally center one unit
  * Set a specific unit to be horizontally centered. Doesn't affect
  * any other units. Can still contain a child `grid` object.

data/stylesheets/griddle/_griddle-build.scss

@@ -0,0 +1,73 @@
+// =============================================================================
+// Griddle functions
+// =============================================================================
+
+// Find the greatest common factor of two integers
+
+@function gcf($a, $b) {
+    @if $b == 0 { @return $a; }
+    @else { @return gcf($b, $a % $b) }
+}
+
+// Check if a list contains a value
+
+@function contains($list, $value) {
+    @if type-of($list) == list { @return not not index($list, $value); }
+    @else { @return $list == $value; }
+}
+
+// Fluid grid units & offsets
+
+// USAGE: provide a space-separated list of integers, each of which represents
+// the number of parts that make up a grid component. Optionally provide a
+// modifier suffix that can be used to adjust grids in different contexts (e.g.
+// viewport dimensions).
+
+@mixin griddle-build($units, $modifier: '') {
+
+    /* Proportional units
+       ========================================================================== */
+
+    /*
+     * Specify the proportional width of an object.
+     * Primarily for, but not limited to, use with `.grid__cell` components.
+     * Intentional redundancy build into each set of unit classes.
+     */
+
+    @each $n in $units {
+        // Avoid creating rules like `.unit-12-12 {}`
+        $x: $n - 1;
+        // Initialize variables
+        $i-r: ();
+        $n-r: ();
+
+        @for $i from 1 through $x {
+            // Find the greatest common factor
+            $g: gcf($i, $n);
+
+            @if $g > 1 {
+                // Reduced value of $i
+                $i-r: $i/$g;
+                // Reduced value of $n
+                $n-r: $n/$g;
+            }
+
+            // Check if the reduced value of $n was also supplied in the list
+            // of units to be built
+            $canreduce: contains($units, $n-r);
+
+            // Create units based on fractions
+            .unit-#{$i}-#{$n}#{$modifier} {
+                // Ff this unit can be reduced then extend the previous rule
+                @if $i-r and $canreduce {
+                    @extend .unit-#{$i-r}-#{$n-r}#{$modifier};
+                }
+                // Otherwise create a new % width
+                @else {
+                    width: percentage($i / $n);
+                }
+            }
+        }
+    }
+}
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-griddle
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-07-18 00:00:00.000000000 Z
+date: 2013-02-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -36,8 +36,8 @@ extra_rdoc_files: []
 files:
 - README.md
 - lib/griddle.rb
-- stylesheets/griddle/_grid-helpers.scss
-- stylesheets/griddle/_grid-core.scss
+- stylesheets/griddle/_base.scss
+- stylesheets/griddle/_griddle-build.scss
 - stylesheets/_griddle.scss
 homepage: https://github.com/leonderijke/compass-griddle
 licenses: []

data/stylesheets/griddle/_grid-helpers.scss

@@ -1,117 +0,0 @@
-// =============================================================================
-// Variables, Mixins, and Functions
-// =============================================================================
-
-// Variables
-// =============================================================================
-
-$grid-direction:left !default; // switch to 'right' for rtl
-$grid-gutter:20px !default; // can be px, em, or %
-
-// Functions
-// =============================================================================
-
-// Find the greatest common factor
-// of two integers
-@function gcf($a, $b) {
-    @if $b == 0 {
-        @return $a;
-    }
-    @else {
-        @return gcf($b, $a % $b)
-    }
-}
-
-// Check if a list contains a value
-@function contains($list, $value) {
-    @if type-of($list) == list {
-        @return not not index($list, $value);
-    }
-    @else {
-        @return $list == $value;
-    }
-}
-
-
-// Mixins
-// =============================================================================
-
-@mixin box-sizing ($box) {
-    -webkit-box-sizing: $box;
-    -moz-box-sizing: $box;
-    box-sizing: $box;
-}
-
-// Fluid grid units & offsets
-
-// USAGE: provide a space-separated list of integers, each of which represents
-// the number of parts that make up a grid component. Optionally provide a
-// modifier suffix that can be used to adjust grids in different contexts (e.g.
-// viewport dimensions)
-
-// TODO: work out how to combine rules for numbers that share a greatest common
-// factor without the unit-list actually containing the fraction to which they
-// can both be reduced.
-
-@mixin grid-build-units($units, $modifier: '') {
-    /* Proportional units
-       ========================================================================== */
-
-    /*
-     * Specify the proportional width of an object.
-     * Primarily for, but not limited to, use with `.grid__cell` components.
-     * Intentional redundancy build into each set of unit classes.
-     */
-
-    // step through each value in the list of units
-    @each $n in $units {
-        // this means we can avoid creating rules like `.unit-12-12 {}`
-        $x: $n - 1;
-
-        @for $i from 1 through $x {
-            // find the greatest common factor
-            $g: gcf($i, $n);
-            // initialize variables
-            $i-r: ();
-            $n-r: ();
-
-            @if $g > 1 {
-                // reduced value of $i
-                $i-r: $i/$g;
-                // reduced value of $n
-                $n-r: $n/$g;
-            }
-
-            // check if the reduced value of $n was also supplied
-            // in the list of units to be built
-            $canreduce: contains($units, $n-r);
-
-            // create units based on fractions
-            .unit-#{$i}-#{$n}#{$modifier} {
-                // if this unit can be reduced
-                // then extend the previous rule
-                @if $i-r and $canreduce {
-                    @extend .unit-#{$i-r}-#{$n-r}#{$modifier};
-                }
-                // otherwise create a new % width
-                @else {
-                    width: percentage($i / $n);
-                }
-            }
-
-            // create unit offsets based on fractions
-            .before-#{$i}-#{$n}#{$modifier} {
-                // if this offset can be reduced
-                // then extend the previous rule
-                @if $i-r and $canreduce {
-                    @extend .before-#{$i-r}-#{$n-r}#{$modifier};
-                }
-                // otherwise create a new % margin
-                @else {
-                    margin-#{$grid-direction}: percentage($i / $n);
-                }
-            }
-        }
-    }
-}
-