flexlayout-rails 0.1.2 → 0.1.3

data/Gemfile

@@ -1,7 +1,7 @@
 source :rubygems
 
-# Add dependencies to develop your gem here.
-# Include everything needed to run rake, tests, features, etc.
+gem 'rails'
+
 group :development do
   gem "rspec",    ">= 2.8.0"
   gem "rdoc",     ">= 3.12"

data/Gemfile.lock

@@ -1,15 +1,76 @@
 GEM
   remote: http://rubygems.org/
   specs:
+    actionmailer (3.2.8)
+      actionpack (= 3.2.8)
+      mail (~> 2.4.4)
+    actionpack (3.2.8)
+      activemodel (= 3.2.8)
+      activesupport (= 3.2.8)
+      builder (~> 3.0.0)
+      erubis (~> 2.7.0)
+      journey (~> 1.0.4)
+      rack (~> 1.4.0)
+      rack-cache (~> 1.2)
+      rack-test (~> 0.6.1)
+      sprockets (~> 2.1.3)
+    activemodel (3.2.8)
+      activesupport (= 3.2.8)
+      builder (~> 3.0.0)
+    activerecord (3.2.8)
+      activemodel (= 3.2.8)
+      activesupport (= 3.2.8)
+      arel (~> 3.0.2)
+      tzinfo (~> 0.3.29)
+    activeresource (3.2.8)
+      activemodel (= 3.2.8)
+      activesupport (= 3.2.8)
+    activesupport (3.2.8)
+      i18n (~> 0.6)
+      multi_json (~> 1.0)
+    arel (3.0.2)
+    builder (3.0.0)
     diff-lcs (1.1.3)
+    erubis (2.7.0)
     git (1.2.5)
+    hike (1.2.1)
+    i18n (0.6.0)
     jeweler (1.8.4)
       bundler (~> 1.0)
       git (>= 1.2.5)
       rake
       rdoc
+    journey (1.0.4)
     json (1.7.5)
+    mail (2.4.4)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.19)
     multi_json (1.3.6)
+    polyglot (0.3.3)
+    rack (1.4.1)
+    rack-cache (1.2)
+      rack (>= 0.4)
+    rack-ssl (1.3.2)
+      rack
+    rack-test (0.6.1)
+      rack (>= 1.0)
+    rails (3.2.8)
+      actionmailer (= 3.2.8)
+      actionpack (= 3.2.8)
+      activerecord (= 3.2.8)
+      activeresource (= 3.2.8)
+      activesupport (= 3.2.8)
+      bundler (~> 1.0)
+      railties (= 3.2.8)
+    railties (3.2.8)
+      actionpack (= 3.2.8)
+      activesupport (= 3.2.8)
+      rack-ssl (~> 1.3.2)
+      rake (>= 0.8.7)
+      rdoc (~> 3.4)
+      thor (>= 0.14.6, < 2.0)
     rake (0.9.2.2)
     rdoc (3.12)
       json (~> 1.4)
@@ -25,6 +86,16 @@ GEM
       multi_json (~> 1.0)
       simplecov-html (~> 0.5.3)
     simplecov-html (0.5.3)
+    sprockets (2.1.3)
+      hike (~> 1.2)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    thor (0.16.0)
+    tilt (1.3.3)
+    treetop (1.4.10)
+      polyglot
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.33)
 
 PLATFORMS
   ruby
@@ -32,6 +103,7 @@ PLATFORMS
 DEPENDENCIES
   bundler (>= 1.0.0)
   jeweler (>= 1.8.3)
+  rails
   rdoc (>= 3.12)
   rspec (>= 2.8.0)
   simplecov (>= 0.5)

data/README.md

@@ -23,6 +23,29 @@ In addition a stylesheet called `flexlayout.css` is included, which wraps the Fl
 * [Wookmark-jQuery](https://github.com/GBKS/Wookmark-jQuery)
 * [FT-column-flow](https://github.com/ftlabs/ftcolumnflow)
 
+### Bonus view helpers
+
+`html5_script folder = nil`
+
+```html
+<!--[if lte IE 8]><script src=\"html5-forms/html5.min.js\" type=\"text/javascript\"><![endif]-->
+```
+
+No args:
+
+```html
+"<!--[if lte IE 8]><script src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\" type=\"text/javascript\"><![endif]-->"
+```
+
+
+`script_src_tag src`
+
+Renders fx:
+
+```html
+<script src=\"html5-forms/html5.min.js\" type=\"text/javascript\">
+```
+
 ## Install
 
 `gem 'flexlayout-rails'`
@@ -62,15 +85,72 @@ DEFAULTS = {
 }
 ```
 
+Note:
+Flexbox comes in different syntaxes as described [here](http://css-tricks.com/old-flexbox-and-new-flexbox/). The latest `flex-` syntax is only supported by Chrome 21+ as shown [here](http://caniuse.com/flexbox). Hence you need fallback in your CSS:
+
+```css
+selector 
+{ display: flex }
+
+.no-flexbox selector 
+{ display: box }
+```
+
+### View helpers
+
+```haml
+= flexie_script
+```
+
+Renders:
+
+    <!--[if lte IE 8]><script src="js/flexie.js"></script><![endif]-->
+
+### Flex box helpers
+
+The following stylesheets with CSS helper classes are included.
+
+* `flexlayout.css`
+* `flex-box-helpers.css`
+
+Better yet to use [Compass box mixins](http://compass-style.org/examples/compass/css3/box/) 
+
+```scss
+@import "compass/css3"
+
+.example {
+  @include display-box;
+  @include box-orient(horizontal);
+  @include box-align(stretch);
+
+  ...
+  .content {
+    @include box-flex(1);
+  }  
+} 
+```
+
+Or fx [Preboot](https://github.com/markdotto/Preboot.less) if using LESS.
+
+```less
+.content {
+  .box-flex(1);
+}
+```
+
 *Flexbox Articles*
 
 * [Flexbox quick guide](http://www.html5rocks.com/en/tutorials/flexbox/quick/)
+* [Flexible box layout explained](http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/)
+* [Understanding flexbox](http://benfrain.com/understanding-the-css3-flexbox-flexible-box-layout-module/)
 
 _Critiques:_
 
 * [Why Flexboxes Aren't Good for Page Layout](http://www.xanthir.com/blog/b4580)
 * [Flexbox vs Princess Bride](http://oli.jp/2011/css3-flexbox/)
 
+Conclusion: As is almost always the case, they are good only if used in the right context to solve the right problem ;)
+
 ### Regions.js
 
 If you find [this](http://labs.adobe.com/technologies/cssregions/) interesting, just try this script!
@@ -178,7 +258,7 @@ See [Wookmark-jQuery](https://github.com/GBKS/Wookmark-jQuery) for examples and
 
 See [FT-column-flow](https://github.com/ftlabs/ftcolumnflow) for examples, demos and usage guide etc.
 
-See fx [BAsic usage example](http://ftlabs.github.com/ftcolumnflow/1.html)
+See fx [Basic usage example](http://ftlabs.github.com/ftcolumnflow/1.html)
 
 ## Contributing to flexlayout-rails
  

data/VERSION

@@ -1 +1 @@
-0.1.2
+0.1.3

data/flexlayout-rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "flexlayout-rails"
-  s.version = "0.1.2"
+  s.version = "0.1.3"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Kristian Mandrup"]
-  s.date = "2012-08-28"
+  s.date = "2012-08-31"
   s.description = "Use CSS Flex, Regions, Multi-column and Template layout models in your Rails apps"
   s.email = "kmandrup@gmail.com"
   s.extra_rdoc_files = [
@@ -27,14 +27,17 @@ Gem::Specification.new do |s|
     "VERSION",
     "flexlayout-rails.gemspec",
     "lib/flexlayout-rails.rb",
+    "lib/flexlayout/view_helper.rb",
     "spec/flexlayout/center.html",
     "spec/flexlayout/form.html",
+    "spec/flexlayout/view_helper_spec.rb",
     "spec/regions/img/lorem-ipsum-logo.jpeg",
     "spec/regions/index.html",
     "spec/regions/js/detection.js",
     "spec/regions/js/layout.js",
     "spec/regions/js/setup.js",
     "spec/spec_helper.rb",
+    "spec/view_helper.rb",
     "vendor/assets/javascripts/FT-colum-flow.min.js",
     "vendor/assets/javascripts/FT-column-flow.js",
     "vendor/assets/javascripts/feature-detects/cssregions.js",
@@ -52,6 +55,7 @@ Gem::Specification.new do |s|
     "vendor/assets/javascripts/template_layout/templateLayout.compiler.js",
     "vendor/assets/javascripts/template_layout/templateLayout.generator.js",
     "vendor/assets/javascripts/template_layout/templateLayout.js",
+    "vendor/assets/stylesheets/flex-box-helpers.css",
     "vendor/assets/stylesheets/flexlayout.css",
     "vendor/assets/stylesheets/multi-column.css"
   ]
@@ -65,12 +69,14 @@ Gem::Specification.new do |s|
     s.specification_version = 3
 
     if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<rails>, [">= 0"])
       s.add_development_dependency(%q<rspec>, [">= 2.8.0"])
       s.add_development_dependency(%q<rdoc>, [">= 3.12"])
       s.add_development_dependency(%q<bundler>, [">= 1.0.0"])
       s.add_development_dependency(%q<jeweler>, [">= 1.8.3"])
       s.add_development_dependency(%q<simplecov>, [">= 0.5"])
     else
+      s.add_dependency(%q<rails>, [">= 0"])
       s.add_dependency(%q<rspec>, [">= 2.8.0"])
       s.add_dependency(%q<rdoc>, [">= 3.12"])
       s.add_dependency(%q<bundler>, [">= 1.0.0"])
@@ -78,6 +84,7 @@ Gem::Specification.new do |s|
       s.add_dependency(%q<simplecov>, [">= 0.5"])
     end
   else
+    s.add_dependency(%q<rails>, [">= 0"])
     s.add_dependency(%q<rspec>, [">= 2.8.0"])
     s.add_dependency(%q<rdoc>, [">= 3.12"])
     s.add_dependency(%q<bundler>, [">= 1.0.0"])

data/lib/flexlayout/view_helper.rb

@@ -0,0 +1,27 @@
+module FlexLayout
+  module ViewHelper
+    def ie_script_tag version, operator = :lt, &block
+      raise ArgumentError, "must take a block" unless block_given?
+      raw("<!--[if #{operator} IE #{version}]>#{capture(&block)}<![endif]-->").html_safe
+    end
+
+    def flexie_script
+      # content = capture(script_tag "flexie.min.js")
+      ie_script_tag 8, :lte do
+        script_src_tag "flexie.min.js"
+      end
+    end
+
+    # Le HTML5 shim, for IE6-8 support of HTML elements
+    # if :local option, the option must point to the relative asset folder!
+    def html5_script folder = nil
+      ie_script_tag 8, :lte do
+        script_src_tag folder ? File.join(folder, "html5.min.js") : "http://html5shim.googlecode.com/svn/trunk/html5.js"
+      end
+    end
+
+    def script_src_tag src
+      raw("<script src=\"#{src}\" type=\"text/javascript\">").html_safe
+    end
+  end
+end

data/lib/flexlayout-rails.rb

@@ -1,6 +1,11 @@
+require 'flexlayout/view_helper'
+
 module FlexLayout
   module Rails
     class Engine < ::Rails::Engine
+      initializer 'flexlayout config' do
+        ActionView::Base.send :include, FlexLayout::ViewHelper
+      end
     end
   end
 end

data/spec/flexlayout/view_helper_spec.rb

@@ -0,0 +1,54 @@
+require 'view_helper'
+
+describe FlexLayout::ViewHelper do
+  include ControllerTestHelpers,
+          FlexLayout::ViewHelper
+
+  describe '#ie_script_tag' do
+    context 'no arguments' do
+      specify do
+        expect { ie_script_tag }.to raise_error(ArgumentError)
+      end
+    end
+
+    context '8' do
+      specify do
+        expect { ie_script_tag(8) }.to raise_error(ArgumentError)
+      end
+    end
+
+    context '8, hello' do
+      specify do
+        ie_script_tag(8) { 'hello'}.should == "<!--[if lt IE 8]>hello<![endif]-->"
+      end
+    end
+
+    context '8, :lte, hello' do
+      specify do
+        ie_script_tag(8, :lte) { 'hello'}.should == "<!--[if lte IE 8]>hello<![endif]-->"
+      end
+    end
+  end
+
+  describe '#flexie_script' do
+    context 'no arguments' do
+      specify do
+        flexie_script.should == "<!--[if lte IE 8]><script src=\"flexie.min.js\" type=\"text/javascript\"><![endif]-->"
+      end
+    end
+  end
+
+  describe '#html5_script' do
+    context 'no arguments' do
+      specify do
+        html5_script.should == "<!--[if lte IE 8]><script src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\" type=\"text/javascript\"><![endif]-->"
+      end
+    end
+
+    context "'html5-forms'" do
+      specify do
+        html5_script('html5-forms').should == "<!--[if lte IE 8]><script src=\"html5-forms/html5.min.js\" type=\"text/javascript\"><![endif]-->"
+      end
+    end
+  end
+end

data/spec/spec_helper.rb

@@ -1,12 +1,5 @@
-$LOAD_PATH.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
-$LOAD_PATH.unshift(File.dirname(__FILE__))
 require 'rspec'
-require 'flexie-rails'
+require 'flexlayout-rails'
 
-# Requires supporting files with custom matchers and macros, etc,
-# in ./support/ and its subdirectories.
-Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each {|f| require f}
-
-RSpec.configure do |config|
-  
+RSpec.configure do |config|  
 end

data/spec/view_helper.rb

@@ -0,0 +1,41 @@
+# coding: utf-8
+require 'rubygems'
+require 'rails'
+require 'json'
+require 'active_support'
+require 'action_pack'
+require 'action_view'
+require 'action_controller'
+require 'action_view/template'
+
+require 'spec_helper'
+
+module ControllerTestHelpers
+
+  def self.included(base)
+    base.class_eval do
+      
+      include ActionView::Helpers,
+              ActionView::Helpers::CaptureHelper,
+              ActionView::Helpers::JavaScriptHelper,
+              ActionView::Helpers::AssetTagHelper
+  
+      # allow tabs.create to run by stubbing an output_buffer
+      attr_accessor :output_buffer
+      @output_buffer = ""
+  
+      # stub content_for for testing
+      def content_for(name, content = nil, &block)
+        # this doesn't exist, and causes errors
+        @_content_for = {} unless defined? @_content_for
+        # we've got to initialize this, so we can concat to it
+        @_content_for[name] = '' if @_content_for[name].nil?
+        # now the rest is the same as in rails
+        content = capture(&block) if block_given?
+        @_content_for[name] << content if content
+        @_content_for[name] unless content
+      end    
+    end
+  end
+
+end

data/vendor/assets/stylesheets/flex-box-helpers.css

@@ -0,0 +1,85 @@
+/* Flexbox-Helpers.css
+ * Helper classes to use with CSS3 Flexible Boxes
+ *
+ * http://richardshepherd.com
+ * @richardshepherd
+ *
+ * Keep your eye on the spec because these
+ * properties and values WILL change :)
+ * http://dev.w3.org/csswg/css3-flexbox/
+ * -------------------------------------------- */
+
+.boxHorizontal {
+  display: -webkit-box; 
+  display: -moz-box; 
+  display: box; 
+  
+  -webkit-box-orient: horizontal; 
+  -moz-box-orient: horizontal; 
+  box-orient: horizontal;
+}
+
+.boxVertical {
+  display: -webkit-box; 
+  display: -moz-box; 
+  display: box; 
+  
+  -webkit-box-orient: vertical; 
+  -moz-box-orient: vertical; 
+  box-orient: vertical;
+}
+
+.boxFlex, 
+.boxFlex1 { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
+.boxFlex2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; }
+.boxFlex3 { -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; }
+.boxFlex4 { -webkit-box-flex: 4; -moz-box-flex: 4; box-flex: 4; }
+
+.boxStart {
+  -webkit-box-pack: start;
+  -moz-box-pack: start;
+  box-pack: start;
+}
+ 
+.boxEnd {
+  -webkit-box-pack: end;
+  -moz-box-pack: end;
+  box-pack: end;
+}
+ 
+.boxCentered {
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  box-pack: center;
+}
+ 
+
+/* Additional Classes written by/adapted from Alex Russell's great work
+ * http://infrequently.org/2009/08/css-3-progress/
+ * -----------------------------------------------*/
+
+.boxHorizontal > *,
+.boxVertical > * {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  display: block;
+}
+
+.spacer {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+}
+  
+.boxGroup1 {
+  -webkit-box-flex-group: 1;
+  -moz-box-flex-group: 1;
+  box-flex-group: 1;
+}
+ 
+.boxGroup2 {
+  -webkit-box-flex-group: 2;
+  -moz-box-flex-group: 2;
+  box-flex-group: 2;
+}

data/vendor/assets/stylesheets/flexlayout.css

@@ -1,6 +1,6 @@
-/* From: http://infrequently.org/2009/08/css-3-progress/ */
+/* From: http://infrequently.org/2009/08/css-3-progress/
 
-/* hbox and vbox classes */
+hbox and vbox classes */
  
 .hbox {
   display: -webkit-box;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flexlayout-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,8 +9,24 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-08-28 00:00:00.000000000 Z
+date: 2012-08-31 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
@@ -110,14 +126,17 @@ files:
 - VERSION
 - flexlayout-rails.gemspec
 - lib/flexlayout-rails.rb
+- lib/flexlayout/view_helper.rb
 - spec/flexlayout/center.html
 - spec/flexlayout/form.html
+- spec/flexlayout/view_helper_spec.rb
 - spec/regions/img/lorem-ipsum-logo.jpeg
 - spec/regions/index.html
 - spec/regions/js/detection.js
 - spec/regions/js/layout.js
 - spec/regions/js/setup.js
 - spec/spec_helper.rb
+- spec/view_helper.rb
 - vendor/assets/javascripts/FT-colum-flow.min.js
 - vendor/assets/javascripts/FT-column-flow.js
 - vendor/assets/javascripts/feature-detects/cssregions.js
@@ -135,6 +154,7 @@ files:
 - vendor/assets/javascripts/template_layout/templateLayout.compiler.js
 - vendor/assets/javascripts/template_layout/templateLayout.generator.js
 - vendor/assets/javascripts/template_layout/templateLayout.js
+- vendor/assets/stylesheets/flex-box-helpers.css
 - vendor/assets/stylesheets/flexlayout.css
 - vendor/assets/stylesheets/multi-column.css
 homepage: http://github.com/kristianmandrup/flexlayout-rails
@@ -152,7 +172,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3858388048093815556
+      hash: 2728143054712158305
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: