flexlayout-rails 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/.document ADDED
@@ -0,0 +1,5 @@
1
+ lib/**/*.rb
2
+ bin/*
3
+ -
4
+ features/**/*.feature
5
+ LICENSE.txt
data/.rspec ADDED
@@ -0,0 +1 @@
1
+ --color
data/Gemfile ADDED
@@ -0,0 +1,11 @@
1
+ source :rubygems
2
+
3
+ # Add dependencies to develop your gem here.
4
+ # Include everything needed to run rake, tests, features, etc.
5
+ group :development do
6
+ gem "rspec", ">= 2.8.0"
7
+ gem "rdoc", ">= 3.12"
8
+ gem "bundler", ">= 1.0.0"
9
+ gem "jeweler", ">= 1.8.3"
10
+ gem "simplecov",">= 0.5"
11
+ end
data/Gemfile.lock ADDED
@@ -0,0 +1,37 @@
1
+ GEM
2
+ remote: http://rubygems.org/
3
+ specs:
4
+ diff-lcs (1.1.3)
5
+ git (1.2.5)
6
+ jeweler (1.8.4)
7
+ bundler (~> 1.0)
8
+ git (>= 1.2.5)
9
+ rake
10
+ rdoc
11
+ json (1.7.5)
12
+ multi_json (1.3.6)
13
+ rake (0.9.2.2)
14
+ rdoc (3.12)
15
+ json (~> 1.4)
16
+ rspec (2.11.0)
17
+ rspec-core (~> 2.11.0)
18
+ rspec-expectations (~> 2.11.0)
19
+ rspec-mocks (~> 2.11.0)
20
+ rspec-core (2.11.1)
21
+ rspec-expectations (2.11.2)
22
+ diff-lcs (~> 1.1.3)
23
+ rspec-mocks (2.11.2)
24
+ simplecov (0.6.4)
25
+ multi_json (~> 1.0)
26
+ simplecov-html (~> 0.5.3)
27
+ simplecov-html (0.5.3)
28
+
29
+ PLATFORMS
30
+ ruby
31
+
32
+ DEPENDENCIES
33
+ bundler (>= 1.0.0)
34
+ jeweler (>= 1.8.3)
35
+ rdoc (>= 3.12)
36
+ rspec (>= 2.8.0)
37
+ simplecov (>= 0.5)
data/LICENSE.txt ADDED
@@ -0,0 +1,20 @@
1
+ Copyright (c) 2012 Kristian Mandrup
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,140 @@
1
+ # Flexible CSS layout models for Rails using Polyfills
2
+
3
+ Polyfills for various HTML 5 "more flexible" layout models.
4
+
5
+ * Flexie.js (Flex box layout)
6
+ * Regions.js (CSS Regions)
7
+ * CSS Template Layout
8
+
9
+ Flexie.js is a polyfill for the [CSS3 Flexbox](http://www.w3.org/TR/css3-flexbox/) module from W3C.
10
+
11
+ 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.
12
+
13
+ [Regions.js](https://github.com/ricardrobin/Regions.js) is the first implementation for the CSS3-Regions in the real world.
14
+
15
+ These polyfills are all packaged for use with the Rails asset pipeline.
16
+ This lets you use and experiment with the new HTML5 CSS layout model in order to simplify and improve your HTML grids and layout :)
17
+
18
+ ## Install
19
+
20
+ `gem 'flexlayout-rails'`
21
+
22
+ ### Flexie.js 2010, Richard Herrera
23
+
24
+ ```text
25
+ //= require flexie
26
+ ```
27
+
28
+ ### Regions.js
29
+
30
+ If you find [this](http://labs.adobe.com/technologies/cssregions/) interesting, just try this script!
31
+
32
+ Regions.js requires [jQuery](http://jquery.com/) and [Lettering.js](https://github.com/davatron5000/Lettering.js) in order to work.
33
+
34
+ ```text
35
+ //= require jquery
36
+ //= require lettering.jquery
37
+ //= require regions.jquery.min
38
+ ```
39
+
40
+ ### Template layout 2011-2012 Pablo Escalada
41
+
42
+ ```text
43
+ //= require template_layout/templateLayout
44
+ ```
45
+
46
+ Not sure how/if to use the template generator and compiler!?
47
+
48
+ ### Template layout 2010, Alexis Deveria
49
+
50
+ ```text
51
+ //= require template_layout/jquery/jquery.tpl_layout1.1.16.min
52
+ ```
53
+
54
+ Enjoy :)
55
+
56
+ ## Flexie usage
57
+
58
+ ```javscript
59
+ var box = new Flexie.box({
60
+ target : document.getElementById("foo"),
61
+ orient : "horizontal",
62
+ align : "stretch",
63
+ direction : "normal",
64
+ pack : "start",
65
+ flexMatrix : [1, 1, 1, 1],
66
+ ordinalMatrix : [0, 0, 0, 0]
67
+ });
68
+ ```
69
+
70
+ The function `flexiebox` wraps this to support are more intuitive DSL, using jQuery to select the element to use as the target:
71
+
72
+ `var box = flexiebox('#foo', options);`
73
+
74
+ Defaults options:
75
+
76
+ ```javascript
77
+ DEFAULTS = {
78
+ orient : "horizontal",
79
+ align : "stretch",
80
+ direction : "inherit",
81
+ pack : "start"
82
+ }
83
+ ```
84
+
85
+ ## Regions.js usage
86
+
87
+ ```javascript
88
+ $(function(){ // When DOM is Loaded
89
+ $("#article-flow").regions(".article-region");
90
+ });
91
+ ```
92
+
93
+ You can also pass a jQuery Object or a list of jQuery Objects / jQuery Selectorstring to the function :
94
+
95
+ ```javascript
96
+ $("#content-source-element").regions($(".content-target-elements"));
97
+
98
+ // or
99
+
100
+ $("#content-source-element").regions(["#article-region-1", "#article-region-2", "#article-region-3"]);
101
+
102
+ // or
103
+
104
+ $("#content-source-element").regions([$("#article-region-1"), $("#article-region-2"), $("#article-region-3")]);
105
+
106
+ // even mixed
107
+
108
+ $("#content-source-element").regions([$("#article-region-1"), "#article-region-2", $("#article-region-3")]);
109
+ ```
110
+
111
+ ## Template layout usage
112
+
113
+ Alexis Deveria version, see repo [css-template-layout](https://code.google.com/p/css-template-layout/) and these [demos](http://a.deveria.com/csstpl/) :)
114
+
115
+ Pablo Escalada version, see repo at [cssTemplateLayout](https://github.com/diesire/cssTemplateLayout) and test folder for examples.
116
+
117
+ ## Flexbox Articles
118
+
119
+ * [Flexbox quick guide](http://www.html5rocks.com/en/tutorials/flexbox/quick/)
120
+
121
+ _Critiques:_
122
+
123
+ * [Why Flexboxes Aren't Good for Page Layout](http://www.xanthir.com/blog/b4580)
124
+ * [Flexbox vs Princess Bride](http://oli.jp/2011/css3-flexbox/)
125
+
126
+ ## Contributing to flexie-rails
127
+
128
+ * Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
129
+ * Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
130
+ * Fork the project.
131
+ * Start a feature/bugfix branch.
132
+ * Commit and push until you are happy with your contribution.
133
+ * Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
134
+ * 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.
135
+
136
+ ## Copyright
137
+
138
+ Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for
139
+ further details.
140
+
data/Rakefile ADDED
@@ -0,0 +1,49 @@
1
+ # encoding: utf-8
2
+
3
+ require 'rubygems'
4
+ require 'bundler'
5
+ begin
6
+ Bundler.setup(:default, :development)
7
+ rescue Bundler::BundlerError => e
8
+ $stderr.puts e.message
9
+ $stderr.puts "Run `bundle install` to install missing gems"
10
+ exit e.status_code
11
+ end
12
+ require 'rake'
13
+
14
+ require 'jeweler'
15
+ Jeweler::Tasks.new do |gem|
16
+ # gem is a Gem::Specification... see http://docs.rubygems.org/read/chapter/20 for more options
17
+ gem.name = "flexlayout-rails"
18
+ gem.homepage = "http://github.com/kristianmandrup/flexlayout-rails"
19
+ gem.license = "MIT"
20
+ gem.summary = %Q{CSS3 layout polyfills pre-packaged for Rails asset pipeline}
21
+ gem.description = %Q{Use CSS Flex, Regions and Template layout models in your Rails apps}
22
+ gem.email = "kmandrup@gmail.com"
23
+ gem.authors = ["Kristian Mandrup"]
24
+ # dependencies defined in Gemfile
25
+ end
26
+ Jeweler::RubygemsDotOrgTasks.new
27
+
28
+ require 'rspec/core'
29
+ require 'rspec/core/rake_task'
30
+ RSpec::Core::RakeTask.new(:spec) do |spec|
31
+ spec.pattern = FileList['spec/**/*_spec.rb']
32
+ end
33
+
34
+ RSpec::Core::RakeTask.new(:rcov) do |spec|
35
+ spec.pattern = 'spec/**/*_spec.rb'
36
+ spec.rcov = true
37
+ end
38
+
39
+ task :default => :spec
40
+
41
+ require 'rdoc/task'
42
+ Rake::RDocTask.new do |rdoc|
43
+ version = File.exist?('VERSION') ? File.read('VERSION') : ""
44
+
45
+ rdoc.rdoc_dir = 'rdoc'
46
+ rdoc.title = "flexlayout-rails #{version}"
47
+ rdoc.rdoc_files.include('README*')
48
+ rdoc.rdoc_files.include('lib/**/*.rb')
49
+ end
data/VERSION ADDED
@@ -0,0 +1 @@
1
+ 0.1.1
@@ -0,0 +1,79 @@
1
+ # Generated by jeweler
2
+ # DO NOT EDIT THIS FILE DIRECTLY
3
+ # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
4
+ # -*- encoding: utf-8 -*-
5
+
6
+ Gem::Specification.new do |s|
7
+ s.name = "flexlayout-rails"
8
+ s.version = "0.1.1"
9
+
10
+ s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
+ s.authors = ["Kristian Mandrup"]
12
+ s.date = "2012-08-28"
13
+ s.description = "Use CSS Flex, Regions and Template layout models in your Rails apps"
14
+ s.email = "kmandrup@gmail.com"
15
+ s.extra_rdoc_files = [
16
+ "LICENSE.txt",
17
+ "README.md"
18
+ ]
19
+ s.files = [
20
+ ".document",
21
+ ".rspec",
22
+ "Gemfile",
23
+ "Gemfile.lock",
24
+ "LICENSE.txt",
25
+ "README.md",
26
+ "Rakefile",
27
+ "VERSION",
28
+ "flexlayout-rails.gemspec",
29
+ "lib/flexlayout-rails.rb",
30
+ "spec/regions/img/lorem-ipsum-logo.jpeg",
31
+ "spec/regions/index.html",
32
+ "spec/regions/js/detection.js",
33
+ "spec/regions/js/layout.js",
34
+ "spec/regions/js/setup.js",
35
+ "spec/spec_helper.rb",
36
+ "vendor/assets/javascripts/feature-detects/cssregions.js",
37
+ "vendor/assets/javascripts/flexie.js",
38
+ "vendor/assets/javascripts/flexie.min.js",
39
+ "vendor/assets/javascripts/jquery.lettering.js",
40
+ "vendor/assets/javascripts/jquery.lettering.min.js",
41
+ "vendor/assets/javascripts/regions.jquery.js",
42
+ "vendor/assets/javascripts/regions.jquery.min.js",
43
+ "vendor/assets/javascripts/template_layout/jquery/jquery.tpl_layout1.1.6.js",
44
+ "vendor/assets/javascripts/template_layout/jquery/jquery.tpl_layout1.1.6.min.js",
45
+ "vendor/assets/javascripts/template_layout/templateLayout.compiler.js",
46
+ "vendor/assets/javascripts/template_layout/templateLayout.generator.js",
47
+ "vendor/assets/javascripts/template_layout/templateLayout.js"
48
+ ]
49
+ s.homepage = "http://github.com/kristianmandrup/flexlayout-rails"
50
+ s.licenses = ["MIT"]
51
+ s.require_paths = ["lib"]
52
+ s.rubygems_version = "1.8.24"
53
+ s.summary = "CSS3 layout polyfills pre-packaged for Rails asset pipeline"
54
+
55
+ if s.respond_to? :specification_version then
56
+ s.specification_version = 3
57
+
58
+ if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
59
+ s.add_development_dependency(%q<rspec>, [">= 2.8.0"])
60
+ s.add_development_dependency(%q<rdoc>, [">= 3.12"])
61
+ s.add_development_dependency(%q<bundler>, [">= 1.0.0"])
62
+ s.add_development_dependency(%q<jeweler>, [">= 1.8.3"])
63
+ s.add_development_dependency(%q<simplecov>, [">= 0.5"])
64
+ else
65
+ s.add_dependency(%q<rspec>, [">= 2.8.0"])
66
+ s.add_dependency(%q<rdoc>, [">= 3.12"])
67
+ s.add_dependency(%q<bundler>, [">= 1.0.0"])
68
+ s.add_dependency(%q<jeweler>, [">= 1.8.3"])
69
+ s.add_dependency(%q<simplecov>, [">= 0.5"])
70
+ end
71
+ else
72
+ s.add_dependency(%q<rspec>, [">= 2.8.0"])
73
+ s.add_dependency(%q<rdoc>, [">= 3.12"])
74
+ s.add_dependency(%q<bundler>, [">= 1.0.0"])
75
+ s.add_dependency(%q<jeweler>, [">= 1.8.3"])
76
+ s.add_dependency(%q<simplecov>, [">= 0.5"])
77
+ end
78
+ end
79
+
@@ -0,0 +1,6 @@
1
+ module FlexLayout
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,120 @@
1
+ <!DOCTYPE html>
2
+ <html class="no-js">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Regions.js Test Suite</title>
6
+
7
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
8
+ <script src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
9
+ <script src="https://raw.github.com/SlexAxton/yepnope.js/master/yepnope.1.5.3-min.js"></script>
10
+ <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
11
+ <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
12
+ <script src="https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
13
+
14
+ <script src="../feature-detects/cssregions.js"></script>
15
+ <script>
16
+ yepnope({
17
+ test: Modernizr.cssregions,
18
+ load: ["js/setup.js", "js/detection.js"],
19
+ nope: ["../regions.jquery.js", "js/layout.js"]
20
+ });
21
+ </script>
22
+ </head>
23
+ <body>
24
+ <h1 id="qunit-header">Regions.js Test Suite</h1>
25
+ <h2 id="qunit-banner"></h2>
26
+ <div id="qunit-testrunner-toolbar"></div>
27
+ <h2 id="qunit-userAgent"></h2>
28
+
29
+ <ol id="qunit-tests"></ol>
30
+ <div id="mod-output"></div>
31
+
32
+ <div id="playground">
33
+ <style type="text/css">
34
+ #article {
35
+ -webkit-flow: "article-flow";
36
+ flow: "article-flow";
37
+ }
38
+ .article-region {
39
+ content: from(article-flow);
40
+ background: #C5DFF0;
41
+ }
42
+ #article-region-1 {
43
+ display: inline-block;
44
+ width: 100px;
45
+ height: 100px;
46
+ }
47
+ #article-region-2 {
48
+ display: inline-block;
49
+ width: 80%;
50
+ height: 100px;
51
+ }
52
+ #article-region-3 {
53
+ display: inline-block;
54
+ margin-top: 20px;
55
+ width: 100%;
56
+ }
57
+
58
+ #alternative-article {
59
+ -webkit-flow: 'foo';
60
+ flow: 'foo'
61
+ }
62
+
63
+ .alternative-region {
64
+ content: from(foo);
65
+
66
+ background: #C5DFF0;
67
+ float: left;
68
+ width: 30%;
69
+ height: 200px;
70
+ margin: 10px;
71
+ }
72
+ </style>
73
+ <h1>A press article</h1>
74
+ <div id="article">
75
+ <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>
76
+ <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>
77
+ <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>
78
+ </div>
79
+ <div class="article-region" id="article-region-1"></div>
80
+ <div class="article-region" id="article-region-2"></div>
81
+ <div class="article-region" id="article-region-3"></div>
82
+ </div>
83
+ <h1>Alternative Query Method</h1>
84
+
85
+ <div id="alternative-article">
86
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo enim, interdum vel iaculis vitae, pellentesque
87
+ sit amet neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
88
+ Aliquam eget velit eu sapien commodo cursus non et orci. Maecenas ut tellus vel risus fermentum convallis in ut
89
+ erat. Maecenas luctus est et dolor posuere non posuere justo congue. Vestibulum a nulla nulla, at porttitor massa.
90
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vehicula consequat
91
+ risus, sit amet dapibus nunc volutpat quis. Donec vel ante vitae velit auctor sodales non eget augue. Nam at justo
92
+ metus. Sed consectetur dui vitae erat aliquet tincidunt. Quisque suscipit, mauris porttitor pharetra cursus, ipsum
93
+ nisl tempor velit, in porta orci risus ac dui. Nam non urna nunc, vel ultrices eros. Suspendisse egestas venenatis
94
+ erat et imperdiet.
95
+ <img id="oversized" src="img/lorem-ipsum-logo.jpeg"/>
96
+ </p>
97
+
98
+
99
+ <p>
100
+ Aenean varius euismod libero, et hendrerit arcu suscipit ut. Curabitur odio leo, tristique a varius at, venenatis
101
+ vel arcu. Cras quis adipiscing leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat ante id
102
+ felis molestie varius scelerisque elit luctus. Mauris sit amet mauris elementum magna mollis hendrerit ac vitae
103
+ ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
104
+ vehicula aliquet erat ac euismod.
105
+ </p>
106
+
107
+ <p>
108
+ Cras non diam sit amet justo elementum convallis sed non elit. Fusce tempor est et ligula sodales pretium.
109
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas laoreet sem eu
110
+ libero aliquet auctor. Praesent justo augue, luctus sed placerat vel, faucibus at mauris. Mauris fringilla, eros
111
+ nec elementum tempor, ligula ante blandit urna, ut ultrices diam massa a nisi. Suspendisse at libero lorem. Morbi
112
+ ac enim eget urna venenatis iaculis.
113
+ </p>
114
+ </div>
115
+ <div class="alternative-region"></div>
116
+ <div class="alternative-region"></div>
117
+ <div class="alternative-region"></div>
118
+ <div class="alternative-region"></div>
119
+ </body>
120
+ </html>