elasticss-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +4 -0
- data/Gemfile +4 -0
- data/README.md +111 -0
- data/Rakefile +1 -0
- data/elasticss-rails.gemspec +26 -0
- data/lib/elasticss-rails/version.rb +5 -0
- data/lib/elasticss-rails.rb +7 -0
- data/lib/generators/elasticss/install/install_generator.rb +16 -0
- data/lib/generators/elasticss/layout/layout_generator.rb +29 -0
- data/lib/generators/elasticss/layout/templates/layout_3_columns.html.erb +41 -0
- data/lib/generators/elasticss/layout/templates/layout_left_sidebar.html.erb +27 -0
- data/lib/generators/elasticss/layout/templates/layout_right_sidebar.html.erb +27 -0
- data/lib/generators/elasticss/templates/application.css +7 -0
- data/lib/generators/elasticss/templates/application.js +9 -0
- data/vendor/.DS_Store +0 -0
- data/vendor/assets/javascripts/elasticss/.DS_Store +0 -0
- data/vendor/assets/javascripts/elasticss/elastic.js +1 -0
- data/vendor/assets/stylesheets/elasticss/.DS_Store +0 -0
- data/vendor/assets/stylesheets/elasticss/elastic.css +17 -0
- data/vendor/assets/stylesheets/elasticss/elastic.print.css +1 -0
- metadata +87 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,111 @@
|
|
1
|
+
# ElastiCSS for Rails 3.1 Asset Pipeline
|
2
|
+
ElastiCSS is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily
|
3
|
+
|
4
|
+
elasticss-rails project integrates ElastiCSS framework for Rails 3.1 Asset Pipeline (Rails 3.2 supported)
|
5
|
+
|
6
|
+
|
7
|
+
## Installing Gem
|
8
|
+
|
9
|
+
Include ElastiCSS in Gemfile;
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem "elasticss-rails"
|
13
|
+
```
|
14
|
+
|
15
|
+
or you can install from latest build;
|
16
|
+
|
17
|
+
```ruby
|
18
|
+
gem 'elasticss-rails', :git => 'git@github.com:kurenn/elasticss-rails.git'
|
19
|
+
```
|
20
|
+
|
21
|
+
You can run bundle from command line
|
22
|
+
|
23
|
+
bundle install
|
24
|
+
|
25
|
+
|
26
|
+
## Installing to App (using Generators)
|
27
|
+
|
28
|
+
You can run following generators to get started with ElastiCSS quickly.
|
29
|
+
|
30
|
+
|
31
|
+
Install (requires directives to Asset pipeline.)
|
32
|
+
|
33
|
+
|
34
|
+
Usage:
|
35
|
+
|
36
|
+
|
37
|
+
rails g elasticss:install
|
38
|
+
|
39
|
+
|
40
|
+
Layout (generates ElastiCSS layout) - (ERB supported)
|
41
|
+
|
42
|
+
|
43
|
+
Usage:
|
44
|
+
|
45
|
+
|
46
|
+
rails g elasticss:layout [LAYOUT_NAME] [LAYOUT_TYPE]
|
47
|
+
|
48
|
+
|
49
|
+
Example:
|
50
|
+
|
51
|
+
|
52
|
+
rails g elasticss:layout application 3_columns
|
53
|
+
|
54
|
+
But wait there is more:
|
55
|
+
|
56
|
+
rails g elasticss:layout application right_sidebar
|
57
|
+
|
58
|
+
rails g elasticss:layout application left_sidebar
|
59
|
+
|
60
|
+
|
61
|
+
## Changelog
|
62
|
+
<ul>
|
63
|
+
<li>Released gem v.0.0.1</li>
|
64
|
+
</ul>
|
65
|
+
|
66
|
+
|
67
|
+
## Contributors & Patches & Forks
|
68
|
+
<ul>
|
69
|
+
<li>Abraham Kuri Vargas</li>
|
70
|
+
</ul>
|
71
|
+
|
72
|
+
## ElastiCSS author & team
|
73
|
+
<ul>
|
74
|
+
<li>Fernando Trasviña (@azendal)</li>
|
75
|
+
<li>Sergio de la Garza (@sgarza)</li>
|
76
|
+
<li>Javier Ayala (@javi_ayala)</li>
|
77
|
+
</ul>
|
78
|
+
|
79
|
+
## Future
|
80
|
+
<ul>
|
81
|
+
<li>Writing tests (not implemented yet)</li>
|
82
|
+
<li>Multiple template extensions support - HAML and SLIM</li>
|
83
|
+
</ul>
|
84
|
+
|
85
|
+
|
86
|
+
## Credits
|
87
|
+
Abraham Kuri - kurenn@icalialabs.com
|
88
|
+
|
89
|
+
[Add Me On Twitter](http://twitter.com/kurenn "Follow me")
|
90
|
+
|
91
|
+
[Add Me On Linkedin](http://www.linkedin.com/pub/abraham-kuri/26/a21/b41 "Add Me On Linkedin")
|
92
|
+
|
93
|
+
[Add Me On Facebook](https://www.facebook.com/kurenn "Add Me On Facebook")
|
94
|
+
|
95
|
+
|
96
|
+
## Score me
|
97
|
+
<img src="https://addons.opera.com/media/extensions/55/14355/1.0.1-rev1/icons/icon_64x64.png"></img>
|
98
|
+
|
99
|
+
You can +K my influence in Ruby on Rails on @klout
|
100
|
+
|
101
|
+
http://klout.com/#/kurenn
|
102
|
+
|
103
|
+
|
104
|
+
## License
|
105
|
+
Copyright (c) 2011 Abraham Kuri Vargas
|
106
|
+
|
107
|
+
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
108
|
+
|
109
|
+
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
110
|
+
|
111
|
+
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/gpl.html.
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,26 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "elasticss-rails/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "elasticss-rails"
|
7
|
+
s.version = Elasticss::Rails::VERSION
|
8
|
+
s.authors = ["Abraham Kuri"]
|
9
|
+
s.email = ["kurenn@icalialabs.com"]
|
10
|
+
s.homepage = ""
|
11
|
+
s.summary = %q{ElastiCSS integration with rails 3.1 Asset pipeline}
|
12
|
+
s.description = %q{Integrate ElastiCSS framework with the rails assets pipeline}
|
13
|
+
|
14
|
+
s.rubyforge_project = "elasticss-rails"
|
15
|
+
|
16
|
+
s.files = `git ls-files`.split("\n")
|
17
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
18
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
19
|
+
s.require_paths = ["lib"]
|
20
|
+
|
21
|
+
s.add_dependency 'therubyracer', '0.10.1'
|
22
|
+
s.add_development_dependency 'rails', '>= 3.1'
|
23
|
+
# specify any dependencies here; for example:
|
24
|
+
# s.add_development_dependency "rspec"
|
25
|
+
# s.add_runtime_dependency "rest-client"
|
26
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
require 'rails/generators'
|
2
|
+
|
3
|
+
module Elasticss
|
4
|
+
module Generators
|
5
|
+
class InstallGenerator < ::Rails::Generators::Base
|
6
|
+
source_root File.expand_path("../../../../../vendor/assets", __FILE__)
|
7
|
+
|
8
|
+
desc 'This generator installs ElastiCSS to Asset Pipeline'
|
9
|
+
|
10
|
+
def add_elasticss
|
11
|
+
directory 'javascripts/elasticss', 'app/assets/javascripts/elasticss'
|
12
|
+
directory 'stylesheets/elasticss', 'app/assets/stylesheets/elasticss'
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
require 'rails/generators'
|
2
|
+
|
3
|
+
module Elasticss
|
4
|
+
module Generators
|
5
|
+
class LayoutGenerator < ::Rails::Generators::Base
|
6
|
+
source_root File.expand_path("../templates", __FILE__)
|
7
|
+
|
8
|
+
desc 'This generator generates layout file navigation.'
|
9
|
+
|
10
|
+
argument :layout_name, :type => :string, :default => "application"
|
11
|
+
argument :layout_type, :type => :string, :default => "3_columns",
|
12
|
+
:banner => "3 columns layout"
|
13
|
+
argument :layout_type, :type => :string, :default => "right_sidebar",
|
14
|
+
:banner => "right sidebar"
|
15
|
+
argument :layout_type, :type => :string, :default => "left_sidebar",
|
16
|
+
:banner => "left sidebar"
|
17
|
+
|
18
|
+
attr_reader :app_name
|
19
|
+
|
20
|
+
def generate_layout
|
21
|
+
app = ::Rails.application
|
22
|
+
@app_name = app.class.to_s.split("::").first
|
23
|
+
ext = app.config.generators.options[:rails][:template_engine] || :erb
|
24
|
+
template "layout_#{layout_type}.html.#{ext}", "app/views/layouts/application.html.#{ext}"
|
25
|
+
end
|
26
|
+
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title><%= app_name %></title>
|
5
|
+
<%%= stylesheet_link_tag "application", :media => "all" %>
|
6
|
+
<%%= csrf_meta_tags %>
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
|
10
|
+
<div id="content">
|
11
|
+
<div class="unit">
|
12
|
+
<div class="columns on-3">
|
13
|
+
<div class="column">
|
14
|
+
<div class="container">
|
15
|
+
<ul>
|
16
|
+
<li><%%= link_to "Link 1", '#'%></li>
|
17
|
+
<li><%%= link_to "Link 2", '#'%></li>
|
18
|
+
<li><%%= link_to "Link 3", '#'%></li>
|
19
|
+
</ul>
|
20
|
+
</div>
|
21
|
+
</div> <!-- column -->
|
22
|
+
<div class="column">
|
23
|
+
<div class="container">
|
24
|
+
<%%= yield %>
|
25
|
+
</div>
|
26
|
+
</div> <!-- column -->
|
27
|
+
<div class="column">
|
28
|
+
<div class="container">
|
29
|
+
RIGHT CONTENT
|
30
|
+
</div>
|
31
|
+
</div> <!-- column -->
|
32
|
+
</div>
|
33
|
+
</div> <!-- unit -->
|
34
|
+
</div> <!-- content -->
|
35
|
+
|
36
|
+
<!-- Javascripts -->
|
37
|
+
|
38
|
+
<!-- Placed at the end of the document so the pages load faster -->
|
39
|
+
<%%= javascript_include_tag "application" %>
|
40
|
+
</body>
|
41
|
+
</html>
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title><%= app_name %></title>
|
5
|
+
<%%= stylesheet_link_tag "application", :media => "all" %>
|
6
|
+
<%%= csrf_meta_tags %>
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
<div id="content">
|
10
|
+
<div class="unit">
|
11
|
+
<div class="columns on-3">
|
12
|
+
<div class="column">
|
13
|
+
SIDEBAR
|
14
|
+
</div> <!-- left content -->
|
15
|
+
<div class="column span-2">
|
16
|
+
<%%= yield %>
|
17
|
+
</div> <!-- sidebar -->
|
18
|
+
</div>
|
19
|
+
</div> <!-- unit -->
|
20
|
+
</div> <!-- content -->
|
21
|
+
|
22
|
+
<!-- Javascripts -->
|
23
|
+
|
24
|
+
<!-- Placed at the end of the document so the pages load faster -->
|
25
|
+
<%%= javascript_include_tag "application" %>
|
26
|
+
</body>
|
27
|
+
</html>
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title><%= app_name %></title>
|
5
|
+
<%%= stylesheet_link_tag "application", :media => "all" %>
|
6
|
+
<%%= csrf_meta_tags %>
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
<div id="content">
|
10
|
+
<div class="unit">
|
11
|
+
<div class="columns on-3">
|
12
|
+
<div class="column span-2">
|
13
|
+
<%%= yield %>
|
14
|
+
</div> <!-- left content -->
|
15
|
+
<div class="column sidebar">
|
16
|
+
SIDEBAR
|
17
|
+
</div> <!-- sidebar -->
|
18
|
+
</div>
|
19
|
+
</div> <!-- unit -->
|
20
|
+
</div> <!-- content -->
|
21
|
+
|
22
|
+
<!-- Javascripts -->
|
23
|
+
|
24
|
+
<!-- Placed at the end of the document so the pages load faster -->
|
25
|
+
<%%= javascript_include_tag "application" %>
|
26
|
+
</body>
|
27
|
+
</html>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll automatically include all the stylesheets available in this directory
|
3
|
+
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
|
4
|
+
* the top of the compiled file, but it's generally better to create a new file per style scope.
|
5
|
+
*= require_self
|
6
|
+
*= require_tree .
|
7
|
+
*/
|
@@ -0,0 +1,9 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into including all the files listed below.
|
2
|
+
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
|
3
|
+
// be included in the compiled file accessible from http://example.com/assets/application.js
|
4
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
5
|
+
// the compiled file.
|
6
|
+
//
|
7
|
+
//= require jquery
|
8
|
+
//= require jquery_ujs
|
9
|
+
//= require_tree .
|
data/vendor/.DS_Store
ADDED
Binary file
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
var Elastic=function Elastic(context,includeContext){var helper,columnsElements,i,l,columnsIterator,$context,columnsElementsArr;context=context||document;$context=$(context);columnsElements=Elastic.querySelectorAll(".columns",context);if(includeContext!==false&&Elastic.configuration.includeContext===true){columnsElementsArr=[];if($context.hasClass("columns")){columnsElementsArr.push(context)}for(i=0,l=columnsElements.length;i<l;i++){columnsElementsArr.push(columnsElements[i])}columnsElements=columnsElementsArr}l=columnsElements.length;columnsIterator=Elastic.columnsIterator;for(i=0;i<l;i++){columnsIterator(columnsElements[i])}for(helper in Elastic.helpers){if(Elastic.helpers.hasOwnProperty(helper)){Elastic.helpers[helper]($context)}}};Elastic.VERSION="2.1.0 RC2";Elastic.COLUMNS_PER_ROW_EXPRESSION=/(^|\s+)on\-(\d+)(\s+|$)/;Elastic.COLUMN_SPAN_EXPRESSION=/(^|\s+)span\-(\d+)(\s+|$)/;Elastic.FIXED_COLUMN_EXPRESSION=/(^|\s+)fixed(\s+|$)/;Elastic.ELASTIC_COLUMN_EXPRESSION=/(^|\s+)elastic(\s+|$)/;Elastic.ADAPTIVE_COLUMNS_EXPRESSION=/(^|\s+)adaptive\-(\d+)\-(\d+)(\s+|$)/;Elastic.FINAL_COLUMN_EXPRESSION=/(^|\s+)final(\s+|$)/;Elastic.DISPLAY_LAYOUT_EXPRESSION=/(^|\s+)display\s+([\w\_\-\d]+)(\s+|$)/;Elastic.configuration={refreshOnResize:true,includeContext:true};Elastic.columnsIterator=function columnsElementsIteration(columnsElement){var i,l,container,columnElements,lastColumn,columnsPerRow,containerWidth,columnWidths,elasticColumns,rowColumns,columnsOnRow,nextColumnsOnRow,fixedColumnsWidth,currentColumn,fixedColumnWidth,minWidth,maxWidth;container=Elastic.querySelectorAll("> .container",columnsElement)[0]||columnsElement;columnElements=Elastic.querySelectorAll("> .column",container);if(columnElements.length===0){return}lastColumn=columnElements[columnElements.length-1];columnsPerRow=Elastic.getColumnsPerRow(columnsElement,columnElements);containerWidth=Elastic.getInnerWidth(container);columnWidths=Elastic.round(containerWidth,columnsPerRow);if(Elastic.ADAPTIVE_COLUMNS_EXPRESSION.test(columnsElement.className)){minWidth=Number(RegExp.$2);maxWidth=Number(RegExp.$3);if(columnWidths[0].width>maxWidth){while(columnWidths[0].width>maxWidth){columnsPerRow=columnsPerRow+1;columnWidths=Elastic.round(containerWidth,columnsPerRow);if(columnWidths[0].width<minWidth){break}}}if(columnWidths[0].width<minWidth){while(columnWidths[0].width<minWidth){columnsPerRow=columnsPerRow-1;columnWidths=Elastic.round(containerWidth,columnsPerRow);if(columnWidths[0].width>maxWidth){break}}}}elasticColumns=[];rowColumns=[];columnsOnRow=0;nextColumnsOnRow=0;fixedColumnsWidth=0;for(i=0,l=columnElements.length;i<l;i++){currentColumn=columnElements[i];if(Elastic.FIXED_COLUMN_EXPRESSION.test(currentColumn.className)){fixedColumnWidth=Elastic.getOuterWidth(currentColumn);currentColumn.columnWidth=fixedColumnWidth;currentColumn.isFixed=true;fixedColumnsWidth+=fixedColumnWidth}else{if(Elastic.ELASTIC_COLUMN_EXPRESSION.test(currentColumn.className)){currentColumn.isElastic=true;elasticColumns.push(currentColumn)}else{currentColumn.isRegular=true}}if(Elastic.FINAL_COLUMN_EXPRESSION.test(currentColumn.className)){currentColumn.isFinal=true}nextColumnsOnRow=columnsOnRow+currentColumn.spanWidth;if(nextColumnsOnRow>=columnsPerRow||currentColumn===lastColumn||currentColumn.isFinal){if(nextColumnsOnRow<=columnsPerRow){rowColumns.push(currentColumn)}Elastic.processRow(rowColumns,containerWidth,fixedColumnsWidth,elasticColumns,columnWidths);if(nextColumnsOnRow>columnsPerRow){if(currentColumn.isFixed){fixedColumnsWidth=fixedColumnWidth}columnsOnRow=currentColumn.spanWidth;nextColumnsOnRow=currentColumn.spanWidth;if(currentColumn.isElastic){elasticColumns=[currentColumn]}rowColumns=[currentColumn];if(currentColumn===lastColumn){Elastic.processRow(rowColumns,containerWidth,fixedColumnsWidth,elasticColumns,columnWidths)}}else{fixedColumnsWidth=0;columnsOnRow=0;nextColumnsOnRow=0;elasticColumns=[];rowColumns=[]}continue}rowColumns.push(currentColumn);columnsOnRow+=currentColumn.spanWidth}return this};Elastic.getColumnsPerRow=function getColumnsPerRow(columnsElement,columnElements){var i,l,columnsPerRow,fixedColumnsPerRow;columnsPerRow=columnElements.length;fixedColumnsPerRow=false;if(Elastic.COLUMNS_PER_ROW_EXPRESSION.test(columnsElement.className)){columnsPerRow=Number(RegExp.$2);fixedColumnsPerRow=true}for(i=0,l=columnElements.length;i<l;i++){if(Elastic.COLUMN_SPAN_EXPRESSION.test(columnElements[i].className)){columnElements[i].spanWidth=Number(RegExp.$2);if(fixedColumnsPerRow!==true){columnsPerRow+=columnElements[i].spanWidth-1}}else{columnElements[i].spanWidth=1}}return columnsPerRow};Elastic.processRow=function processRow(columns,containerWidth,fixedColumnsWidth,elasticColumns,columnWidths){var currentColumn,computedWidth,columnPosition,columnsWidth,lastColumn,i,j,l,elasticColumnWidths,elasticColumnsWidth;if(fixedColumnsWidth>=containerWidth){return}computedWidth=0;columnPosition=0;columnsWidth=fixedColumnsWidth;lastColumn=columns[columns.length-1];if(lastColumn.className.indexOf("elastic-row-last")==-1){lastColumn.className=lastColumn.className+" elastic-row-last"}for(i=0,l=columns.length;i<l;i++){currentColumn=columns[i];if(currentColumn.isRegular){if(currentColumn.spanWidth>=columnWidths.length){currentColumn.style.width=containerWidth+"px";continue}for(j=columnPosition;j<(columnPosition+currentColumn.spanWidth);j++){computedWidth+=columnWidths[j].width}columnsWidth+=computedWidth;columnPosition+=currentColumn.spanWidth;currentColumn.style.width=computedWidth+"px";computedWidth=0}}if(elasticColumns.length>0){elasticColumnsWidth=0;elasticColumnWidths=Elastic.round(containerWidth-columnsWidth,elasticColumns.length);for(i=0,l=elasticColumns.length;i<l;i++){elasticColumnsWidth+=elasticColumnWidths[i].width;elasticColumns[i].style.width=elasticColumnWidths[i].width+"px"}}if(lastColumn.isFinal){lastColumn.style.marginRight=(containerWidth-columnsWidth-(elasticColumnsWidth||0))+"px"}};Elastic.round=function ElasticRoundingAlgorithm(containerWidth,columns){var cache,i,column,columnPercentage,columnWidths,columnWidth,columnWidthTally,difference,absDifference,positionDivision,increment,direction;cache=Elastic.round.cache;if(cache[containerWidth]&&cache[containerWidth][columns]){return cache[containerWidth][columns]}columnPercentage=100/columns;columnWidths=[];columnWidth=Math.round(containerWidth*(columnPercentage/100));columnWidthTally=columnWidth*columns;for(i=0;i<columns;i++){columnWidths.push({width:columnWidth})}difference=containerWidth-columnWidthTally;absDifference=Math.abs(difference);positionDivision=columns/(absDifference+1);increment=(difference>0);direction=-1;if(difference!==0){for(i=1;i<=(Math.abs(difference));i++){if(direction==-1){column=columnWidths[columnWidths.length-Math.floor(positionDivision*Math.round(i/2))]}else{column=columnWidths[Math.floor(positionDivision*Math.round(i/2))-1]}if(increment){column.width=columnWidth+1}else{column.width=columnWidth-1}direction=direction*-1}}if(!cache[containerWidth]){cache[containerWidth]={}}cache[containerWidth][columns]=columnWidths;return columnWidths};Elastic.round.cache={};Elastic.helpers={"full-width":function fullWidthHelper($context,includeContext){var i,$element,$elements,elementsLength,elementsArr;$elements=$context.find(".full-width");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("full-width")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}elementsLength=$elements.length;for(i=0;i<elementsLength;i++){$element=$($elements[i]);$element.width($element.parent().width()-($element.outerWidth(true)-$element.width()))}return this},"same-height":function sameHeightHelper($context,includeContext){var i,j,currentHeight,maxHeight,$elementColumns,elementColumnsLength,$elements,elementsLength,elementsArr;$elements=$context.find(".same-height");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("same-height")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}elementsLength=$elements.length;for(i=0;i<elementsLength;i++){$elementColumns=$($elements[i]).find("> *");elementColumnsLength=$elementColumns.length;maxHeight=0;for(j=0;j<elementColumnsLength;j++){currentHeight=$($elementColumns[j]).outerHeight(true);maxHeight=(maxHeight>currentHeight)?maxHeight:currentHeight}for(j=0;j<elementColumnsLength;j++){$($elementColumns[j]).css("height",maxHeight)}}return this},"same-row-height":function($context,includeContext){var i,j,k,currentHeight,maxHeight,$elementColumns,elementColumnsLength,$elements,elementsLength,elementsArr;$elements=$context.find(".same-row-height");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("same-row-height")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}elementsLength=$elements.length;for(i=0;i<elementsLength;i++){$elementColumns=$($elements[i]).find("> *");elementColumnsLength=$elementColumns.length;maxHeight=0;var rowColumns=[];for(j=0;j<elementColumnsLength;j++){currentHeight=$($elementColumns[j]).outerHeight(true);maxHeight=(maxHeight>currentHeight)?maxHeight:currentHeight;rowColumns.push($elementColumns[j]);if($($elementColumns[j]).hasClass("elastic-row-last")){for(k=0;k<rowColumns.length;k++){$(rowColumns[k]).css("height",maxHeight)}maxHeight=0;rowColumns=[]}}}return this},"same-min-height":function sameMinHeightHelper($context,includeContext){var i,j,currentHeight,maxHeight,$elementColumns,elementColumnsLength,$elements,elementsLength,elementsArr;$elements=$context.find(".same-min-height");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("same-min-height")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}elementsLength=$elements.length;for(i=0;i<elementsLength;i++){$elementColumns=$($elements[i]).find("> *");elementColumnsLength=$elementColumns.length;maxHeight=0;for(j=0;j<elementColumnsLength;j++){currentHeight=$($elementColumns[j]).outerHeight(true);maxHeight=(maxHeight>currentHeight)?maxHeight:currentHeight}for(j=0;j<elementColumnsLength;j++){$($elementColumns[j]).css("min-height",maxHeight)}}return this},"full-height":function fullHeightHelper($context,includeContext){var i,$element,newHeight,$elements,elementsLength,elementsArr;$elements=$context.find(".full-height");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("full-height")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}elementsLength=$elements.length;for(i=0;i<elementsLength;i++){$element=$($elements[i]);newHeight=$element.parent().height()-($element.outerHeight(true)-$element.height());if(newHeight<0||isNaN(Number(newHeight))){continue}$element.css("height",newHeight)}return this},"full-min-height":function fullMinHeightHelper($context,includeContext){var i,$element,newHeight,$elements,elementsLength,elementsArr;$elements=$context.find(".full-min-height");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("full-min-height")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}elementsLength=$elements.length;for(var i=0;i<elementsLength;i++){$element=$($elements[i]);newHeight=$element.parent().height()-($element.outerHeight(true)-$element.height());if(newHeight<0||isNaN(Number(newHeight))){continue}$element.css("min-height",newHeight)}return this},"elastic-height":function elasticHeightHelper($context,includeContext){var i,j,$elements,$siblings,siblingsLength,siblingsHeight,elementsLength,elementsArr;$elements=$context.find(".elastic-height");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("elastic-height")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}siblingsHeight=0;elementsLength=$elements.length;for(var i=0;i<elementsLength;i++){$element=$($elements[i]);$siblings=$element.parent().find("> *:not(.elastic-height)");siblingsLength=$siblings.length;siblingsHeight=0;for(var j=0;j<siblingsLength;j++){siblingsHeight=siblingsHeight+$($siblings[j]).outerHeight(true)}if(siblingsHeight<0||isNaN(Number(siblingsHeight))){continue}$element.css("height",$element.parent().height()-siblingsHeight)}return this},"center":function centerHelper($context,includeContext){var i,$elements,$elementsLength,$element,paddingTop,$parent,elementsArr;$elements=$context.find(".vertical-center, .center");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("vertical-center")||$context.hasClass("center")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}$elementsLength=$elements.length;paddingTop=0;for(var i=0;i<$elementsLength;i++){$element=$($elements[i]);$parent=$($elements[i]).parent();paddingTop=Math.round(($parent.height()-$element.outerHeight(true))/2);if(paddingTop<0||isNaN(Number(paddingTop))){continue}$parent.css({paddingTop:paddingTop+"px",height:($parent.css("height"))?($parent.outerHeight()-paddingTop):""})}return this},"bottom":function bottomHelper($context,includeContext){var i,$elements,$elementsLength,$element,paddingTop,$parent,elementsArr;var $elements=$context.find(".bottom");if(includeContext!==false&&Elastic.configuration.includeContext===true){elementsArr=[];if($context.hasClass("bottom")){elementsArr.push($context[0])}for(i=0,l=$elements.length;i<l;i++){elementsArr.push($elements[i])}$elements=elementsArr}var $elementsLength=$elements.length;var paddingTop=0;for(var i=0;i<$elementsLength;i++){$element=$($elements[i]);$parent=$($elements[i]).parent();paddingTop=Math.round($parent.height()-$element.outerHeight(true));if(paddingTop<0||isNaN(Number(paddingTop))){continue}$parent.css({paddingTop:paddingTop+"px",height:($parent.css("height"))?($parent.outerHeight()-paddingTop):""})}return this}};Elastic.$window=$(window);Elastic.$documentElement=$(document);Elastic.reset=function Elastic_reset(context,includeContext){var i,w,wl,h,hl,p,pl,m,ml,n,nl,doc;doc=Elastic.$documentElement;$context=$(context||document);doc.trigger("elastic:beforeReset");h=$context.find(".same-height > *, same-row-height > *, .full-height, .elastic-height");n=$context.find(".same-min-height > *, .full-min-height");p=$context.find(".vertical-center, .center, .bottom");w=$context.find(".column:not(.fixed), .full-width");m=$context.find(".column.final");$context.find(".same-row-height > .elastic-row-last").removeClass("elastic-row-last");if(includeContext!==false&&Elastic.configuration.includeContext===true){if($context.hasClass("same-height")||$context.hasClass("same-row-height")){$context.find("> *").each(function(){this.style.height=""})}if($context.hasClass("full-height")||$context.hasClass("elastic-height")){$context.css("height","")}}for(i=0,hl=h.length;i<hl;i++){h[i].style.height=""}if(includeContext!==false&&Elastic.configuration.includeContext===true){if($context.hasClass("same-min-height")){$context.find("> *").each(function(){this.style.minHeight=""})}if($context.hasClass("full-min-height")){$context.css("minHeight","")}}for(i=0,nl=n.length;i<nl;i++){n[i].style.minHeight=""}if(includeContext!==false&&Elastic.configuration.includeContext===true){if($context.hasClass("vertical-center")||$context.hasClass("center")||$context.hasClass("bottom")){$context.parent().css("paddingTop","");$context.parent().css("height","")}}for(i=0,pl=p.length;i<pl;i++){p[i].parentNode.style.paddingTop="";p[i].parentNode.style.height=""}if(includeContext!==false&&Elastic.configuration.includeContext===true){if(($context.hasClass("column")&&!$context.hasClass("fixed"))||$context.hasClass("full-width")){$context.css("width","")}}for(i=0,wl=w.length;i<wl;i++){w[i].style.width=""}if(includeContext!==false&&Elastic.configuration.includeContext===true){if($context.hasClass("column")&&$context.hasClass("final")){$context.css("marginLeft","");$context.css("marginRight","")}}for(i=0,ml=m.length;i<ml;i++){m[i].style.marginLeft="";m[i].style.marginRight=""}doc.trigger("elastic:reset");return this};Elastic.refresh=function Elastic_refresh(context,includeContext){var doc=Elastic.$documentElement;doc.trigger("elastic:beforeRefresh",context);Elastic.reset(context)(context);doc.trigger("elastic:refresh",context);return this};Elastic.getComputedStyle=function getComputedStyle(element){if(element.currentStyle){Elastic.getComputedStyle=function(element){return element.currentStyle};return element.currentStyle}Elastic.getComputedStyle=function(element){return window.getComputedStyle(element,true)};return window.getComputedStyle(element,true)};Elastic.getInnerWidth=function(element){var computedStyle,innerWidth;computedStyle=Elastic.getComputedStyle(element);innerWidth=parseFloat((computedStyle.width=="auto")?element.clientWidth:computedStyle.width.replace("px",""));if(computedStyle.width=="auto"){innerWidth=innerWidth-parseFloat(computedStyle.paddingLeft.replace("px",""))-parseFloat(computedStyle.paddingRight.replace("px",""))-parseFloat(computedStyle.borderLeftWidth.replace("px",""))-parseFloat(computedStyle.borderRightWidth.replace("px",""))}else{if(computedStyle.boxSizing=="border-box"&&!computedStyle.MozBoxSizing&&!computedStyle.MsBoxSizing){innerWidth=innerWidth-parseFloat(computedStyle.borderLeftWidth.replace("px",""))-parseFloat(computedStyle.borderRightWidth.replace("px",""))}}if(isNaN(innerWidth)){innerWidth=$(element).width()}return Math.floor(innerWidth)};Elastic.getOuterWidth=function(element){var computedStyle,innerWidth,outerWidth;computedStyle=Elastic.getComputedStyle(element);innerWidth=parseFloat((computedStyle.width=="auto")?element.clientWidth:computedStyle.width.replace("px",""));if(computedStyle.width=="auto"){innerWidth=innerWidth-parseFloat(computedStyle.paddingLeft.replace("px",""))-parseFloat(computedStyle.paddingRight.replace("px",""))-parseFloat(computedStyle.borderLeftWidth.replace("px",""))-parseFloat(computedStyle.borderRightWidth.replace("px",""))}outerWidth=innerWidth+parseFloat(computedStyle.marginLeft.replace("px",""))+parseFloat(computedStyle.marginRight.replace("px",""));if(isNaN(outerWidth)){outerWidth=$(element).outerWidth(true)}return Math.ceil(outerWidth)};Elastic.querySelectorAll=function(selector,context){var result;if(document.querySelectorAll){if(context){if(selector.substr(0,1)==">"){if(context.id){result=document.querySelectorAll("#"+context.id+selector)}else{context.id="___elastic_temporal_id___";result=document.querySelectorAll("#"+context.id+selector);context.id=""}}else{result=context.querySelectorAll(selector)}}else{result=document.querySelectorAll(selector)}}else{if(context){result=$(context).find(selector)}else{result=$(selector)}}return result};Elastic.$documentElement.bind("elastic:beforeInitialize",function(){var r=Elastic.DISPLAY_LAYOUT_EXPRESSION;$(".display").each(function Elastic_layout(){var c;if(r.test(this.className)){c=".position-"+RegExp.$2;$(c).removeClass(c).appendTo(this)}});return null});jQuery.fn.ready(function Loader(){var doc=Elastic.$documentElement;var iw=document.body.clientWidth;doc.trigger("elastic:beforeInitialize");Elastic();if(iw!=document.body.clientWidth){document.body.style.overflow="hidden";Elastic.refresh();document.body.style.overflow=""}jQuery(window).bind("resize",function ElasticResizeHandler(){if(Elastic.configuration.refreshOnResize){Elastic.refresh()}});doc.bind("elastic",Elastic.refresh);doc.trigger("elastic:initialize");return null});
|
Binary file
|
@@ -0,0 +1,17 @@
|
|
1
|
+
/*
|
2
|
+
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
|
3
|
+
Code licensed under the BSD License:
|
4
|
+
http://developer.yahoo.net/yui/license.txt
|
5
|
+
version: 3.0.0pr1
|
6
|
+
*/
|
7
|
+
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}li {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select {*font-size:100%;}legend {color:#000;}h1 {font-size : 138.5%; }h2 {font-size : 123.1%; }h3 {font-size : 108%; }h1,h2,h3 {margin : 1em 0;}h1,h2,h3,h4,h5,h6,strong {font-weight : bold; }abbr,acronym {border-bottom : 1px dotted #000;cursor : help;} em {font-style : italic;}blockquote,ul,ol,dl {margin : 1em;}ol,ul,dl {margin-left : 2em;}ol li {list-style : decimal outside;}ul li {list-style : disc outside;}dl dd {margin-left : 1em;}th {font-weight : bold;text-align : center;}caption {margin-bottom : .5em;text-align : center;}p,fieldset,table,pre {margin-bottom : 1em;}input[type=text],input[type=password],textarea{width : 12.25em;*width : 11.9em;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea {font:99% arial,helvetica,clean,sans-serif;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;}
|
8
|
+
|
9
|
+
/*
|
10
|
+
Elastic CSS Framework
|
11
|
+
Released under the MIT, BSD, and GPL Licenses.
|
12
|
+
More information http://elasticss.com
|
13
|
+
|
14
|
+
@author Fernando Trasviña (@azendal)
|
15
|
+
@core team Sergio de la Garza (@sgarza), Javier Ayala (@javi_ayala)
|
16
|
+
*/
|
17
|
+
.unit:after,.container:after,.columns:after,.column:after,.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.unit,.container,.columns,.column,.clearfix{display:block;*zoom:1;*display:inline-block;}.full-height{display:block;}.same-height{display:block;}.elastic-height{height:0;}.horizontal-center{margin:0 auto;}.vertical-center{/* margin:auto 0; */display:block;}.center{/* margin:auto */margin:0 auto;}.column{float:left;}.column.final{display:block;}.column.fixed{width:auto;}.column.elastic{display:block;}.inverted>.column,.inverted>.container>.column{float:right;}.on-2.columns>.column:not(.fixed),.on-2.columns>.container>.column:not(.fixed){width:50%;}.on-3.columns>.column:not(.fixed),.on-3.columns>.container>.column:not(.fixed){width:33.33%;}.on-3.columns>.column.span-2,.on-3.columns>.container>.column.span-2{width:66.66%;}.on-4.columns>.column:not(.fixed),.on-4.columns>.container>.column:not(.fixed){width:25%;}.on-4.columns>.column.span-2,.on-4.columns>.container>.column.span-2{width:50%;}.on-4.columns>.column.span-3,.on-4.columns>.container>.column.span-2{width:75%;}
|
@@ -0,0 +1 @@
|
|
1
|
+
.print-only{display:none;}.no-print{display:none;}.no-print-content{visibility:hidden;}.print-only,div.print-only{display:block;}span.print-only,label.print-only{display:inline;}table.print-only{display:table;}tr.print-only{display:table-row;}td.print-only{display:table-cell;}
|
metadata
ADDED
@@ -0,0 +1,87 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: elasticss-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Abraham Kuri
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-06-26 00:00:00.000000000Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: therubyracer
|
16
|
+
requirement: &70134300671160 !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - =
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 0.10.1
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: *70134300671160
|
25
|
+
- !ruby/object:Gem::Dependency
|
26
|
+
name: rails
|
27
|
+
requirement: &70134300670560 !ruby/object:Gem::Requirement
|
28
|
+
none: false
|
29
|
+
requirements:
|
30
|
+
- - ! '>='
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '3.1'
|
33
|
+
type: :development
|
34
|
+
prerelease: false
|
35
|
+
version_requirements: *70134300670560
|
36
|
+
description: Integrate ElastiCSS framework with the rails assets pipeline
|
37
|
+
email:
|
38
|
+
- kurenn@icalialabs.com
|
39
|
+
executables: []
|
40
|
+
extensions: []
|
41
|
+
extra_rdoc_files: []
|
42
|
+
files:
|
43
|
+
- .gitignore
|
44
|
+
- Gemfile
|
45
|
+
- README.md
|
46
|
+
- Rakefile
|
47
|
+
- elasticss-rails.gemspec
|
48
|
+
- lib/elasticss-rails.rb
|
49
|
+
- lib/elasticss-rails/version.rb
|
50
|
+
- lib/generators/elasticss/install/install_generator.rb
|
51
|
+
- lib/generators/elasticss/layout/layout_generator.rb
|
52
|
+
- lib/generators/elasticss/layout/templates/layout_3_columns.html.erb
|
53
|
+
- lib/generators/elasticss/layout/templates/layout_left_sidebar.html.erb
|
54
|
+
- lib/generators/elasticss/layout/templates/layout_right_sidebar.html.erb
|
55
|
+
- lib/generators/elasticss/templates/application.css
|
56
|
+
- lib/generators/elasticss/templates/application.js
|
57
|
+
- vendor/.DS_Store
|
58
|
+
- vendor/assets/javascripts/elasticss/.DS_Store
|
59
|
+
- vendor/assets/javascripts/elasticss/elastic.js
|
60
|
+
- vendor/assets/stylesheets/elasticss/.DS_Store
|
61
|
+
- vendor/assets/stylesheets/elasticss/elastic.css
|
62
|
+
- vendor/assets/stylesheets/elasticss/elastic.print.css
|
63
|
+
homepage: ''
|
64
|
+
licenses: []
|
65
|
+
post_install_message:
|
66
|
+
rdoc_options: []
|
67
|
+
require_paths:
|
68
|
+
- lib
|
69
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
70
|
+
none: false
|
71
|
+
requirements:
|
72
|
+
- - ! '>='
|
73
|
+
- !ruby/object:Gem::Version
|
74
|
+
version: '0'
|
75
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
76
|
+
none: false
|
77
|
+
requirements:
|
78
|
+
- - ! '>='
|
79
|
+
- !ruby/object:Gem::Version
|
80
|
+
version: '0'
|
81
|
+
requirements: []
|
82
|
+
rubyforge_project: elasticss-rails
|
83
|
+
rubygems_version: 1.8.12
|
84
|
+
signing_key:
|
85
|
+
specification_version: 3
|
86
|
+
summary: ElastiCSS integration with rails 3.1 Asset pipeline
|
87
|
+
test_files: []
|