forked from joshuaclayton/blueprint-css
/
grid.css.erb
136 lines (107 loc) · 4.23 KB
/
grid.css.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* --------------------------------------------------------------
grid.css - mirror version of src/grid.css
-------------------------------------------------------------- */
/* A container should group all your columns. */
.container {
width: <%= page_width %>px;
margin: 0 auto;
}
/* Use this class on any div.span / container to see the grid. */
.showgrid {
background: url(src/grid.png);
}
/* Columns
-------------------------------------------------------------- */
/* Sets up basic grid floating and margin. */
.column, <%= (1..column_count).map {|c| "div.span-#{c}" }.join(", ") %> {
float: left;
margin-right: <%= gutter_width %>px;
}
/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }
/* Use these classes to set the width of a column. */
.span-1 {width: <%= column_width %>px;}
<% (2..column_count-1).each do |column| %>
.span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin: 0;" if column == column_count %>}
<% end %>
.span-<%= column_count %>, div.span-<%= column_count %> { width:<%= page_width %>px; margin:0; }
/* Use these classes to set the width of an input. */
input.span-1, textarea.span-1, select.span-1 {width: <%= column_width %>px!important;}
<% (2..column_count-1).each do |column| %>
input.span-<%= column %>, textarea.span-<%= column %>, select.span-<%= column %> {width: <%= (column_width - 10 - gutter_width + ((column - 1) * (column_width + gutter_width))).to_i %>px!important;<%= "margin: 0;" if column == column_count %>}
<% end %>
input.span-<%= column_count %>, textarea.span-<%= column_count %>, select.span-<%= column_count %> { width:<%= page_width - 10 %>px!important; }
/* Add these to a column to append empty cols. */
<% (1..(column_count-1)).each do |column| %>
.append-<%= column %> { padding-right: <%= (column * (column_width + gutter_width)).to_i %>px;}
<% end %>
/* Add these to a column to prepend empty cols. */
<% (1..(column_count-1)).each do |column| %>
.prepend-<%= column %> { padding-left: <%= (column * (column_width + gutter_width)).to_i %>px;}
<% end %>
/* Border on right hand side of a column. */
div.border {
padding-right: <%= (gutter_width * 0.5 - 1).to_i %>px;
margin-right: <%= (gutter_width * 0.5).to_i %>px;
border-right: 1px solid #eee;
}
/* Border with more whitespace, spans one column. */
div.colborder {
padding-right: <%= (column_width - 0.5*gutter_width - 1).to_i %>px;
margin-right: <%= (column_width - 0.5 * gutter_width).to_i %>px;
border-right: 1px solid #eee;
}
/* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */
<% (1..column_count).each do |column| %>
.pull-<%= column %> { margin-left: -<%= (column * (column_width + gutter_width)).to_i %>px; }
<% end %>
<%= (1..column_count).map {|c| ".pull-#{c}" }.join(", ") %> {float: left; position:relative;}
<% (1..(column_count)).each do |column| %>
.push-<%= column %> { margin: 0 -<%= (column * (column_width + gutter_width)).to_i %>px 1.5em <%= (column * (column_width + gutter_width)).to_i %>px; }
<% end %>
<%= (1..column_count).map {|c| ".push-#{c}" }.join(", ") %> {float: right; position:relative;}
/* Misc classes and elements
-------------------------------------------------------------- */
/* In case you need to add a gutter above/below an element */
.prepend-top {
margin-top:1.5em;
}
.append-bottom {
margin-bottom:1.5em;
}
/* Use a .box to create a padded box inside a column. */
.box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #E5ECF9;
}
/* Use this to create a horizontal ruler across a column. */
hr {
background: #ddd;
color: #ddd;
clear: both;
float: none;
width: 100%;
height: .1em;
margin: 0 0 1.45em;
border: none;
}
hr.space {
background: #fff;
color: #fff;
}
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix, .container {display: block;}
/* Regular clearing
apply to column that should drop below previous ones. */
.clear { clear:both; }