flexlayout-rails 0.1.1

data/.document

@@ -0,0 +1,5 @@
+lib/**/*.rb
+bin/*
+- 
+features/**/*.feature
+LICENSE.txt

data/.rspec

@@ -0,0 +1 @@
+--color

data/Gemfile

@@ -0,0 +1,11 @@
+source :rubygems
+
+# Add dependencies to develop your gem here.
+# Include everything needed to run rake, tests, features, etc.
+group :development do
+  gem "rspec",    ">= 2.8.0"
+  gem "rdoc",     ">= 3.12"
+  gem "bundler",  ">= 1.0.0"
+  gem "jeweler",  ">= 1.8.3"
+  gem "simplecov",">= 0.5"
+end

data/Gemfile.lock

@@ -0,0 +1,37 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    diff-lcs (1.1.3)
+    git (1.2.5)
+    jeweler (1.8.4)
+      bundler (~> 1.0)
+      git (>= 1.2.5)
+      rake
+      rdoc
+    json (1.7.5)
+    multi_json (1.3.6)
+    rake (0.9.2.2)
+    rdoc (3.12)
+      json (~> 1.4)
+    rspec (2.11.0)
+      rspec-core (~> 2.11.0)
+      rspec-expectations (~> 2.11.0)
+      rspec-mocks (~> 2.11.0)
+    rspec-core (2.11.1)
+    rspec-expectations (2.11.2)
+      diff-lcs (~> 1.1.3)
+    rspec-mocks (2.11.2)
+    simplecov (0.6.4)
+      multi_json (~> 1.0)
+      simplecov-html (~> 0.5.3)
+    simplecov-html (0.5.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (>= 1.0.0)
+  jeweler (>= 1.8.3)
+  rdoc (>= 3.12)
+  rspec (>= 2.8.0)
+  simplecov (>= 0.5)

data/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2012 Kristian Mandrup
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,140 @@
+# Flexible CSS layout models for Rails using Polyfills
+
+Polyfills for various HTML 5 "more flexible" layout models.
+
+* Flexie.js (Flex box layout)
+* Regions.js (CSS Regions)
+* CSS Template Layout
+
+Flexie.js is a polyfill for the [CSS3 Flexbox](http://www.w3.org/TR/css3-flexbox/) module from W3C.
+
+CSS Template Layout is an implementation of [CSS Template Layout Module](http://www.w3.org/TR/css3-layout/) from W3C. Currently 2 different implementions are packaged in this gem.
+
+[Regions.js](https://github.com/ricardrobin/Regions.js) is the first implementation for the CSS3-Regions in the real world.
+
+These polyfills are all packaged for use with the Rails asset pipeline. 
+This lets you use and experiment with the new HTML5 CSS layout model in order to simplify and improve your HTML grids and layout :)
+
+## Install
+
+`gem 'flexlayout-rails'`
+
+### Flexie.js 2010, Richard Herrera
+
+```text
+//= require flexie
+```
+
+### Regions.js
+
+If you find [this](http://labs.adobe.com/technologies/cssregions/) interesting, just try this script!
+
+Regions.js requires [jQuery](http://jquery.com/) and [Lettering.js](https://github.com/davatron5000/Lettering.js) in order to work.
+
+```text
+//= require jquery
+//= require lettering.jquery
+//= require regions.jquery.min
+```
+
+### Template layout 2011-2012 Pablo Escalada
+
+```text
+//= require template_layout/templateLayout
+```
+
+Not sure how/if to use the template generator and compiler!?
+
+### Template layout 2010, Alexis Deveria 
+
+```text
+//= require template_layout/jquery/jquery.tpl_layout1.1.16.min
+```
+
+Enjoy :)
+
+## Flexie usage
+
+```javscript
+var box = new Flexie.box({
+    target : document.getElementById("foo"),
+    orient : "horizontal",
+    align : "stretch",
+    direction : "normal",
+    pack : "start",
+    flexMatrix : [1, 1, 1, 1],
+    ordinalMatrix : [0, 0, 0, 0]
+});
+```
+
+The function `flexiebox` wraps this to support are more intuitive DSL, using jQuery to select the element to use as the target:
+
+`var box = flexiebox('#foo', options);`
+
+Defaults options:
+
+```javascript
+DEFAULTS = {
+  orient    : "horizontal",
+  align     : "stretch",
+  direction : "inherit",
+  pack      : "start"
+}
+```
+
+## Regions.js usage
+
+```javascript
+$(function(){ // When DOM is Loaded
+    $("#article-flow").regions(".article-region");
+});
+```
+
+You can also pass a jQuery Object or a list of jQuery Objects / jQuery Selectorstring to the function :
+
+```javascript
+$("#content-source-element").regions($(".content-target-elements"));
+
+// or
+
+$("#content-source-element").regions(["#article-region-1", "#article-region-2", "#article-region-3"]);
+
+// or
+
+$("#content-source-element").regions([$("#article-region-1"), $("#article-region-2"), $("#article-region-3")]);
+
+// even mixed
+
+$("#content-source-element").regions([$("#article-region-1"), "#article-region-2", $("#article-region-3")]);
+```
+
+## Template layout usage
+
+Alexis Deveria version, see repo [css-template-layout](https://code.google.com/p/css-template-layout/) and these [demos](http://a.deveria.com/csstpl/) :)
+
+Pablo Escalada version, see repo at [cssTemplateLayout](https://github.com/diesire/cssTemplateLayout) and test folder for examples.
+
+## Flexbox Articles
+
+* [Flexbox quick guide](http://www.html5rocks.com/en/tutorials/flexbox/quick/)
+
+_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/)
+
+## Contributing to flexie-rails
+ 
+* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
+* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
+* Fork the project.
+* Start a feature/bugfix branch.
+* Commit and push until you are happy with your contribution.
+* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
+* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
+
+## Copyright
+
+Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for
+further details.
+

data/Rakefile

@@ -0,0 +1,49 @@
+# encoding: utf-8
+
+require 'rubygems'
+require 'bundler'
+begin
+  Bundler.setup(:default, :development)
+rescue Bundler::BundlerError => e
+  $stderr.puts e.message
+  $stderr.puts "Run `bundle install` to install missing gems"
+  exit e.status_code
+end
+require 'rake'
+
+require 'jeweler'
+Jeweler::Tasks.new do |gem|
+  # gem is a Gem::Specification... see http://docs.rubygems.org/read/chapter/20 for more options
+  gem.name = "flexlayout-rails"
+  gem.homepage = "http://github.com/kristianmandrup/flexlayout-rails"
+  gem.license = "MIT"
+  gem.summary = %Q{CSS3 layout polyfills pre-packaged for Rails asset pipeline}
+  gem.description = %Q{Use CSS Flex, Regions and Template layout models in your Rails apps}
+  gem.email = "kmandrup@gmail.com"
+  gem.authors = ["Kristian Mandrup"]
+  # dependencies defined in Gemfile
+end
+Jeweler::RubygemsDotOrgTasks.new
+
+require 'rspec/core'
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new(:spec) do |spec|
+  spec.pattern = FileList['spec/**/*_spec.rb']
+end
+
+RSpec::Core::RakeTask.new(:rcov) do |spec|
+  spec.pattern = 'spec/**/*_spec.rb'
+  spec.rcov = true
+end
+
+task :default => :spec
+
+require 'rdoc/task'
+Rake::RDocTask.new do |rdoc|
+  version = File.exist?('VERSION') ? File.read('VERSION') : ""
+
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title = "flexlayout-rails #{version}"
+  rdoc.rdoc_files.include('README*')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end

data/VERSION

@@ -0,0 +1 @@
+0.1.1

data/flexlayout-rails.gemspec

@@ -0,0 +1,79 @@
+# Generated by jeweler
+# DO NOT EDIT THIS FILE DIRECTLY
+# Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = "flexlayout-rails"
+  s.version = "0.1.1"
+
+  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.description = "Use CSS Flex, Regions and Template layout models in your Rails apps"
+  s.email = "kmandrup@gmail.com"
+  s.extra_rdoc_files = [
+    "LICENSE.txt",
+    "README.md"
+  ]
+  s.files = [
+    ".document",
+    ".rspec",
+    "Gemfile",
+    "Gemfile.lock",
+    "LICENSE.txt",
+    "README.md",
+    "Rakefile",
+    "VERSION",
+    "flexlayout-rails.gemspec",
+    "lib/flexlayout-rails.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",
+    "vendor/assets/javascripts/feature-detects/cssregions.js",
+    "vendor/assets/javascripts/flexie.js",
+    "vendor/assets/javascripts/flexie.min.js",
+    "vendor/assets/javascripts/jquery.lettering.js",
+    "vendor/assets/javascripts/jquery.lettering.min.js",
+    "vendor/assets/javascripts/regions.jquery.js",
+    "vendor/assets/javascripts/regions.jquery.min.js",
+    "vendor/assets/javascripts/template_layout/jquery/jquery.tpl_layout1.1.6.js",
+    "vendor/assets/javascripts/template_layout/jquery/jquery.tpl_layout1.1.6.min.js",
+    "vendor/assets/javascripts/template_layout/templateLayout.compiler.js",
+    "vendor/assets/javascripts/template_layout/templateLayout.generator.js",
+    "vendor/assets/javascripts/template_layout/templateLayout.js"
+  ]
+  s.homepage = "http://github.com/kristianmandrup/flexlayout-rails"
+  s.licenses = ["MIT"]
+  s.require_paths = ["lib"]
+  s.rubygems_version = "1.8.24"
+  s.summary = "CSS3 layout polyfills pre-packaged for Rails asset pipeline"
+
+  if s.respond_to? :specification_version then
+    s.specification_version = 3
+
+    if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+      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<rspec>, [">= 2.8.0"])
+      s.add_dependency(%q<rdoc>, [">= 3.12"])
+      s.add_dependency(%q<bundler>, [">= 1.0.0"])
+      s.add_dependency(%q<jeweler>, [">= 1.8.3"])
+      s.add_dependency(%q<simplecov>, [">= 0.5"])
+    end
+  else
+    s.add_dependency(%q<rspec>, [">= 2.8.0"])
+    s.add_dependency(%q<rdoc>, [">= 3.12"])
+    s.add_dependency(%q<bundler>, [">= 1.0.0"])
+    s.add_dependency(%q<jeweler>, [">= 1.8.3"])
+    s.add_dependency(%q<simplecov>, [">= 0.5"])
+  end
+end
+

data/lib/flexlayout-rails.rb

@@ -0,0 +1,6 @@
+module FlexLayout
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/spec/regions/index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html class="no-js">
+<head>
+  <meta charset="UTF-8">
+  <title>Regions.js Test Suite</title>
+  
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  <script src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
+  <script src="https://raw.github.com/SlexAxton/yepnope.js/master/yepnope.1.5.3-min.js"></script>
+  <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
+  <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
+  <script src="https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
+  
+  <script src="../feature-detects/cssregions.js"></script>
+  <script>
+    yepnope({
+      test: Modernizr.cssregions,
+      load: ["js/setup.js", "js/detection.js"],
+      nope: ["../regions.jquery.js", "js/layout.js"]
+    });
+  </script>
+</head>
+<body>
+  <h1 id="qunit-header">Regions.js Test Suite</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-userAgent"></h2>
+
+  <ol id="qunit-tests"></ol>
+  <div id="mod-output"></div>
+  
+  <div id="playground">
+    <style type="text/css">
+    #article {
+      -webkit-flow: "article-flow";
+      flow: "article-flow";
+    }
+    .article-region {
+      content: from(article-flow);
+      background: #C5DFF0;
+    }
+    #article-region-1 {
+      display: inline-block;
+      width: 100px;
+      height: 100px;
+    }
+    #article-region-2 {
+      display: inline-block;
+      width: 80%;
+      height: 100px;
+    }
+    #article-region-3 {
+      display: inline-block;
+      margin-top: 20px;
+      width: 100%;
+    }
+
+    #alternative-article {
+      -webkit-flow: 'foo';
+      flow: 'foo'
+    }
+
+    .alternative-region {
+      content: from(foo);
+
+      background: #C5DFF0;
+      float: left;
+      width: 30%;
+      height: 200px;
+      margin: 10px;
+    }
+    </style>
+    <h1>A press article</h1>
+    <div id="article">
+      <p>1Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+    <div class="article-region" id="article-region-1"></div>
+    <div class="article-region" id="article-region-2"></div>
+    <div class="article-region" id="article-region-3"></div>
+  </div>
+  <h1>Alternative Query Method</h1>
+
+  <div id="alternative-article">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo enim, interdum vel iaculis vitae, pellentesque
+      sit amet neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+      Aliquam eget velit eu sapien commodo cursus non et orci. Maecenas ut tellus vel risus fermentum convallis in ut
+      erat. Maecenas luctus est et dolor posuere non posuere justo congue. Vestibulum a nulla nulla, at porttitor massa.
+      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vehicula consequat
+      risus, sit amet dapibus nunc volutpat quis. Donec vel ante vitae velit auctor sodales non eget augue. Nam at justo
+      metus. Sed consectetur dui vitae erat aliquet tincidunt. Quisque suscipit, mauris porttitor pharetra cursus, ipsum
+      nisl tempor velit, in porta orci risus ac dui. Nam non urna nunc, vel ultrices eros. Suspendisse egestas venenatis
+      erat et imperdiet.
+      <img id="oversized" src="img/lorem-ipsum-logo.jpeg"/>
+    </p>
+
+
+    <p>
+      Aenean varius euismod libero, et hendrerit arcu suscipit ut. Curabitur odio leo, tristique a varius at, venenatis
+      vel arcu. Cras quis adipiscing leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat ante id
+      felis molestie varius scelerisque elit luctus. Mauris sit amet mauris elementum magna mollis hendrerit ac vitae
+      ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
+      vehicula aliquet erat ac euismod.
+    </p>
+
+    <p>
+      Cras non diam sit amet justo elementum convallis sed non elit. Fusce tempor est et ligula sodales pretium.
+      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas laoreet sem eu
+      libero aliquet auctor. Praesent justo augue, luctus sed placerat vel, faucibus at mauris. Mauris fringilla, eros
+      nec elementum tempor, ligula ante blandit urna, ut ultrices diam massa a nisi. Suspendisse at libero lorem. Morbi
+      ac enim eget urna venenatis iaculis.
+    </p>
+  </div>
+  <div class="alternative-region"></div>
+  <div class="alternative-region"></div>
+  <div class="alternative-region"></div>
+  <div class="alternative-region"></div>
+</body>
+</html>