Permalink
Browse files

Merge pull request #12 from muffinresearch/ruby-extension-for-data

Ruby extension for data
  • Loading branch information...
2 parents 7efd3d8 + 5347bf5 commit 3011444f344d3f4b605a782e61ef117373a02bd0 @semafor semafor committed Nov 14, 2012
Showing with 144 additions and 132 deletions.
  1. +4 −1 Makefile
  2. +25 −0 config/compass/base.rb
  3. +8 −20 config/compass/debug.rb
  4. +8 −21 config/compass/expanded.rb
  5. +52 −0 config/compass/griddles.rb
  6. +8 −21 config/compass/min.rb
  7. +27 −57 scss/_griddles.scss
  8. +12 −12 sidebar.html
View
@@ -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:
@@ -0,0 +1,25 @@
+#!/usr/bin/env ruby
+
+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__), "../../"))
+ config.project_path = $root_path
+ config.sass_path = File.join($root_path, "scss/")
+ config.cache_path = File.join($root_path, "tmp/sass-cache")
+ config.images_path = File.join($root_path, "img/")
+ config.javascripts_path = File.join($root_path, "js/")
+ config.relative_assets = true
+ config.output_style = :debug
+ config.css_path = File.join($root_path, "css/debug/")
+ config.line_comments = false
+end
+
+# Control precision
+Sass::Script::Number.precision = 8
@@ -1,20 +1,8 @@
-# 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/")
-
-# You can select your preferred output style here (can be overridden via the command line):
-output_style = :debug
-
-# 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_file = File.expand_path('../base.rb', __FILE__)
+require config_file
+
+Compass.configuration do |config|
+ config.output_style = :debug
+ config.css_path = File.join($root_path, "css/debug/")
+ config.line_comments = true
+end
@@ -1,21 +1,8 @@
-# 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/")
-
-# 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
-
+config_file = File.expand_path('../base.rb', __FILE__)
+require config_file
+
+Compass.configuration do |config|
+ config.output_style = :expanded
+ config.css_path = File.join($root_path, "css/expanded/")
+ config.line_comments = false
+end
@@ -0,0 +1,52 @@
+# 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
View
@@ -1,21 +1,8 @@
-# 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/")
-
-# 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
-
+config_file = File.expand_path('../base.rb', __FILE__)
+require config_file
+
+Compass.configuration do |config|
+ config.css_path = File.join($root_path, "css/min/")
+ config.output_style = :compressed
+ config.line_comments = false
+end
View
@@ -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)
}
}
}
+
View
@@ -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>

0 comments on commit 3011444

Please sign in to comment.