refactor data manipulation to use ruby extension and refactor config …

…files

Makefile

@@ -14,6 +14,9 @@ compass-debug:
 compass-expanded:
 	$(COMPASS) compile -c config/compass/expanded.rb
 
-.PHONY: compass-watch release compass-min compass-debug compass-expanded
+clean:
+	rm -fr css/*
+
+.PHONY: compass-watch release compass-min compass-debug compass-expanded clean
 
 .NOTPARALLEL:

config/compass/base.rb

@@ -3,6 +3,10 @@
 require 'sass'
 require 'compass'
 
+# include the griddles
+griddles_extension = File.expand_path('../griddles.rb', __FILE__)
+require griddles_extension
+
 Compass.configuration do |config|
     # Require any additional compass plugins here.
     $root_path = File.expand_path(File.join(File.dirname(__FILE__), "../../"))
@@ -19,56 +23,3 @@
 
 # Control precision
 Sass::Script::Number.precision = 8
-
-# SASS Extension for grid data calculation performance
-
-module GriddlesFunctions
-
-    def get_grid_selector_values(step, fraction_list, fraction_selector_separator, mq, class_prefix, selector_sep)
-
-        # convert to raw values rather than handle sass values internally.
-        fraction_list = fraction_list.value
-        step = step.value
-        fraction_selector_separator = fraction_selector_separator.value
-        mq = mq.value
-        class_prefix = class_prefix.value
-        selector_sep = selector_sep.value
-
-        # Create the steps list from the step value
-        steps_list = (step..100).step(step).to_a
-        # Create hash for storing what we are doing
-        sel_value_dict = Hash.new
-        # Iterate over steps list and add to hash
-        mq = mq != "" ? mq + selector_sep : mq
-        selector_prefix = mq + class_prefix + selector_sep
-
-        steps_list.each {|x| sel_value_dict[Float(x.to_i)] = ["." + selector_prefix + x.to_s]}
-        # Iterate over fraction list and add to hash
-        for item in fraction_list
-            i = 1
-            denominator = item.to_i
-            while i <= Integer(item)-1
-                numerator = i
-                value = Float(100) / denominator * numerator
-
-                selector = "." + selector_prefix + String(numerator) + fraction_selector_separator + String(denominator)
-                if sel_value_dict.has_key?(value)
-                    sel_value_dict[value] = sel_value_dict[value].push(selector)
-                else
-                    sel_value_dict[value] = [selector]
-                end
-                i += 1
-            end
-        end
-
-        sel_value_list = []
-        sel_value_dict.each do|value,selector|
-          sel_value_list.push(Sass::Script::List.new([Sass::Script::String.new(selector.join(", ")), Sass::Script::Number.new(value)], :space))
-        end
-        return  Sass::Script::List.new(sel_value_list, :comma)
-    end
-end
-
-module Sass::Script::Functions
-  include GriddlesFunctions
-end

config/compass/debug.rb

@@ -1,20 +1,10 @@
-# Require any additional compass plugins here.
-root_path = File.expand_path(File.join(File.dirname(__FILE__), "../../"))
-project_path = root_path
-css_path = File.join(root_path, "css/debug/")
-sass_path = File.join(root_path, "scss/")
-cache_path = File.join(root_path, "tmp/sass-cache")
-images_path = File.join(root_path, "img/")
-javascripts_path = File.join(root_path, "js/")
+config_file = File.expand_path('../base.rb', __FILE__)
+require config_file
 
-# You can select your preferred output style here (can be overridden via the command line):
-output_style = :debug
+Compass.configuration do |config|
+    # Default settings that need to be overriden
+    output_style = :debug
+    css_path = File.join($root_path, "css/debug/")
+    line_comments = true
+end
 
-# To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-line_comments = true
-
-# Control precision
-Sass::Script::Number.precision = 8

config/compass/expanded.rb

@@ -1,21 +1,10 @@
-# Require any additional compass plugins here.
-root_path = File.expand_path(File.join(File.dirname(__FILE__), "../../"))
-project_path = root_path
-css_path = File.join(root_path, "css/expanded/")
-sass_path = File.join(root_path, "scss/")
-cache_path = File.join(root_path, "tmp/sass-cache")
-images_path = File.join(root_path, "img/")
-javascripts_path = File.join(root_path, "js/")
+# Require the defaults
+config_file = File.expand_path('../base.rb', __FILE__)
+require config_file
 
-# You can select your preferred output style here (can be overridden via the command line):
-output_style = :expanded
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-line_comments = false
-
-# Control precision
-Sass::Script::Number.precision = 8
 
+Compass.configuration do |config|
+    css_path = File.join($root_path, "css/expanded/")
+    output_style = :expanded
+    line_comments = false
+end

config/compass/min.rb

@@ -1,21 +1,10 @@
-# Require any additional compass plugins here.
-root_path = File.expand_path(File.join(File.dirname(__FILE__), "../../"))
-project_path = root_path
-css_path = File.join(root_path, "css/min/")
-sass_path = File.join(root_path, "scss/")
-cache_path = File.join(root_path, "tmp/sass-cache")
-images_path = File.join(root_path, "img/")
-javascripts_path = File.join(root_path, "js/")
+# Require the defaults
+config_file = File.expand_path('../base.rb', __FILE__)
+require config_file
 
-# You can select your preferred output style here (can be overridden via the command line):
-output_style = :compressed
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-line_comments = false
-
-# Control precision
-Sass::Script::Number.precision = 8
 
+Compass.configuration do |config|
+    config.css_path = File.join($root_path, "css/min/")
+    config.output_style = :compressed
+    config.line_comments = false
+end

scss/_griddles.scss

@@ -1,28 +1,6 @@
-@import 'compass/css3';
-@import 'compass/utilities/general/clearfix';
 @import '_settings.scss';
 @import '_utils.scss';
 
-// Supply a generally useful clearfix class.
-.clearfix {
-    @include pie-clearfix;
-}
-
-// Building the data necessary to have collapsed selectors for shared values.
-// E.g: g-50, g-1/2 are the same value 50%;
-// Generate a list of all the percentages up to 100 based on the step configured.
-$perc-steps-and-value-list: get-steps-and-value-list($griddles-step-increment);
-
-// Get a list of two-item lists containg the key and the value extending the list input.
-$key-and-value-list: get-fraction-and-value-list($griddles-fraction-steps, $perc-steps-and-value-list);
-
-// Get the list of unique keys and values
-$unique-value-list: get-unique-value-list($key-and-value-list);
-
-// Get a list that has a list of lists. The individual lists will be
-// (selector-key, key, value);
-$sel-key-val-list: get-sel-key-val-list($unique-value-list, $key-and-value-list);
-
 // Remove white-space from grid elements so there's
 // no need to cuddle inline-block elements
 // using monospace font provides a reliable + consistent value
@@ -31,9 +9,12 @@ $sel-key-val-list: get-sel-key-val-list($unique-value-list, $key-and-value-list)
     font-family: "Courier New", monospace;
     letter-spacing: -0.63em;
     word-spacing:-0.63em;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
 }
 
+
 // Offset the grid when the gutter is enabled
 // So there's no left/right gutter for first
 // and last elements in a given row.
@@ -58,7 +39,9 @@ $sel-key-val-list: get-sel-key-val-list($unique-value-list, $key-and-value-list)
     letter-spacing: normal;
     word-spacing: normal;
     margin: 0;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     font-family: $griddles-font-family;
     width: 100%;
 }
@@ -78,47 +61,26 @@ $sel-key-val-list: get-sel-key-val-list($unique-value-list, $key-and-value-list)
     visibility: normal;
 }
 
+$selector-value-list: get_grid_selector_values($griddles-step-increment, $griddles-fraction-steps, $griddles-fraction-symbol, "", $griddles-class-prefix, "-");
 
 // Generate the shared rules for all of the standard classes.
-@each $extkey-sel-val in $sel-key-val-list {
-    $sel: nth($extkey-sel-val, 2);
-    .#{$griddles-class-prefix}-#{$sel} {
+@each $sel-val in $selector-value-list {
+    $sel: nth($sel-val, 1);
+    #{$sel} {
         @extend .#{$griddles-class-prefix}-cont;
     }
 }
 
-// Loop over the unique values and output the collective
-// Selectors for the same values.
-// This is necessary due to problems generating and
-// using extends inside the same @media block
-@mixin generate-width-selectors($sel-prefix) {
-
-     @each $unique-keypair in $unique-value-list {
-        $extend-sel: nth($unique-keypair, 1);
-        $extend-val: nth($unique-keypair, 2);
-        $selector-list: ();
-        @each $extkey-sel-val in $sel-key-val-list {
-            $extkey: nth($extkey-sel-val, 1);
-            $sel: nth($extkey-sel-val, 2);
-
-            @if $extkey == $extend-sel {
-                $classname: ".#{$sel-prefix}#{$sel}";
-                $selector-list: append($selector-list, #{$classname}, comma)
-            }
-
-        }
-        // Having collected all the selectors that need this value
-        // output it.
-        #{$selector-list} {
-            width: percentage($extend-val) / 100;
-        }
-    }
-}
-
 // Defaults widths for standard classes
 // This starts at "M" as "S" is essentially the baseline.
 @include respond-to(nth($griddles-M, 2)) {
-    @include generate-width-selectors("#{$griddles-class-prefix}-");
+    @each $sel-val in $selector-value-list {
+        $sel: nth($sel-val, 1);
+        $val: nth($sel-val, 2);
+        #{$sel} {
+            width: percentage($val) / 100;
+        }
+    }
 }
 
 // This loop generates the breakpoint override selectors.
@@ -132,7 +94,14 @@ $sel-key-val-list: get-sel-key-val-list($unique-value-list, $key-and-value-list)
         @include respond-to(nth($k, 2), nth($k, 3)) {
 
             $breakpoint: nth($k, 1);
-            @include generate-width-selectors("#{$breakpoint}-#{$griddles-class-prefix}-");
+            $selector-value-list: get_grid_selector_values($griddles-step-increment, $griddles-fraction-steps, $griddles-fraction-symbol, $breakpoint, $griddles-class-prefix, "-");
+            @each $sel-val in $selector-value-list {
+                $sel: nth($sel-val, 1);
+                $val: nth($sel-val, 2);
+                #{$sel} {
+                    width: percentage($val) / 100;
+                }
+            }
 
             .#{$breakpoint}-show {
                 display: inline-block;
@@ -149,3 +118,4 @@ $sel-key-val-list: get-sel-key-val-list($unique-value-list, $key-and-value-list)
         }
     }
 }
+

sidebar.html

@@ -15,7 +15,7 @@
         .grid {
             background: #fff;
         }
-        header.gp-100 {
+        header.g-100 {
             margin-top: 5px;
         }
         header h1, .sidebar, .main {
@@ -30,40 +30,40 @@
 </head>
 <body>
     <div class="grid gutter">
-        <header class="gp-100">
+        <header class="g-100">
            <h1>Griddles</h1>
         </header>
-        <div class="gp-30">
+        <div class="g-30">
             <aside class="sidebar clearfix">
                 <h2>This is the sidebar</h2>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>            
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
             </aside>
         </div>
-        <div class="gp-70">
+        <div class="g-70">
             <div class="main clearfix">
                 <h2>This is the main content block</h2>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>            
-            
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>            
-                
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>            
-            
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>            
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
             </div>
         </div>