css_grid 1.0.0 → 2.0.0

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    css_grid (1.0.0)
+    css_grid (2.0.0)
       hash_extend
       railties (>= 3.1.0)
 
@@ -26,7 +26,7 @@ GEM
       multi_json (~> 1.0)
     builder (3.0.3)
     erubis (2.7.0)
-    hash_extend (1.0.1)
+    hash_extend (1.1.0)
     hike (1.2.1)
     i18n (0.6.1)
     journey (1.0.4)

data/README.md

@@ -6,6 +6,10 @@ __Grid__ is a 12 column alignment system, based on 1140px width. That fit for 12
 
 __Helpers__ facilitate the use of the grid syntax, to produce correct html markdown. This allow you to pass collections and block, and map the result to insert it into correct html tags.
 
+## Version
+
+Current Version is 2.0.0. This doc is about 1.0.0. Update will be realease soon
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/css_grid.gemspec

@@ -4,7 +4,7 @@ require File.expand_path('../lib/css_grid/version', __FILE__)
 Gem::Specification.new do |gem|
   gem.authors       = ["Thomas Petrachi"]
   gem.email         = ["thomas.petrachi@vodeclic.com"]
-  gem.description   = %q{Provide CSS grid stylesheet, plus several helpers}
+  gem.description   = %q{Provide CSS grid stylesheet and CSS grid helpers}
   gem.summary       = %q{grid.css and GridHelper module}
   gem.homepage      = "https://github.com/petrachi/css_grid"
 

data/lib/assets/stylesheets/grid.css.scss

@@ -1,57 +1,96 @@
-@mixin span($width) { width: $width; margin: 0 1.74%; float: left; min-height: 1px; }
-@mixin offset($width) { margin-left: $width + 5.22%; }
+@mixin span($full, $col_num) { 
+	width: (($col_num / 12) * 100 - 1.74 * 2) / 100 * $full; 
+	margin: 0 (1.74 / 100 * $full); 
+	float: left; min-height: 1px;
+}
 
+@mixin prepend($full, $col_num) { margin-left: (($col_num / 12) * 100 - 1.74 * 2) / 100 * $full + (1.74 * 3 / 100 * $full); }
+@mixin append($full, $col_num) { margin-right: (($col_num / 12) * 100 - 1.74 * 2) / 100 * $full + (1.74 * 3 / 100 * $full); }
 
-.container { 
-	
-	.row { 
-		width: 100%; max-width: 1140px; min-width: 755px; margin: 0 auto; overflow: hidden; 
-		
-		.one_span { @include span(4.85%); } /* 55px */
-		.two_span { @include span(13.18%); } /* 150px */
-		.three_span { @include span(21.51%); } /* 245px */
-		.four_span { @include span(29.84%); } /* 340px */
-		.five_span { @include span(38.17%); }
-		.six_span { @include span(46.5%); } /* 530px */
-		.seven_span { @include span(54.83%); }
-		.eight_span { @include span(63.16%); }
-		.nine_span { @include span(71.49%); }
-		.ten_span { @include span(79.82%); }
-		.eleven_span { @include span(88.15%); }
-		.twelve_span { @include span(96.47%); }
-		
-		.offset_one { @include offset(4.85%); }
-		.offset_two { @include offset(13.18%); }
-		.offset_three { @include offset(21.51%); }
-		.offset_four { @include offset(29.84%); }
-		.offset_five { @include offset(38.17%); }
-		.offset_six { @include offset(46.5%); }
-		.offset_seven { @include offset(54.83%); }
-		.offset_eight { @include offset(63.16%); }
-		.offset_nine { @include offset(71.49%); }
-		.offset_ten { @include offset(79.82%); }
-		.offset_eleven { @include offset(88.15%); }
-		.offset_twelve { @include offset(96.47%); }
+@mixin nested($grid_width){ margin: 0 (-1.74 / 100 * $grid_width); min-width: 0; }
+
+@mixin grid($grid_width){
+	.container { 
+		.row { 
+			width: $grid_width; margin: 0 auto; overflow: hidden; 
+			
+			&.nested{ margin: 0 (-1.74 / 100 * $grid_width); min-width: 0; width: auto; }
+			
+			.one_span { @include span($grid_width, 1); } /* 55px */
+			.two_span { @include span($grid_width, 2); } /* 150px */
+			.three_span { @include span($grid_width, 3); } /* 245px */
+			.four_span { @include span($grid_width, 4); } /* 340px */
+			.five_span { @include span($grid_width, 5); }
+			.six_span { @include span($grid_width, 6); } /* 530px */
+			.seven_span { @include span($grid_width, 7); }
+			.eight_span { @include span($grid_width, 8); }
+			.nine_span { @include span($grid_width, 9); }
+			.ten_span { @include span($grid_width, 10); }
+			.eleven_span { @include span($grid_width, 11); }
+			.twelve_span { @include span($grid_width, 12); }
+			
+			.prepend_one { @include prepend($grid_width, 1) }
+			.prepend_two { @include prepend($grid_width, 2) }
+			.prepend_three { @include prepend($grid_width, 3); }
+			.prepend_four { @include prepend($grid_width, 4); }
+			.prepend_five { @include prepend($grid_width, 5); }
+			.prepend_six { @include prepend($grid_width, 6); }
+			.prepend_seven { @include prepend($grid_width, 7); }
+			.prepend_eight { @include prepend($grid_width, 8); }
+			.prepend_nine { @include prepend($grid_width, 9); }
+			.prepend_ten { @include prepend($grid_width, 10); }
+			.prepend_eleven { @include prepend($grid_width, 11); }
+			.prepend_twelve { @include prepend($grid_width, 12); }
+			
+			.append_one { @include append($grid_width, 1) }
+			.append_two { @include append($grid_width, 2) }
+			.append_three { @include append($grid_width, 3); }
+			.append_four { @include append($grid_width, 4); }
+			.append_five { @include append($grid_width, 5); }
+			.append_six { @include append($grid_width, 6); }
+			.append_seven { @include append($grid_width, 7); }
+			.append_eight { @include append($grid_width, 8); }
+			.append_nine { @include append($grid_width, 9); }
+			.append_ten { @include append($grid_width, 10); }
+			.append_eleven { @include append($grid_width, 11); }
+			.append_twelve { @include append($grid_width, 12); }
+		}
 	}
+}
+
+
+@media all {
+	@include grid(1140px);
 	
-	img, object, embed { max-width: 100%; }
-	img { height: auto; }
+	.container { 
+		img, object, embed { max-width: 100%; }
+		img { height: auto; }
+	}
+}	
 	
+
+/* Screens 980px to 1140px */
+@media only screen and (max-width: 1139px) {
+	@include grid(980px);	
 }
 
 
-/* Smaller screens */
-@media only screen and (max-width: 1023px) {
+/* Screens 768px to 979px */
+@media only screen and (max-width: 979px) {
 	body { font-size: 0.8em; line-height: 1.5em; }
+	
+	@include grid(760px);	
 }
 
 
-/* Mobile */
+/* Mobile 0 to 767px */
 @media handheld, only screen and (max-width: 767px) {
 	body { font-size: 16px; -webkit-text-size-adjust: none; }
 	
 	.container{
-	    .row { min-width: 0; padding: 0; 
+	    .row { width: 100%; padding: 0; 
+			&.nested{ margin: 0 -20px; }
+			
 	    	.one_span, .two_span, .three_span, .four_span, .five_span, .six_span, .seven_span, .eight_span, .nine_span, .ten_span, .eleven_span, .twelve_span { 
     	        width: auto; float: none; margin: 0; padding: 0 20px;
 	    	}

data/lib/css_grid/version.rb

@@ -1,3 +1,3 @@
 module CssGrid
-  VERSION = "1.0.0"
+  VERSION = "2.0.0"
 end

data/lib/css_grid.rb

@@ -2,68 +2,123 @@ require "css_grid/version"
 require "css_grid/engine"
 
 module GridHelper
-  TWELVE_STRING_INTS = {:one => 1, :two => 2, :three => 3, :four => 4, :five => 5, :six => 6, :seven => 7, :eight => 8, :nine => 9, :ten => 10, :evelen => 11, :twelve => 12}
-
-  def grid element_class, options = Hash.new, &block
-    html_id, html_class, offset = options.delete_many :id, :class, :offset
-    offset = TWELVE_STRING_INTS.invert[offset] if offset.class == Fixnum
-    
-    content_tag(:div, nil, :id => html_id, :class => "#{ element_class } #{ html_class } #{ "offset_#{ offset }" if offset }" , &block)
+  TWELVE_STRING_INTS = { :one => 1, :two => 2, :three => 3, :four => 4, :five => 5, :six => 6, 
+                         :seven => 7, :eight => 8, :nine => 9, :ten => 10, :evelen => 11, :twelve => 12 }
+  TWELVE_STRING_INTS_INVERT = TWELVE_STRING_INTS.invert
+  
+  
+  GRID_CONFIG = { :classes => Hash.new{ |hash, key| hash[key] = key }, 
+                  :elements => Hash.new(:div).merge(:container => :section) }
+  
+  def initialize *args
+    @nested_stack = []
+    super
   end
-
-  def col col_number, options = Hash.new, &block
-    html_id, html_class, collection = options.delete_many :id, :class, :collection
-    collection ||= [1]
-
-    collection_length = TWELVE_STRING_INTS[col_number.to_sym]
-    span_width = TWELVE_STRING_INTS.invert[ 12 / collection_length ]
-
-    raise ArgumentError, "collection.size must be <= #{ collection_length }" if collection.size > collection_length
-
-    cols = collection.map do |elt|
-      eval %{
-        #{ span_width }_span do
-          capture(elt, &block)
-        end }
-    end
-
-    row :id => html_id, :class => html_class do
-      cols.inject(ActiveSupport::SafeBuffer.new){ |buffer, col| buffer.safe_concat(col) }
+  
+  def grid tag, options = {}, &block
+    prepend = TWELVE_STRING_INTS_INVERT[options.delete :prepend]
+    append = TWELVE_STRING_INTS_INVERT[options.delete :append]
+    
+    warn "WARNING : argument ':nested' is not supported for '#{ tag }'" if options[:nested].present? and tag != :row
+    
+    if tag =~ /(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)_span$/
+        @nested_stack << $1
+        
+        unstack = true
+    else
+      warn "WARNING : argument ':prepend' is not supported for '#{ tag }'" if prepend.present?
+      warn "WARNING : argument ':append' is not supported for '#{ tag }'" if append.present?
+            
+      unstack = false
     end
+    
+    content_class = [GRID_CONFIG[:classes][tag], options.delete(:class)]
+    content_class << "#{ GRID_CONFIG[:classes][:prepend] }_#{ prepend }" if prepend
+    content_class << "#{ GRID_CONFIG[:classes][:append] }_#{ append }" if append
+    content_class << GRID_CONFIG[:classes][:nested] if options.delete(:nested)
+    
+    safe_buffer = content_tag(GRID_CONFIG[:elements][tag], nil, :id => options.delete(:id), :class => content_class.join(" ") , &block)
+    
+    @nested_stack.pop if unstack
+    safe_buffer
   end
 
   def recollect size, collection
-    recollected = Array.new
+    recollected = []
     0.step(collection.size - 1, size) do |i|
       recollected << collection[i..i + size - 1]
     end
     recollected
   end
-
-  def rows col_number, options = Hash.new, &block
-    html_id, html_class, collection = options.delete_many :id, :class, :collection    
-    collection ||= [1]
-
-    recollection_size = TWELVE_STRING_INTS[col_number.to_sym]
-
-    rows = recollect(recollection_size, collection).map do |collection_mini|
-      col col_number, {:collection => collection_mini}, &block
+  
+  def cols_container col_number, options = {}, &block
+    options[:rows] ||= {}
+    options[:spans] ||= {}
+    
+    if @nested_stack.present?
+      options[:rows].merge!({:nested => true})
+      options[:nested_width] ||= TWELVE_STRING_INTS[@nested_stack.last.to_sym]
     end
+        
+    disable = [*options.delete(:disable)]
+    nested = [*options.delete(:nested)]
+    
+    options[:rows].merge!({:nested => true}) if nested.delete :container    
+    
+    collection_length = TWELVE_STRING_INTS[col_number]
+    span_width = @span_width || TWELVE_STRING_INTS_INVERT[(options.delete(:nested_width) || 12) / (collection_length + (options[:spans][:prepend] || 0) + (options[:spans][:append] || 0))]
+    
+    rows = recollect(collection_length, options.delete(:collection) || [1]).map do |collection_mini|
+      cols = collection_mini.map do |elt|
 
-    container :id => html_id, :class => html_class do
-      rows.inject(ActiveSupport::SafeBuffer.new){ |buffer, col| buffer.safe_concat(col) }
+        if disable.include? :spans
+          capture(elt, &block)
+          
+        else
+          grid("#{ span_width }_span".to_sym, options[:spans].clone) do
+            safe_buffer = capture(elt, &block)
+            safe_buffer = grid(:row, :nested=>true){ safe_buffer } if nested.include? :spans
+            
+            safe_buffer
+          end
+        end
+      end
+      
+      grid(:row, options[:rows].clone){ cols.reduce(:safe_concat) }
     end
+    
+    safe_buffer = rows.reduce(:safe_concat)
+    safe_buffer = grid(:container, :id=>options.delete(:id), :class=>options.delete(:class)){ safe_buffer } unless disable.delete :container
+    safe_buffer
+  end
+  
+  def spans_container span_width, options = {}, &block
+    if @nested_stack.present?
+      options[:nested_width] ||= TWELVE_STRING_INTS[@nested_stack.last.to_sym]
+    end
+    
+    @span_width = span_width
+    col_number = TWELVE_STRING_INTS_INVERT[(options.delete(:nested_width) || 12) / TWELVE_STRING_INTS[span_width]]
+    
+    safe_buffer = cols_container col_number, options, &block
+    
+    @span_width = nil
+    safe_buffer
   end
   
   
+  def one_col_row options = {}, &block
+    cols_container :one, options.merge(:disable=>:container, :rows=>{:id=>options.delete(:id), :class=>options.delete(:class)}), &block
+  end
+  
   def method_missing method_name, *args, &block
-    case method_name.to_s
+    case method_name.to_sym
     when /^(container|row|(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)_span)$/
-      self.grid($1, *args, &block)
-    when /^(one|two|three|four|six|twelve)_col_row$/
-      self.col($1, *args, &block)
-    when /^(one|two|three|four|six|twelve)_col_container$/
-      self.rows($1, *args, &block)
+      self.grid($1.to_sym, *args, &block)
+    when /^(one|two|three|four|six|twelve)_cols?_container$/
+      self.cols_container($1.to_sym, *args, &block)
+    when /^(one|two|three|four|six|twelve)_spans?_container$/
+      self.spans_container($1.to_sym, *args, &block)
     else super
     end
   end
@@ -71,10 +126,11 @@ module GridHelper
   def respond_to? method_name, include_private = false
     case method_name.to_s
     when  /^(container|row|(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)_span)$/, 
-          /^(one|two|three|four|six|twelve)_col_row$/,
-          /^(one|two|three|four|six|twelve)_col_container$/
+          /^(one|two|three|four|six|twelve)_cols?_container$/,
+          /^(one|two|three|four|six|twelve)_spans?_container$/
       true
     else super
     end
   end
+
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css_grid
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 2.0.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-10-01 00:00:00.000000000 Z
+date: 2012-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -43,7 +43,7 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-description: Provide CSS grid stylesheet, plus several helpers
+description: Provide CSS grid stylesheet and CSS grid helpers
 email:
 - thomas.petrachi@vodeclic.com
 executables: []
@@ -79,7 +79,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3545808649529635569
+      hash: 828543185665201826
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -88,7 +88,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3545808649529635569
+      hash: 828543185665201826
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.24