compass-griddle 0.1.0

data/README.md

@@ -0,0 +1,19 @@
+# Compass Griddle
+A Compass plugin to use Griddle in your Compass projects.
+
+For usage of Griddle, see: http://necolas.github.com/griddle/
+
+## Installation
+Installing is easy. It's a RubyGem, so just type this on your command line:
+
+    $ gem install compass-griddle
+
+Then, add it to a project:
+
+```
+// Add this to compass.config (rails) or config.rb (other):
+require 'griddle'
+
+// Type this on your command line:
+$ compass install griddle
+```

data/lib/griddle.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('griddle', :path => extension_path)

data/stylesheets/_griddle.scss

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

data/stylesheets/griddle/_grid-core.scss

@@ -0,0 +1,97 @@
+/* =============================================================================
+   Grid
+   ========================================================================== */
+
+/*
+ * Example uses:
+ *
+ * <div class="grid">
+ *     <div class="grid__cell unit-1-2"></div>
+ *     <div class="grid__cell unit-1-2"></div>
+ *     <div class="grid__cell unit-1-3"></div>
+ *     <div class="grid__cell unit-1-3 before-1-3"></div>
+ * </div>
+ *
+ * <div class="grid grid--center">
+ *     <div class="grid__cell unit-1-3"></div>
+ *     <div class="grid__cell unit-1-3"></div>
+ * </div>
+ */
+
+/* Grid core
+   ========================================================================== */
+
+/*
+ * Grid container
+ * Must only contain `.grid` or `.grid__cell` components as children.
+ */
+
+.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;
+}
+
+/*
+ * Child `grid` object adjustments
+ * Used for more complex fixed-fluid hybrid grids
+ */
+
+.grid > .grid {
+    overflow: hidden;
+    margin-right: 0;
+    margin-left: 0;
+}
+
+/*
+ * Grid units
+ * No explicit width by default. Apply `.unit-x-y` classes.
+ */
+
+.grid__cell {
+    width: 100%;
+    display: inline-block;
+    @include box-sizing(border-box);
+    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;
+}
+
+/*
+ * Modifier: horizontally center all grid units
+ * Allows for automatic unit centering irrespective of the number of
+ * units in the grid.
+ */
+
+.grid--center {
+    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.
+ */
+
+.grid__cell--center {
+    display: block;
+    margin: 0 auto;
+}

data/stylesheets/griddle/_grid-helpers.scss

@@ -0,0 +1,117 @@
+// =============================================================================
+// 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);
+                }
+            }
+        }
+    }
+}
+

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: compass-griddle
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Leon de Rijke
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-07-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: This Compass extension lets you use Griddle (by @necolas) in your Compass
+  projects.
+email: leon@leonderijke.nl
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/griddle.rb
+- stylesheets/griddle/_grid-helpers.scss
+- stylesheets/griddle/_grid-core.scss
+- stylesheets/_griddle.scss
+homepage: https://github.com/leonderijke/compass-griddle
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Griddle for Compass
+test_files: []