avante_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 +6 -0
- data/Rakefile +1 -0
- data/avante_rails.gemspec +22 -0
- data/lib/avante_rails.rb +4 -0
- data/lib/avante_rails/engine.rb +5 -0
- data/lib/avante_rails/generators/USAGE +14 -0
- data/lib/avante_rails/generators/install.rb +20 -0
- data/lib/avante_rails/generators/layout.rb +26 -0
- data/lib/avante_rails/generators/templates/application.css +5 -0
- data/lib/avante_rails/generators/templates/application.html.erb +28 -0
- data/lib/avante_rails/generators/templates/application.html.haml +20 -0
- data/lib/avante_rails/version.rb +3 -0
- data/vendor/assets/stylesheets/avante/core/base.scss +80 -0
- data/vendor/assets/stylesheets/avante/core/helpers.scss +44 -0
- data/vendor/assets/stylesheets/avante/grid/desktop.scss +123 -0
- data/vendor/assets/stylesheets/avante/grid/mobile.scss +90 -0
- data/vendor/assets/stylesheets/avante/grid/tablet.scss +61 -0
- data/vendor/assets/stylesheets/avante/index.scss +17 -0
- data/vendor/assets/stylesheets/avante/patterns/alerts.scss +74 -0
- data/vendor/assets/stylesheets/avante/patterns/buttons.scss +88 -0
- data/vendor/assets/stylesheets/avante/patterns/forms.scss +115 -0
- data/vendor/assets/stylesheets/avante/patterns/markers.scss +17 -0
- data/vendor/assets/stylesheets/avante/patterns/pagination.scss +50 -0
- data/vendor/assets/stylesheets/avante/patterns/tables.scss +84 -0
- data/vendor/assets/stylesheets/avante/patterns/tabs.scss +129 -0
- data/vendor/assets/stylesheets/avante/patterns/top-bar.scss +101 -0
- data/vendor/assets/stylesheets/avante/support/_mixins.scss +126 -0
- data/vendor/assets/stylesheets/avante/vendor/normalize.scss +431 -0
- metadata +86 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
data/Rakefile
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require "bundler/gem_tasks"
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
|
3
|
+
require "avante_rails/version"
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |s|
|
|
6
|
+
s.name = "avante_rails"
|
|
7
|
+
s.version = AvanteRails::VERSION
|
|
8
|
+
s.authors = ["Daniel Lopes"]
|
|
9
|
+
s.email = ["avante@objetiva.co"]
|
|
10
|
+
s.homepage = "http://avante.objetiva.co/"
|
|
11
|
+
s.summary = %q{Visual agnostic css foundation.}
|
|
12
|
+
s.description = %q{Highly customizable, plugable and mobile friendly css framework.}
|
|
13
|
+
|
|
14
|
+
s.rubyforge_project = "avante_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_runtime_dependency "rails", ">= 3.1.0"
|
|
22
|
+
end
|
data/lib/avante_rails.rb
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Description:
|
|
2
|
+
Add Avante to your app asset pipeline
|
|
3
|
+
|
|
4
|
+
Example:
|
|
5
|
+
rails g avante:install
|
|
6
|
+
|
|
7
|
+
Replaces the default application assets:
|
|
8
|
+
/app/assets/javascripts/application.js
|
|
9
|
+
/app/assets/stylesheets/application.css
|
|
10
|
+
|
|
11
|
+
rails generate avante:layout
|
|
12
|
+
|
|
13
|
+
This creates the layout application.html.erb
|
|
14
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
require 'rails/generators'
|
|
2
|
+
|
|
3
|
+
module Avante
|
|
4
|
+
module Generators
|
|
5
|
+
|
|
6
|
+
class Install < Rails::Generators::Base
|
|
7
|
+
source_root File.join(File.dirname(__FILE__), 'templates')
|
|
8
|
+
|
|
9
|
+
def add_assets
|
|
10
|
+
insert_into_file(
|
|
11
|
+
"app/assets/stylesheets/application.css",
|
|
12
|
+
" *= require avante\n",
|
|
13
|
+
:after => "require_self\n"
|
|
14
|
+
)
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
end
|
|
20
|
+
end
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
require 'rails/generators'
|
|
2
|
+
|
|
3
|
+
module Avante
|
|
4
|
+
module Generators
|
|
5
|
+
|
|
6
|
+
class Layout < Rails::Generators::Base
|
|
7
|
+
source_root File.join(File.dirname(__FILE__), 'templates')
|
|
8
|
+
argument :name, :type => :string, :default => 'application', :banner => 'name'
|
|
9
|
+
class_option :haml, :desc => 'Generates a HAML layout.', :type => :boolean
|
|
10
|
+
|
|
11
|
+
def create_layout
|
|
12
|
+
if options.haml?
|
|
13
|
+
template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
|
|
14
|
+
else
|
|
15
|
+
template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
private
|
|
20
|
+
def file_name
|
|
21
|
+
name.underscore.downcase
|
|
22
|
+
end
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
end
|
|
26
|
+
end
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title><%%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
|
|
5
|
+
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="description" content="...">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
|
|
10
|
+
<!--[if lt IE 9]>
|
|
11
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
12
|
+
<![endif]-->
|
|
13
|
+
|
|
14
|
+
<%%= stylesheet_link_tag "application" %>
|
|
15
|
+
<%%= javascript_include_tag "application" %>
|
|
16
|
+
<%%= csrf_meta_tags %>
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body>
|
|
20
|
+
<div class="container">
|
|
21
|
+
<%%= yield %>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<footer class="container">
|
|
25
|
+
</footer>
|
|
26
|
+
</body>
|
|
27
|
+
|
|
28
|
+
</html>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
!!! 5
|
|
2
|
+
%head
|
|
3
|
+
%title= content_for?(:title) ? yield(:title) : "Untitled"
|
|
4
|
+
|
|
5
|
+
%meta{ :charset => "utf-8" }
|
|
6
|
+
%meta{ :name => "description", :content => "..." }
|
|
7
|
+
%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }
|
|
8
|
+
|
|
9
|
+
/[if lt IE 9 ] <script src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\"></script>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
= stylesheet_link_tag "application"
|
|
13
|
+
= javascript_include_tag "application"
|
|
14
|
+
= csrf_meta_tag
|
|
15
|
+
|
|
16
|
+
%body
|
|
17
|
+
.container
|
|
18
|
+
= yield
|
|
19
|
+
|
|
20
|
+
%footer.container
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/* #Basic Styles
|
|
2
|
+
================================================== */
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
background: #fff;
|
|
6
|
+
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
7
|
+
color: #444;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* #Typography
|
|
11
|
+
================================================== */
|
|
12
|
+
h1, h2, h3, h4, h5, h6 {
|
|
13
|
+
color: #181818;
|
|
14
|
+
font-weight: normal;
|
|
15
|
+
|
|
16
|
+
a { font-weight: inherit; }
|
|
17
|
+
small { color: #bfbfbf; }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px; }
|
|
21
|
+
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
|
|
22
|
+
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
|
|
23
|
+
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
|
|
24
|
+
h5 { font-size: 17px; line-height: 24px; margin-bottom: 2px; }
|
|
25
|
+
h6 { font-size: 14px; line-height: 21px; margin-bottom: 2px; }
|
|
26
|
+
|
|
27
|
+
p {
|
|
28
|
+
margin: 0 0 20px 0;
|
|
29
|
+
img { margin: 0; }
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
strong { font-weight: bold; }
|
|
33
|
+
em { font-style: italic; }
|
|
34
|
+
small { font-size: 80%; }
|
|
35
|
+
|
|
36
|
+
/* Blockquotes */
|
|
37
|
+
|
|
38
|
+
blockquote {
|
|
39
|
+
margin: 0 0 20px;
|
|
40
|
+
padding: 9px auto 0 auto;
|
|
41
|
+
|
|
42
|
+
&, p {
|
|
43
|
+
font-size: 17px;
|
|
44
|
+
line-height: 24px;
|
|
45
|
+
color: #777;
|
|
46
|
+
font-style: italic;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
cite {
|
|
50
|
+
display: block;
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
color: #555;
|
|
53
|
+
|
|
54
|
+
a, a:visited { color: #555; }
|
|
55
|
+
&:before { content: "\2014 \0020"; }
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
hr {
|
|
61
|
+
border: solid #ddd;
|
|
62
|
+
border-width: 1px 0 0;
|
|
63
|
+
clear: both;
|
|
64
|
+
margin: 10px 0 30px;
|
|
65
|
+
height: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* #Links
|
|
69
|
+
================================================== */
|
|
70
|
+
|
|
71
|
+
a, a:visited { color: #18AFE0; text-decoration: none; outline: 0; }
|
|
72
|
+
a:hover, a:focus { color: #369; }
|
|
73
|
+
p a, p a:visited { line-height: inherit; }
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
/* #Lists
|
|
77
|
+
================================================== */
|
|
78
|
+
|
|
79
|
+
ul { list-style: none outside; }
|
|
80
|
+
ol { list-style: decimal; }
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@import "avante/support/mixins";
|
|
2
|
+
|
|
3
|
+
.middle { vertical-align:middle; }
|
|
4
|
+
.center { margin:auto; }
|
|
5
|
+
.txt-center { text-align:center; }
|
|
6
|
+
.txt-right { text-align:right; }
|
|
7
|
+
.txt-left { text-align:left; }
|
|
8
|
+
.odd { background-color:#F1F5FA; }
|
|
9
|
+
.even { background-color:#FFF; }
|
|
10
|
+
.highlight { background-color:#FFFFCC; }
|
|
11
|
+
.hint, .weak { color: #9e9e9e; font-size: 80% }
|
|
12
|
+
.hidden { display: none; }
|
|
13
|
+
.invisible { visibility: hidden; }
|
|
14
|
+
.wide { width: 100%; }
|
|
15
|
+
.right { float: right; }
|
|
16
|
+
.left { float: left; }
|
|
17
|
+
.explanation { color:#AFAFAF; }
|
|
18
|
+
.scale-with-grid { max-width: 100%; height: auto; }
|
|
19
|
+
|
|
20
|
+
.cancel, .cancel:hover, .cancel:visited {
|
|
21
|
+
color: #cd2a2a;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
ul.square { list-style: square outside; }
|
|
25
|
+
ul.circle { list-style: circle outside; }
|
|
26
|
+
ul.disc { list-style: disc outside; }
|
|
27
|
+
|
|
28
|
+
.page-header {
|
|
29
|
+
margin-bottom: 17px;
|
|
30
|
+
border-bottom: 1px solid #ddd;
|
|
31
|
+
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
|
|
32
|
+
|
|
33
|
+
h1, h2 { margin-bottom: 8px; }
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.panel {
|
|
37
|
+
border: 1px solid #EEE;
|
|
38
|
+
background: #FFF;
|
|
39
|
+
margin: 0 0 20px 0;
|
|
40
|
+
padding: 20px 20px 2px 20px;
|
|
41
|
+
|
|
42
|
+
@include border-radius(4px);
|
|
43
|
+
@include box-shadow(0px 1px 3px rgba(150, 150, 150, 0.1));
|
|
44
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/* Grid
|
|
2
|
+
================================================== */
|
|
3
|
+
|
|
4
|
+
/* Main elements */
|
|
5
|
+
|
|
6
|
+
.container {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 960px;
|
|
9
|
+
margin: auto;
|
|
10
|
+
padding: 0;
|
|
11
|
+
|
|
12
|
+
.column, .columns {
|
|
13
|
+
float: left;
|
|
14
|
+
display: inline;
|
|
15
|
+
margin-left: 10px;
|
|
16
|
+
margin-right: 10px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.row {
|
|
20
|
+
margin-bottom: 20px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Default Desktop Grid */
|
|
25
|
+
|
|
26
|
+
.container {
|
|
27
|
+
|
|
28
|
+
/* columns */
|
|
29
|
+
|
|
30
|
+
.column, .columns {
|
|
31
|
+
/* nested column classes to remove the gaps */
|
|
32
|
+
.alpha { margin-left: 0; }
|
|
33
|
+
.omega { margin-right: 0; }
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.one.column { width: 40px; }
|
|
37
|
+
.two.columns { width: 100px; }
|
|
38
|
+
.three.columns { width: 160px; }
|
|
39
|
+
.four.columns { width: 220px; }
|
|
40
|
+
.five.columns { width: 280px; }
|
|
41
|
+
.six.columns { width: 340px; }
|
|
42
|
+
.seven.columns { width: 400px; }
|
|
43
|
+
.eight.columns { width: 460px; }
|
|
44
|
+
.nine.columns { width: 520px; }
|
|
45
|
+
.ten.columns { width: 580px; }
|
|
46
|
+
.eleven.columns { width: 640px; }
|
|
47
|
+
.twelve.columns { width: 700px; }
|
|
48
|
+
.thirteen.columns { width: 760px; }
|
|
49
|
+
.fourteen.columns { width: 820px; }
|
|
50
|
+
.fifteen.columns { width: 880px; }
|
|
51
|
+
.sixteen.columns { width: 940px; }
|
|
52
|
+
|
|
53
|
+
.one-third.column { width: 300px; }
|
|
54
|
+
.two-thirds.column { width: 620px; }
|
|
55
|
+
|
|
56
|
+
/* offsets */
|
|
57
|
+
|
|
58
|
+
.offset-by-one { padding-left: 60px; }
|
|
59
|
+
.offset-by-two { padding-left: 120px; }
|
|
60
|
+
.offset-by-three { padding-left: 180px; }
|
|
61
|
+
.offset-by-four { padding-left: 240px; }
|
|
62
|
+
.offset-by-five { padding-left: 300px; }
|
|
63
|
+
.offset-by-six { padding-left: 360px; }
|
|
64
|
+
.offset-by-seven { padding-left: 420px; }
|
|
65
|
+
.offset-by-eight { padding-left: 480px; }
|
|
66
|
+
.offset-by-nine { padding-left: 540px; }
|
|
67
|
+
.offset-by-ten { padding-left: 600px; }
|
|
68
|
+
.offset-by-eleven { padding-left: 660px; }
|
|
69
|
+
.offset-by-twelve { padding-left: 720px; }
|
|
70
|
+
.offset-by-thirteen { padding-left: 780px; }
|
|
71
|
+
.offset-by-fourteen { padding-left: 840px; }
|
|
72
|
+
.offset-by-fifteen { padding-left: 900px; }
|
|
73
|
+
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* #Clearing
|
|
77
|
+
================================================== */
|
|
78
|
+
|
|
79
|
+
/* Self Clearing */
|
|
80
|
+
.container:after {
|
|
81
|
+
content: "\0020";
|
|
82
|
+
display: block; height: 0;
|
|
83
|
+
clear: both;
|
|
84
|
+
visibility: hidden;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/*
|
|
88
|
+
Use clearfix class on parent to clear nested columns, or wrap each
|
|
89
|
+
row of columns in a <div class="row">
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
.clearfix:before,
|
|
93
|
+
.clearfix:after,
|
|
94
|
+
.row:before,
|
|
95
|
+
.row:after {
|
|
96
|
+
content: '\0020';
|
|
97
|
+
display: block;
|
|
98
|
+
overflow: hidden;
|
|
99
|
+
visibility: hidden;
|
|
100
|
+
width: 0;
|
|
101
|
+
height: 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.row:after,
|
|
105
|
+
.clearfix:after {
|
|
106
|
+
clear: both;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.row,
|
|
110
|
+
.clearfix {
|
|
111
|
+
zoom: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* You can also use a <br class="clear" /> to clear columns */
|
|
115
|
+
|
|
116
|
+
.clear {
|
|
117
|
+
clear: both;
|
|
118
|
+
display: block;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
visibility: hidden;
|
|
121
|
+
width: 0;
|
|
122
|
+
height: 0;
|
|
123
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@import "desktop.scss";
|
|
2
|
+
|
|
3
|
+
/* #Mobile (Portrait)
|
|
4
|
+
================================================== */
|
|
5
|
+
|
|
6
|
+
@media only screen and (max-width: 767px) {
|
|
7
|
+
|
|
8
|
+
.container {
|
|
9
|
+
width: 300px;
|
|
10
|
+
|
|
11
|
+
/* columns */
|
|
12
|
+
|
|
13
|
+
.columns,
|
|
14
|
+
.column { margin: 0; }
|
|
15
|
+
|
|
16
|
+
.one.column,
|
|
17
|
+
.two.columns,
|
|
18
|
+
.three.columns,
|
|
19
|
+
.four.columns,
|
|
20
|
+
.five.columns,
|
|
21
|
+
.six.columns,
|
|
22
|
+
.seven.columns,
|
|
23
|
+
.eight.columns,
|
|
24
|
+
.nine.columns,
|
|
25
|
+
.ten.columns,
|
|
26
|
+
.eleven.columns,
|
|
27
|
+
.twelve.columns,
|
|
28
|
+
.thirteen.columns,
|
|
29
|
+
.fourteen.columns,
|
|
30
|
+
.fifteen.columns,
|
|
31
|
+
.sixteen.columns,
|
|
32
|
+
.one-third.column,
|
|
33
|
+
.two-thirds.column { width: 300px; }
|
|
34
|
+
|
|
35
|
+
/* offsets */
|
|
36
|
+
|
|
37
|
+
.offset-by-one,
|
|
38
|
+
.offset-by-two,
|
|
39
|
+
.offset-by-three,
|
|
40
|
+
.offset-by-four,
|
|
41
|
+
.offset-by-five,
|
|
42
|
+
.offset-by-six,
|
|
43
|
+
.offset-by-seven,
|
|
44
|
+
.offset-by-eight,
|
|
45
|
+
.offset-by-nine,
|
|
46
|
+
.offset-by-ten,
|
|
47
|
+
.offset-by-eleven,
|
|
48
|
+
.offset-by-twelve,
|
|
49
|
+
.offset-by-thirteen,
|
|
50
|
+
.offset-by-fourteen,
|
|
51
|
+
.offset-by-fifteen { padding-left: 0; }
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* #Mobile (Landscape)
|
|
58
|
+
================================================== */
|
|
59
|
+
|
|
60
|
+
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
61
|
+
|
|
62
|
+
.container {
|
|
63
|
+
width: 420px;
|
|
64
|
+
|
|
65
|
+
.columns,
|
|
66
|
+
.column {
|
|
67
|
+
margin: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.one.column,
|
|
71
|
+
.two.columns,
|
|
72
|
+
.three.columns,
|
|
73
|
+
.four.columns,
|
|
74
|
+
.five.columns,
|
|
75
|
+
.six.columns,
|
|
76
|
+
.seven.columns,
|
|
77
|
+
.eight.columns,
|
|
78
|
+
.nine.columns,
|
|
79
|
+
.ten.columns,
|
|
80
|
+
.eleven.columns,
|
|
81
|
+
.twelve.columns,
|
|
82
|
+
.thirteen.columns,
|
|
83
|
+
.fourteen.columns,
|
|
84
|
+
.fifteen.columns,
|
|
85
|
+
.sixteen.columns,
|
|
86
|
+
.one-third.column,
|
|
87
|
+
.two-thirds.column { width: 420px; }
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
}
|