css_grid 0.0.2 → 1.0.0

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    css_grid (0.0.2)
+    css_grid (1.0.0)
       hash_extend
       railties (>= 3.1.0)
 
@@ -24,11 +24,11 @@ GEM
     activesupport (3.2.8)
       i18n (~> 0.6)
       multi_json (~> 1.0)
-    builder (3.0.0)
+    builder (3.0.3)
     erubis (2.7.0)
     hash_extend (1.0.1)
     hike (1.2.1)
-    i18n (0.6.0)
+    i18n (0.6.1)
     journey (1.0.4)
     json (1.7.5)
     multi_json (1.3.6)
@@ -37,7 +37,7 @@ GEM
       rack (>= 0.4)
     rack-ssl (1.3.2)
       rack
-    rack-test (0.6.1)
+    rack-test (0.6.2)
       rack (>= 1.0)
     railties (3.2.8)
       actionpack (= 3.2.8)

data/README.md

@@ -1,6 +1,10 @@
 # CssGrid
 
-In Dev Gem, please, come back later.
+This Gem allow you to use a css grid, and provide several helpers.
+
+__Grid__ is a 12 column alignment system, based on 1140px width. That fit for 1280*720 screens. This is responsive design and adapt for smaller screens, and mobile screens.
+
+__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.
 
 ## Installation
 
@@ -16,9 +20,269 @@ Or install it yourself as:
 
     $ gem install css_grid
 
+## Use
+
+### Css Grid
+
+To use the css class for grid, you need to require the grid.css file in you'r asset pipeline.
+
+app/assets/stylesheets/application.css
+```css
+	/*
+	 *= require grid
+	 */
+```
+
+### Grid Helpers
+
+To use the methods helper provide, you need to include GridHelper
+
+app/helpers/application_helper.rb
+```ruby
+	include GridHelper
+```
+
 ## Usage
 
-TODO: Write usage instructions here
+### Css Grid Tags
+
+__Container__ is a full width div that allows layouts to have a background that spans the full width of the browser
+
+__Row__ is a row of columns. It centres them and defines the 1140px max-width.
+
+__Span__ is the column, there are twelve classes to define the width for each column. Defined from 'one_span' to 'twelve_span'
+
+There is some example of what you can do :
+```html
+	<div class="container">
+			<div class="row">
+				<div class="six_span">
+					<!-- this is a half width column -->
+				</div>
+				<div class="six_span">
+					<!-- this is a half width column -->
+				</div>
+			</div>
+		</div>
+	</div>
+```
+
+```html
+	<div class="container">
+		<div class="row">
+			<div class="three_span">
+				<!-- this is a quart width column -->
+			</div>
+			<div class="three_span">
+				<!-- this is a quart width column -->
+			</div>
+			<div class="six_span">
+				<!-- this is a half width column -->
+			</div>
+		</div>
+			
+		<div class="row">
+			<div class="twelve_span">
+				<!-- this is a full width column -->
+			</div>
+		</div>
+	</div>
+```
+
+
+### Grid Helpers
+
+The grid helpers allow you to shortcut creation for the css grid tags.
+
+#### Basics 
+
+You can call 'container', 'row' or '*_span' functions that create the corresponding divs
+
+Code
+
+erb code
+```erb
+	<%= container do %>
+		<!-- some html -->
+	<% end %>
+```
+
+will produce
+```html
+	<div class="container">
+		<!-- some html -->
+	</div>
+```
+
+You can pass specific html ids or class as arguments
+
+erb code
+```erb
+	<%= row :class=>:some_class do %>
+		<!-- some html -->
+	<% end %>
+```
+
+will produce
+```html
+	<div class="row some_class">
+		<!-- some html -->
+	</div>
+```
+
+--
+erb code
+```erb
+	<%= six_span :id=>:some_id, :class=>"class_one class_two" do %>
+		<!-- some html -->
+	<% end %>
+```
+
+will produce
+```html
+	<div class="six_span class_one class_two" id="some_id">
+		<!-- some html -->
+	</div>
+```
+
+You can also pass 'offset' as an argument for the '*_span' helpers. Offset will slide the column to the left. (like you insert a empty *_span before)
+
+erb code
+```erb
+	<%= four_span :offset=>:two do %>
+		<!-- some html -->
+	<% end %>
+```
+
+will produce
+```html
+	<div class="four_span offset_two">
+		<!-- some html -->
+	</div>
+```
+
+--
+erb code
+```erb
+	<%= four_span :offset=>2 do %>
+		<!-- some html -->
+	<% end %>
+```
+
+will produce
+```html
+	<div class="four_span offset_two">
+		<!-- some html -->
+	</div>
+```
+
+#### Collections
+
+The most interesting part if you ask me! 
+GridHelper allow you to create severals columns in one time. And include them directly into row or container.
+
+Imagine I have this yml file
+```yml
+	en:
+		array:
+			name: Array
+			description: It's an array !
+			
+		hash:
+			name: Hash
+			descrption: I love hash, it's so fun !
+			
+		string:
+			name: Text
+			description: Just read the text.
+```
+
+I can do in my view
+```erb
+	<%= two_col_container :collection=>[:array, :hash, :string] do |i18n_key| %>
+		<h2><%=t "#{ i18n_key }.name" %></h2>
+		<p><%=t "#{ i18n_key }.description" %></p>
+	<% end %>
+```
+
+This will use two col per row (so six_span width), yield the block for each element, and place them into correct rows / container
+So the produced html will be
+```html
+	<div class="container">
+		<div class="row">
+			<div class="six_span">
+				<h2>Array</h2>
+				<p>It's an array !</p>
+			</div>
+			<div class="six_span">
+				<h2>Hash</h2>
+				<p>I love hash, it's so fun !</p>
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="six_span">
+				<h2>Text</h2>
+				<p>Just read the text.</p>
+			</div>
+		</div>
+	</div>
+```
+
+So You can play easily with grid and your collections. Users.all for example ;)
+
+--
+If you just want to create a single row, you can just do 
+```erb
+	<%= four_col_row :collection=>[1, 2, 3, 4], :id=>:count_style do |i| %>
+		<p>count <%= i %></p>
+	<% end %>
+```
+
+will use four col per row (so three_span width), will produce
+```html
+	<div class="row count_style">
+		<div class="three_span">
+			<p>count 1</p>
+		</div>
+		<div class="three_span">
+			<p>count 2</p>
+		</div>
+		<div class="three_span">
+			<p>count 3</p>
+		</div>
+		<div class="three_span">
+			<p>count 4</p>
+		</div>
+	</div>
+```
+
+FYI: 'id' and 'class' options can also be used for *_col_ccontainer and *_col_row, wich is applied to the container / row
+
+
+## Future ameliorations
+
+I will add the possibility, in *_col_container, to use several *_span for the same object.
+I think this will be great, forms for example.
+
+```html
+	<div class="row">
+		<div class="three_span">
+			<label>Email</label>
+		</div>
+		<div class="nine_span">
+			<input id="email">
+		</div>
+	</div>
+```
+
+by passing
+```erb
+	<%= twelve_col_container :collection=>[:email], :auto_span=>:disabled do |field| %>
+		<%= three_span{ label_tag field }%>
+		<%= nine_span{ text_field_tag field }%>
+	<% end %>
+```
 
 ## Contributing
 

data/css_grid.gemspec

@@ -4,8 +4,8 @@ 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{In DEV GEM : Provide CSS grid stylesheet, plus several helpers}
-  gem.summary       = %q{In DEV GEM : 1140_grid.css and GridHelper module}
+  gem.description   = %q{Provide CSS grid stylesheet, plus several helpers}
+  gem.summary       = %q{grid.css and GridHelper module}
   gem.homepage      = "https://github.com/petrachi/css_grid"
 
   gem.files         = `git ls-files`.split($\)

data/lib/css_grid/version.rb

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

data/lib/css_grid.rb

@@ -1,99 +1,80 @@
 require "css_grid/version"
 require "css_grid/engine"
 
-module CssGridHelper
-  
-  
-  #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)
-    end
+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 col col_number, options = Hash.new, &block
-      html_id, html_class, collection = options.delete_many :id, :class, :collection
-      collection ||= [1]
+  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)
+  end
 
-      collection_length = TWELVE_STRING_INTS[col_number.to_sym]
-      span_width = TWELVE_STRING_INTS.invert[ 12 / collection_length ]
+  def col col_number, options = Hash.new, &block
+    html_id, html_class, collection = options.delete_many :id, :class, :collection
+    collection ||= [1]
 
-      raise ArgumentError, "collection.size must be <= #{ collection_length }" if collection.size > collection_length
+    collection_length = TWELVE_STRING_INTS[col_number.to_sym]
+    span_width = TWELVE_STRING_INTS.invert[ 12 / collection_length ]
 
-      cols = collection.map do |elt|
-        eval %{
-          #{ span_width }_span do
-            capture(elt, &block)
-          end }
-      end
+    raise ArgumentError, "collection.size must be <= #{ collection_length }" if collection.size > collection_length
 
-      row :id => html_id, :class => html_class do
-        cols.inject(ActiveSupport::SafeBuffer.new){ |buffer, col| buffer.safe_concat(col) }
-      end
+    cols = collection.map do |elt|
+      eval %{
+        #{ span_width }_span do
+          capture(elt, &block)
+        end }
     end
 
-    def recollect size, collection
-      recollected = Array.new
-      0.step(collection.size - 1, size) do |i|
-        recollected << collection[i..i + size - 1]
-      end
-      recollected
+    row :id => html_id, :class => html_class do
+      cols.inject(ActiveSupport::SafeBuffer.new){ |buffer, col| buffer.safe_concat(col) }
     end
+  end
 
-    def rows col_number, options = Hash.new, &block
-      html_id, html_class, collection = options.delete_many :id, :class, :collection    
-      collection ||= [1]
+  def recollect size, collection
+    recollected = Array.new
+    0.step(collection.size - 1, size) do |i|
+      recollected << collection[i..i + size - 1]
+    end
+    recollected
+  end
 
-      recollection_size = TWELVE_STRING_INTS[col_number.to_sym]
+  def rows col_number, options = Hash.new, &block
+    html_id, html_class, collection = options.delete_many :id, :class, :collection    
+    collection ||= [1]
 
-      rows = recollect(recollection_size, collection).map do |collection_mini|
-        col col_number, {:collection => collection_mini}, &block
-      end
+    recollection_size = TWELVE_STRING_INTS[col_number.to_sym]
 
-      container :id => html_id, :class => html_class do
-        rows.inject(ActiveSupport::SafeBuffer.new){ |buffer, col| buffer.safe_concat(col) }
-      end
+    rows = recollect(recollection_size, collection).map do |collection_mini|
+      col col_number, {:collection => collection_mini}, &block
     end
-    
-    
-    def method_missing method_name, *args, &block
-      case method_name.to_s
-      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)
-      else super
-      end
+
+    container :id => html_id, :class => html_class do
+      rows.inject(ActiveSupport::SafeBuffer.new){ |buffer, col| buffer.safe_concat(col) }
     end
-    
-    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$/
-        true
-      else super
-      end
+  end
+  
+  
+  def method_missing method_name, *args, &block
+    case method_name.to_s
+    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)
+    else super
     end
-    
-    
-=begin
-    def dynamic_method method_name, *args, &block
-      case method_name.to_s
-      when /^(container|row|(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)_span)$/
-        lambda{ self.grid($1, *args, &block) }
-      when /^(one|two|three|four|six|twelve)_col_row$/
-        lambda{ self.col($1, *args, &block) }
-      when /^(one|two|three|four|six|twelve)_col_container$/
-        lambda{ self.rows($1, *args, &block) }
-      else super
-      end
+  end
+  
+  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$/
+      true
+    else super
     end
-=end
-  #end
+  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css_grid
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.0.0
   prerelease: 
 platform: ruby
 authors:
@@ -43,7 +43,7 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-description: ! 'In DEV GEM : Provide CSS grid stylesheet, plus several helpers'
+description: Provide CSS grid stylesheet, plus several helpers
 email:
 - thomas.petrachi@vodeclic.com
 executables: []
@@ -79,7 +79,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3898628511873595243
+      hash: -3545808649529635569
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -88,11 +88,11 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3898628511873595243
+      hash: -3545808649529635569
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
-summary: ! 'In DEV GEM : 1140_grid.css and GridHelper module'
+summary: grid.css and GridHelper module
 test_files: []