omnigrid 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +20 -0
- data/README +5 -0
- data/Rakefile +39 -0
- data/app/assets/stylesheets/omnigrid/1140/_mixins.scss +29 -0
- data/app/assets/stylesheets/omnigrid/1140/_stylings.scss +130 -0
- data/app/assets/stylesheets/omnigrid/1kb/_mixins.scss +46 -0
- data/app/assets/stylesheets/omnigrid/1kb/_stylings.scss +33 -0
- data/app/assets/stylesheets/omnigrid/_reset.scss +9 -0
- data/app/assets/stylesheets/omnigrid/application.css.scss +20 -0
- data/app/assets/stylesheets/omnigrid/blueprint/_mixins.scss +45 -0
- data/app/assets/stylesheets/omnigrid/blueprint/_stylings.scss +280 -0
- data/app/assets/stylesheets/omnigrid/content.scss +5 -0
- data/app/assets/stylesheets/omnigrid/wireframe.scss +65 -0
- data/app/controllers/omnigrid/application_controller.rb +4 -0
- data/app/controllers/omnigrid/wireframes_controller.rb +14 -0
- data/app/views/layouts/omnigrid/_footer.html.haml +2 -0
- data/app/views/layouts/omnigrid/_header.html.haml +4 -0
- data/app/views/layouts/omnigrid/_intro.html.haml +2 -0
- data/app/views/layouts/omnigrid/application.html.haml +16 -0
- data/app/views/layouts/omnigrid/homepage.html.haml +23 -0
- data/app/views/omnigrid/wireframes/index.html.haml +5 -0
- data/config/routes.rb +4 -0
- data/lib/omnigrid/engine.rb +5 -0
- data/lib/omnigrid/version.rb +3 -0
- data/lib/omnigrid.rb +4 -0
- data/lib/tasks/omnigrid_tasks.rake +4 -0
- data/test/dummy/Rakefile +7 -0
- data/test/dummy/app/assets/javascripts/application.js +9 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +9 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/config/application.rb +45 -0
- data/test/dummy/config/boot.rb +10 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +30 -0
- data/test/dummy/config/environments/production.rb +60 -0
- data/test/dummy/config/environments/test.rb +42 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/haml.rb +3 -0
- data/test/dummy/config/initializers/inflections.rb +10 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +7 -0
- data/test/dummy/config/initializers/session_store.rb +8 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +5 -0
- data/test/dummy/config/routes.rb +4 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/db/development.sqlite3 +0 -0
- data/test/dummy/log/development.log +1552 -0
- data/test/dummy/script/rails +6 -0
- data/test/dummy/tmp/cache/assets/C1E/A40/sprockets%2F5dd459ec56059246010410a7959325a6 +0 -0
- data/test/dummy/tmp/cache/assets/C41/5B0/sprockets%2F095415e1141a435237aa9464752d21fd +0 -0
- data/test/dummy/tmp/cache/assets/C7C/C20/sprockets%2F0dc61d0437dbb729935382409b24a837 +0 -0
- data/test/dummy/tmp/cache/assets/C99/1B0/sprockets%2F981d10e56b1262d04f1b12c63a664e12 +0 -0
- data/test/dummy/tmp/cache/assets/CA0/CB0/sprockets%2F02e8d65dc4f0860563173b0b2382b7b0 +0 -0
- data/test/dummy/tmp/cache/assets/CB2/FA0/sprockets%2Ff305beb60d14026675e8b3d86b751937 +0 -0
- data/test/dummy/tmp/cache/assets/CD0/FB0/sprockets%2F86270444730fa5d21ef12e1061fa5c8b +0 -0
- data/test/dummy/tmp/cache/assets/CE5/650/sprockets%2F8ab512c9b33ac90e699b73469d71f061 +0 -0
- data/test/dummy/tmp/cache/assets/CFB/F30/sprockets%2F986a847ac67a319ae8785744b6eb86d3 +0 -0
- data/test/dummy/tmp/cache/assets/D0D/B40/sprockets%2F3be2d44e7983456b9b815b0c1ea91a71 +0 -0
- data/test/dummy/tmp/cache/assets/D13/E70/sprockets%2F0f195b278bb7f672990fedff30124d13 +0 -0
- data/test/dummy/tmp/cache/assets/D32/A10/sprockets%2F13fe41fee1fe35b49d145bcc06610705 +0 -0
- data/test/dummy/tmp/cache/assets/D32/C10/sprockets%2Fa2fca6322e764223bcf76123d7680ccb +0 -0
- data/test/dummy/tmp/cache/assets/D40/210/sprockets%2Fc74dde29833c6c07b9ed05a381a4537c +0 -0
- data/test/dummy/tmp/cache/assets/D44/570/sprockets%2F8711fbcf476091c6da676f1105cd95dd +0 -0
- data/test/dummy/tmp/cache/assets/D54/ED0/sprockets%2F71c9fa01091d432b131da3bb73faf3d4 +0 -0
- data/test/dummy/tmp/cache/assets/D81/8F0/sprockets%2F8948d410da6f37caf34dda88d3b67d88 +0 -0
- data/test/dummy/tmp/cache/assets/D97/260/sprockets%2F2a59922a8ab7e3c38b3f3b3d686b3aab +0 -0
- data/test/dummy/tmp/cache/assets/DA4/450/sprockets%2F697970aefc28bfdc3d4580ce02ce047e +0 -0
- data/test/dummy/tmp/cache/assets/DD7/340/sprockets%2F31e04e91bb5cdf943c20ecd84fef7d88 +0 -0
- data/test/dummy/tmp/cache/assets/DF7/AC0/sprockets%2Fb2cdca9f26e392abf39528a2ea18dc3b +0 -0
- data/test/dummy/tmp/cache/assets/E25/C80/sprockets%2F3f954aadbc07ae0ba8ca5e3863af48db +0 -0
- data/test/dummy/tmp/pids/server.pid +1 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/omnigrid_test.rb +7 -0
- data/test/test_helper.rb +10 -0
- metadata +242 -0
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2011 Charles Sistovaris
|
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
ADDED
@@ -0,0 +1,5 @@
|
|
1
|
+
# Omnigrid
|
2
|
+
|
3
|
+
Grids are powerfull tools to style a webpage. Blueprint 960 1kb 1140 etc. all have their own class markup (e.g span-2 for blueprint, grid_3 for 960, .onecol for 1140 etc) that tend to pollute HTML.
|
4
|
+
|
5
|
+
But while developping it is sometimes handy to throw a class in your HTML to have a quick view instead of putting it all in your css... Omniauth hopes to bring the best of both world. Oh and sorry it's only a Rails 3.1 engine (for now?).
|
data/Rakefile
ADDED
@@ -0,0 +1,39 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
begin
|
3
|
+
require 'bundler/setup'
|
4
|
+
rescue LoadError
|
5
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
6
|
+
end
|
7
|
+
begin
|
8
|
+
require 'rdoc/task'
|
9
|
+
rescue LoadError
|
10
|
+
require 'rdoc/rdoc'
|
11
|
+
require 'rake/rdoctask'
|
12
|
+
RDoc::Task = Rake::RDocTask
|
13
|
+
end
|
14
|
+
|
15
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
16
|
+
rdoc.rdoc_dir = 'rdoc'
|
17
|
+
rdoc.title = 'Omnigrid'
|
18
|
+
rdoc.options << '--line-numbers'
|
19
|
+
rdoc.rdoc_files.include('README.rdoc')
|
20
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
21
|
+
end
|
22
|
+
|
23
|
+
APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
|
24
|
+
load 'rails/tasks/engine.rake'
|
25
|
+
|
26
|
+
|
27
|
+
Bundler::GemHelper.install_tasks
|
28
|
+
|
29
|
+
require 'rake/testtask'
|
30
|
+
|
31
|
+
Rake::TestTask.new(:test) do |t|
|
32
|
+
t.libs << 'lib'
|
33
|
+
t.libs << 'test'
|
34
|
+
t.pattern = 'test/**/*_test.rb'
|
35
|
+
t.verbose = false
|
36
|
+
end
|
37
|
+
|
38
|
+
|
39
|
+
task :default => :test
|
@@ -0,0 +1,29 @@
|
|
1
|
+
@function colwidth($num) {
|
2
|
+
@return nth(4.85% 13.45% 22.05% 30.75% 39.45% 48% 56.75% 65.4% 74.05% 82.7% 91.35% 100%, $num);
|
3
|
+
}
|
4
|
+
|
5
|
+
|
6
|
+
@mixin container {
|
7
|
+
padding-left: 20px;
|
8
|
+
padding-right: 20px;
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin row {
|
12
|
+
width: 100%;
|
13
|
+
max-width: 1140px;
|
14
|
+
min-width: 755px;
|
15
|
+
margin: 0 auto;
|
16
|
+
overflow: hidden;
|
17
|
+
}
|
18
|
+
|
19
|
+
@mixin column {
|
20
|
+
margin-right: 3.8%;
|
21
|
+
float: left;
|
22
|
+
min-height: 1px;
|
23
|
+
}
|
24
|
+
|
25
|
+
@mixin grid($num: 1, $islast: false) {
|
26
|
+
@include column;
|
27
|
+
width: colwidth($num);
|
28
|
+
@if $islast == last { margin-right: 0px; float: left;}
|
29
|
+
}
|
@@ -0,0 +1,130 @@
|
|
1
|
+
/* CSS Resets */
|
2
|
+
|
3
|
+
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
|
4
|
+
|
5
|
+
|
6
|
+
/* ==================================================================================================================== */
|
7
|
+
/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com */
|
8
|
+
/* ==================================================================================================================== */
|
9
|
+
|
10
|
+
.container {
|
11
|
+
padding-left: 20px;
|
12
|
+
padding-right: 20px;
|
13
|
+
}
|
14
|
+
|
15
|
+
.row {
|
16
|
+
width: 100%;
|
17
|
+
max-width: 1140px;
|
18
|
+
min-width: 755px;
|
19
|
+
margin: 0 auto;
|
20
|
+
overflow: hidden;
|
21
|
+
}
|
22
|
+
|
23
|
+
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
|
24
|
+
margin-right: 3.8%;
|
25
|
+
float: left;
|
26
|
+
min-height: 1px;
|
27
|
+
}
|
28
|
+
|
29
|
+
.row .onecol {
|
30
|
+
width: 4.85%;
|
31
|
+
}
|
32
|
+
|
33
|
+
.row .twocol {
|
34
|
+
width: 13.45%;
|
35
|
+
}
|
36
|
+
|
37
|
+
.row .threecol {
|
38
|
+
width: 22.05%;
|
39
|
+
}
|
40
|
+
|
41
|
+
.row .fourcol {
|
42
|
+
width: 30.75%;
|
43
|
+
}
|
44
|
+
|
45
|
+
.row .fivecol {
|
46
|
+
width: 39.45%;
|
47
|
+
}
|
48
|
+
|
49
|
+
.row .sixcol {
|
50
|
+
width: 48%;
|
51
|
+
}
|
52
|
+
|
53
|
+
.row .sevencol {
|
54
|
+
width: 56.75%;
|
55
|
+
}
|
56
|
+
|
57
|
+
.row .eightcol {
|
58
|
+
width: 65.4%;
|
59
|
+
}
|
60
|
+
|
61
|
+
.row .ninecol {
|
62
|
+
width: 74.05%;
|
63
|
+
}
|
64
|
+
|
65
|
+
.row .tencol {
|
66
|
+
width: 82.7%;
|
67
|
+
}
|
68
|
+
|
69
|
+
.row .elevencol {
|
70
|
+
width: 91.35%;
|
71
|
+
}
|
72
|
+
|
73
|
+
.row .twelvecol {
|
74
|
+
width: 100%;
|
75
|
+
float: left;
|
76
|
+
}
|
77
|
+
|
78
|
+
.last {
|
79
|
+
margin-right: 0px;
|
80
|
+
}
|
81
|
+
|
82
|
+
img, object, embed {
|
83
|
+
max-width: 100%;
|
84
|
+
}
|
85
|
+
|
86
|
+
img {
|
87
|
+
height: auto;
|
88
|
+
}
|
89
|
+
|
90
|
+
|
91
|
+
/* Smaller screens */
|
92
|
+
|
93
|
+
@media only screen and (max-width: 1023px) {
|
94
|
+
|
95
|
+
body {
|
96
|
+
font-size: 0.8em;
|
97
|
+
line-height: 1.5em;
|
98
|
+
}
|
99
|
+
|
100
|
+
}
|
101
|
+
|
102
|
+
|
103
|
+
/* Mobile */
|
104
|
+
|
105
|
+
@media handheld, only screen and (max-width: 767px) {
|
106
|
+
|
107
|
+
body {
|
108
|
+
font-size: 16px;
|
109
|
+
-webkit-text-size-adjust: none;
|
110
|
+
}
|
111
|
+
|
112
|
+
.row, body, .container {
|
113
|
+
width: 100%;
|
114
|
+
min-width: 0;
|
115
|
+
margin-left: 0px;
|
116
|
+
margin-right: 0px;
|
117
|
+
padding-left: 0px;
|
118
|
+
padding-right: 0px;
|
119
|
+
}
|
120
|
+
|
121
|
+
.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
|
122
|
+
width: auto;
|
123
|
+
float: none;
|
124
|
+
margin-left: 0px;
|
125
|
+
margin-right: 0px;
|
126
|
+
padding-left: 20px;
|
127
|
+
padding-right: 20px;
|
128
|
+
}
|
129
|
+
|
130
|
+
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
/* ===========
|
2
|
+
* WIREFRAMES
|
3
|
+
* ================ */
|
4
|
+
|
5
|
+
// RENAMED BOURBON SAME FUNCTIO
|
6
|
+
// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
|
7
|
+
//
|
8
|
+
// $gw-column: 100px; // Column Width
|
9
|
+
// $gw-gutter: 40px; // Gutter Width
|
10
|
+
//
|
11
|
+
// div {
|
12
|
+
// width: grid-width(4); // returns 520px;
|
13
|
+
// margin-left: $gw-gutter; // returns 40px;
|
14
|
+
// }
|
15
|
+
@function colwidth($n) {
|
16
|
+
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
17
|
+
}
|
18
|
+
|
19
|
+
/* 1kb Default : 12 columns, 60 pixels each, with 20 pixel gutter */
|
20
|
+
$gw-column: 60px;
|
21
|
+
$gw-gutter: 20px;
|
22
|
+
|
23
|
+
|
24
|
+
@mixin container {
|
25
|
+
border-right: thick solid #EEE;
|
26
|
+
border-left: thick solid #EEE;
|
27
|
+
}
|
28
|
+
|
29
|
+
@mixin row {
|
30
|
+
width: 960px;
|
31
|
+
margin: 0 auto;
|
32
|
+
overflow: hidden;
|
33
|
+
}
|
34
|
+
|
35
|
+
@mixin column {
|
36
|
+
margin: 0 10px;
|
37
|
+
overflow: hidden;
|
38
|
+
float: left;
|
39
|
+
display: inline;
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin grid($num: 1, $islast: false) {
|
43
|
+
@include column;
|
44
|
+
width: colwidth($num);
|
45
|
+
//@if $islast == last { margin-right: 0px; float: left;}
|
46
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
/* ================ */
|
2
|
+
/* = The 1Kb Grid = */ /* 12 columns, 60 pixels each, with 20 pixel gutter */
|
3
|
+
/* ================ */
|
4
|
+
|
5
|
+
.grid_1 { width:60px; }
|
6
|
+
.grid_2 { width:140px; }
|
7
|
+
.grid_3 { width:220px; }
|
8
|
+
.grid_4 { width:300px; }
|
9
|
+
.grid_5 { width:380px; }
|
10
|
+
.grid_6 { width:460px; }
|
11
|
+
.grid_7 { width:540px; }
|
12
|
+
.grid_8 { width:620px; }
|
13
|
+
.grid_9 { width:700px; }
|
14
|
+
.grid_10 { width:780px; }
|
15
|
+
.grid_11 { width:860px; }
|
16
|
+
.grid_12 { width:940px; }
|
17
|
+
|
18
|
+
.column {
|
19
|
+
margin: 0 10px;
|
20
|
+
overflow: hidden;
|
21
|
+
float: left;
|
22
|
+
display: inline;
|
23
|
+
}
|
24
|
+
.row {
|
25
|
+
width: 960px;
|
26
|
+
margin: 0 auto;
|
27
|
+
overflow: hidden;
|
28
|
+
}
|
29
|
+
.row .row {
|
30
|
+
margin: 0 -10px;
|
31
|
+
width: auto;
|
32
|
+
display: inline-block;
|
33
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
/* ==========
|
2
|
+
* RESET
|
3
|
+
* =============*/
|
4
|
+
|
5
|
+
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}
|
6
|
+
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}
|
7
|
+
a img{border:0}
|
8
|
+
figure{position:relative}
|
9
|
+
figure img{width:100%}
|
@@ -0,0 +1,20 @@
|
|
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
|
+
*/
|
8
|
+
|
9
|
+
// CSS3 & MISC
|
10
|
+
//@import "bourbon";
|
11
|
+
@import "reset";
|
12
|
+
|
13
|
+
// GRID
|
14
|
+
//@import "1140/mixins";
|
15
|
+
@import "1kb/mixins";
|
16
|
+
//@import "blueprint/mixins";
|
17
|
+
|
18
|
+
// LOCALS
|
19
|
+
@import "wireframe";
|
20
|
+
@import "content";
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/* ===========
|
2
|
+
* WIREFRAMES
|
3
|
+
* ================ */
|
4
|
+
|
5
|
+
// RENAMED BOURBON SAME FUNCTIO
|
6
|
+
// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
|
7
|
+
//
|
8
|
+
// $gw-column: 100px; // Column Width
|
9
|
+
// $gw-gutter: 40px; // Gutter Width
|
10
|
+
//
|
11
|
+
// div {
|
12
|
+
// width: grid-width(4); // returns 520px;
|
13
|
+
// margin-left: $gw-gutter; // returns 40px;
|
14
|
+
// }
|
15
|
+
@function colwidth($n) {
|
16
|
+
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
17
|
+
}
|
18
|
+
|
19
|
+
/* 1kb Default : 12 columns, 60 pixels each, with 20 pixel gutter */
|
20
|
+
$gw-column: 30px;
|
21
|
+
$gw-gutter: 10px;
|
22
|
+
|
23
|
+
|
24
|
+
@mixin container {
|
25
|
+
border-right: thick solid #EEE;
|
26
|
+
border-left: thick solid #EEE;
|
27
|
+
}
|
28
|
+
|
29
|
+
@mixin row {
|
30
|
+
width: 950px;
|
31
|
+
margin: 0 auto;
|
32
|
+
display: block;
|
33
|
+
clear: both;
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin column {
|
37
|
+
float: left;
|
38
|
+
margin-right: 10px;
|
39
|
+
}
|
40
|
+
|
41
|
+
@mixin grid($num: 1, $islast: false) {
|
42
|
+
@include column;
|
43
|
+
width: colwidth($num * 2);
|
44
|
+
@if $islast == last { margin-right: 0px; float: left;}
|
45
|
+
}
|
@@ -0,0 +1,280 @@
|
|
1
|
+
/* --------------------------------------------------------------
|
2
|
+
|
3
|
+
grid.css
|
4
|
+
* Sets up an easy-to-use grid of 24 columns.
|
5
|
+
|
6
|
+
By default, the grid is 950px wide, with 24 columns
|
7
|
+
spanning 30px, and a 10px margin between columns.
|
8
|
+
|
9
|
+
If you need fewer or more columns, namespaces or semantic
|
10
|
+
element names, use the compressor script (lib/compress.rb)
|
11
|
+
|
12
|
+
-------------------------------------------------------------- */
|
13
|
+
|
14
|
+
/* A container should group all your columns. */
|
15
|
+
.container {
|
16
|
+
width: 950px;
|
17
|
+
margin: 0 auto;
|
18
|
+
}
|
19
|
+
|
20
|
+
/* Use this class on any .span / container to see the grid. */
|
21
|
+
.showgrid {
|
22
|
+
background: url(src/grid.png);
|
23
|
+
}
|
24
|
+
|
25
|
+
|
26
|
+
/* Columns
|
27
|
+
-------------------------------------------------------------- */
|
28
|
+
|
29
|
+
/* Sets up basic grid floating and margin. */
|
30
|
+
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
|
31
|
+
float: left;
|
32
|
+
margin-right: 10px;
|
33
|
+
}
|
34
|
+
|
35
|
+
/* The last column in a row needs this class. */
|
36
|
+
.last { margin-right: 0; }
|
37
|
+
|
38
|
+
/* Use these classes to set the width of a column. */
|
39
|
+
.span-1 {width: 30px;}
|
40
|
+
|
41
|
+
.span-2 {width: 70px;}
|
42
|
+
.span-3 {width: 110px;}
|
43
|
+
.span-4 {width: 150px;}
|
44
|
+
.span-5 {width: 190px;}
|
45
|
+
.span-6 {width: 230px;}
|
46
|
+
.span-7 {width: 270px;}
|
47
|
+
.span-8 {width: 310px;}
|
48
|
+
.span-9 {width: 350px;}
|
49
|
+
.span-10 {width: 390px;}
|
50
|
+
.span-11 {width: 430px;}
|
51
|
+
.span-12 {width: 470px;}
|
52
|
+
.span-13 {width: 510px;}
|
53
|
+
.span-14 {width: 550px;}
|
54
|
+
.span-15 {width: 590px;}
|
55
|
+
.span-16 {width: 630px;}
|
56
|
+
.span-17 {width: 670px;}
|
57
|
+
.span-18 {width: 710px;}
|
58
|
+
.span-19 {width: 750px;}
|
59
|
+
.span-20 {width: 790px;}
|
60
|
+
.span-21 {width: 830px;}
|
61
|
+
.span-22 {width: 870px;}
|
62
|
+
.span-23 {width: 910px;}
|
63
|
+
.span-24 {width:950px; margin-right:0;}
|
64
|
+
|
65
|
+
/* Use these classes to set the width of an input. */
|
66
|
+
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {
|
67
|
+
border-left-width: 1px;
|
68
|
+
border-right-width: 1px;
|
69
|
+
padding-left: 5px;
|
70
|
+
padding-right: 5px;
|
71
|
+
}
|
72
|
+
|
73
|
+
input.span-1, textarea.span-1 { width: 18px; }
|
74
|
+
input.span-2, textarea.span-2 { width: 58px; }
|
75
|
+
input.span-3, textarea.span-3 { width: 98px; }
|
76
|
+
input.span-4, textarea.span-4 { width: 138px; }
|
77
|
+
input.span-5, textarea.span-5 { width: 178px; }
|
78
|
+
input.span-6, textarea.span-6 { width: 218px; }
|
79
|
+
input.span-7, textarea.span-7 { width: 258px; }
|
80
|
+
input.span-8, textarea.span-8 { width: 298px; }
|
81
|
+
input.span-9, textarea.span-9 { width: 338px; }
|
82
|
+
input.span-10, textarea.span-10 { width: 378px; }
|
83
|
+
input.span-11, textarea.span-11 { width: 418px; }
|
84
|
+
input.span-12, textarea.span-12 { width: 458px; }
|
85
|
+
input.span-13, textarea.span-13 { width: 498px; }
|
86
|
+
input.span-14, textarea.span-14 { width: 538px; }
|
87
|
+
input.span-15, textarea.span-15 { width: 578px; }
|
88
|
+
input.span-16, textarea.span-16 { width: 618px; }
|
89
|
+
input.span-17, textarea.span-17 { width: 658px; }
|
90
|
+
input.span-18, textarea.span-18 { width: 698px; }
|
91
|
+
input.span-19, textarea.span-19 { width: 738px; }
|
92
|
+
input.span-20, textarea.span-20 { width: 778px; }
|
93
|
+
input.span-21, textarea.span-21 { width: 818px; }
|
94
|
+
input.span-22, textarea.span-22 { width: 858px; }
|
95
|
+
input.span-23, textarea.span-23 { width: 898px; }
|
96
|
+
input.span-24, textarea.span-24 { width: 938px; }
|
97
|
+
|
98
|
+
/* Add these to a column to append empty cols. */
|
99
|
+
|
100
|
+
.append-1 { padding-right: 40px;}
|
101
|
+
.append-2 { padding-right: 80px;}
|
102
|
+
.append-3 { padding-right: 120px;}
|
103
|
+
.append-4 { padding-right: 160px;}
|
104
|
+
.append-5 { padding-right: 200px;}
|
105
|
+
.append-6 { padding-right: 240px;}
|
106
|
+
.append-7 { padding-right: 280px;}
|
107
|
+
.append-8 { padding-right: 320px;}
|
108
|
+
.append-9 { padding-right: 360px;}
|
109
|
+
.append-10 { padding-right: 400px;}
|
110
|
+
.append-11 { padding-right: 440px;}
|
111
|
+
.append-12 { padding-right: 480px;}
|
112
|
+
.append-13 { padding-right: 520px;}
|
113
|
+
.append-14 { padding-right: 560px;}
|
114
|
+
.append-15 { padding-right: 600px;}
|
115
|
+
.append-16 { padding-right: 640px;}
|
116
|
+
.append-17 { padding-right: 680px;}
|
117
|
+
.append-18 { padding-right: 720px;}
|
118
|
+
.append-19 { padding-right: 760px;}
|
119
|
+
.append-20 { padding-right: 800px;}
|
120
|
+
.append-21 { padding-right: 840px;}
|
121
|
+
.append-22 { padding-right: 880px;}
|
122
|
+
.append-23 { padding-right: 920px;}
|
123
|
+
|
124
|
+
/* Add these to a column to prepend empty cols. */
|
125
|
+
|
126
|
+
.prepend-1 { padding-left: 40px;}
|
127
|
+
.prepend-2 { padding-left: 80px;}
|
128
|
+
.prepend-3 { padding-left: 120px;}
|
129
|
+
.prepend-4 { padding-left: 160px;}
|
130
|
+
.prepend-5 { padding-left: 200px;}
|
131
|
+
.prepend-6 { padding-left: 240px;}
|
132
|
+
.prepend-7 { padding-left: 280px;}
|
133
|
+
.prepend-8 { padding-left: 320px;}
|
134
|
+
.prepend-9 { padding-left: 360px;}
|
135
|
+
.prepend-10 { padding-left: 400px;}
|
136
|
+
.prepend-11 { padding-left: 440px;}
|
137
|
+
.prepend-12 { padding-left: 480px;}
|
138
|
+
.prepend-13 { padding-left: 520px;}
|
139
|
+
.prepend-14 { padding-left: 560px;}
|
140
|
+
.prepend-15 { padding-left: 600px;}
|
141
|
+
.prepend-16 { padding-left: 640px;}
|
142
|
+
.prepend-17 { padding-left: 680px;}
|
143
|
+
.prepend-18 { padding-left: 720px;}
|
144
|
+
.prepend-19 { padding-left: 760px;}
|
145
|
+
.prepend-20 { padding-left: 800px;}
|
146
|
+
.prepend-21 { padding-left: 840px;}
|
147
|
+
.prepend-22 { padding-left: 880px;}
|
148
|
+
.prepend-23 { padding-left: 920px;}
|
149
|
+
|
150
|
+
|
151
|
+
/* Border on right hand side of a column. */
|
152
|
+
.border {
|
153
|
+
padding-right: 4px;
|
154
|
+
margin-right: 5px;
|
155
|
+
border-right: 1px solid #ddd;
|
156
|
+
}
|
157
|
+
|
158
|
+
/* Border with more whitespace, spans one column. */
|
159
|
+
.colborder {
|
160
|
+
padding-right: 24px;
|
161
|
+
margin-right: 25px;
|
162
|
+
border-right: 1px solid #ddd;
|
163
|
+
}
|
164
|
+
|
165
|
+
|
166
|
+
/* Use these classes on an element to push it into the
|
167
|
+
next column, or to pull it into the previous column. */
|
168
|
+
|
169
|
+
|
170
|
+
.pull-1 { margin-left: -40px; }
|
171
|
+
.pull-2 { margin-left: -80px; }
|
172
|
+
.pull-3 { margin-left: -120px; }
|
173
|
+
.pull-4 { margin-left: -160px; }
|
174
|
+
.pull-5 { margin-left: -200px; }
|
175
|
+
.pull-6 { margin-left: -240px; }
|
176
|
+
.pull-7 { margin-left: -280px; }
|
177
|
+
.pull-8 { margin-left: -320px; }
|
178
|
+
.pull-9 { margin-left: -360px; }
|
179
|
+
.pull-10 { margin-left: -400px; }
|
180
|
+
.pull-11 { margin-left: -440px; }
|
181
|
+
.pull-12 { margin-left: -480px; }
|
182
|
+
.pull-13 { margin-left: -520px; }
|
183
|
+
.pull-14 { margin-left: -560px; }
|
184
|
+
.pull-15 { margin-left: -600px; }
|
185
|
+
.pull-16 { margin-left: -640px; }
|
186
|
+
.pull-17 { margin-left: -680px; }
|
187
|
+
.pull-18 { margin-left: -720px; }
|
188
|
+
.pull-19 { margin-left: -760px; }
|
189
|
+
.pull-20 { margin-left: -800px; }
|
190
|
+
.pull-21 { margin-left: -840px; }
|
191
|
+
.pull-22 { margin-left: -880px; }
|
192
|
+
.pull-23 { margin-left: -920px; }
|
193
|
+
.pull-24 { margin-left: -960px; }
|
194
|
+
|
195
|
+
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}
|
196
|
+
|
197
|
+
|
198
|
+
.push-1 { margin: 0 -40px 1.5em 40px; }
|
199
|
+
.push-2 { margin: 0 -80px 1.5em 80px; }
|
200
|
+
.push-3 { margin: 0 -120px 1.5em 120px; }
|
201
|
+
.push-4 { margin: 0 -160px 1.5em 160px; }
|
202
|
+
.push-5 { margin: 0 -200px 1.5em 200px; }
|
203
|
+
.push-6 { margin: 0 -240px 1.5em 240px; }
|
204
|
+
.push-7 { margin: 0 -280px 1.5em 280px; }
|
205
|
+
.push-8 { margin: 0 -320px 1.5em 320px; }
|
206
|
+
.push-9 { margin: 0 -360px 1.5em 360px; }
|
207
|
+
.push-10 { margin: 0 -400px 1.5em 400px; }
|
208
|
+
.push-11 { margin: 0 -440px 1.5em 440px; }
|
209
|
+
.push-12 { margin: 0 -480px 1.5em 480px; }
|
210
|
+
.push-13 { margin: 0 -520px 1.5em 520px; }
|
211
|
+
.push-14 { margin: 0 -560px 1.5em 560px; }
|
212
|
+
.push-15 { margin: 0 -600px 1.5em 600px; }
|
213
|
+
.push-16 { margin: 0 -640px 1.5em 640px; }
|
214
|
+
.push-17 { margin: 0 -680px 1.5em 680px; }
|
215
|
+
.push-18 { margin: 0 -720px 1.5em 720px; }
|
216
|
+
.push-19 { margin: 0 -760px 1.5em 760px; }
|
217
|
+
.push-20 { margin: 0 -800px 1.5em 800px; }
|
218
|
+
.push-21 { margin: 0 -840px 1.5em 840px; }
|
219
|
+
.push-22 { margin: 0 -880px 1.5em 880px; }
|
220
|
+
.push-23 { margin: 0 -920px 1.5em 920px; }
|
221
|
+
.push-24 { margin: 0 -960px 1.5em 960px; }
|
222
|
+
|
223
|
+
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}
|
224
|
+
|
225
|
+
|
226
|
+
/* Misc classes and elements
|
227
|
+
-------------------------------------------------------------- */
|
228
|
+
|
229
|
+
/* In case you need to add a gutter above/below an element */
|
230
|
+
div.prepend-top, .prepend-top {
|
231
|
+
margin-top:1.5em;
|
232
|
+
}
|
233
|
+
div.append-bottom, .append-bottom {
|
234
|
+
margin-bottom:1.5em;
|
235
|
+
}
|
236
|
+
|
237
|
+
/* Use a .box to create a padded box inside a column. */
|
238
|
+
.box {
|
239
|
+
padding: 1.5em;
|
240
|
+
margin-bottom: 1.5em;
|
241
|
+
background: #e5eCf9;
|
242
|
+
}
|
243
|
+
|
244
|
+
/* Use this to create a horizontal ruler across a column. */
|
245
|
+
hr {
|
246
|
+
background: #ddd;
|
247
|
+
color: #ddd;
|
248
|
+
clear: both;
|
249
|
+
float: none;
|
250
|
+
width: 100%;
|
251
|
+
height: 1px;
|
252
|
+
margin: 0 0 17px;
|
253
|
+
border: none;
|
254
|
+
}
|
255
|
+
|
256
|
+
hr.space {
|
257
|
+
background: #fff;
|
258
|
+
color: #fff;
|
259
|
+
visibility: hidden;
|
260
|
+
}
|
261
|
+
|
262
|
+
|
263
|
+
/* Clearing floats without extra markup
|
264
|
+
Based on How To Clear Floats Without Structural Markup by PiE
|
265
|
+
[http://www.positioniseverything.net/easyclearing.html] */
|
266
|
+
|
267
|
+
.clearfix:after, .container:after {
|
268
|
+
content: "\0020";
|
269
|
+
display: block;
|
270
|
+
height: 0;
|
271
|
+
clear: both;
|
272
|
+
visibility: hidden;
|
273
|
+
overflow:hidden;
|
274
|
+
}
|
275
|
+
.clearfix, .container {display: block;}
|
276
|
+
|
277
|
+
/* Regular clearing
|
278
|
+
apply to column that should drop below previous ones. */
|
279
|
+
|
280
|
+
.clear { clear:both; }
|