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: <%= page_width %>px; |
---|
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, <%= (1..column_count).map {|c| ".span-#{c}" }.join(", ") %> { |
---|
31 | float: left; |
---|
32 | margin-right: <%= gutter_width %>px; |
---|
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: <%= column_width %>px;} |
---|
40 | <% (2..column_count-1).each do |column| %> |
---|
41 | .span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin-right: 0;" if column == column_count %>}<% end %> |
---|
42 | .span-<%= column_count %> {width:<%= page_width %>px; margin-right:0;} |
---|
43 | |
---|
44 | /* Use these classes to set the width of an input. */ |
---|
45 | <%= (1..column_count).map {|column| "input.span-#{column}, textarea.span-#{column}"}.join(", ") %> { |
---|
46 | border-left-width: <%= input_border %>px; |
---|
47 | border-right-width: <%= input_border %>px; |
---|
48 | padding-left: <%= input_padding %>px; |
---|
49 | padding-right: <%= input_padding %>px; |
---|
50 | } |
---|
51 | <% (1..column_count).each do |column| %> |
---|
52 | input.span-<%= column %>, textarea.span-<%= column %> { width: <%= ((column_width + gutter_width) * (column - 1) + column_width - 2*(input_padding + input_border))%>px; }<% end %> |
---|
53 | |
---|
54 | /* Add these to a column to append empty cols. */ |
---|
55 | <% (1..(column_count-1)).each do |column| %> |
---|
56 | .append-<%= column %> { padding-right: <%= (column * (column_width + gutter_width)).to_i %>px;}<% end %> |
---|
57 | |
---|
58 | /* Add these to a column to prepend empty cols. */ |
---|
59 | <% (1..(column_count-1)).each do |column| %> |
---|
60 | .prepend-<%= column %> { padding-left: <%= (column * (column_width + gutter_width)).to_i %>px;}<% end %> |
---|
61 | |
---|
62 | |
---|
63 | /* Border on right hand side of a column. */ |
---|
64 | .border { |
---|
65 | padding-right: <%= (gutter_width * 0.5 - 1).to_i %>px; |
---|
66 | margin-right: <%= (gutter_width * 0.5).to_i %>px; |
---|
67 | border-right: 1px solid #ddd; |
---|
68 | } |
---|
69 | |
---|
70 | /* Border with more whitespace, spans one column. */ |
---|
71 | .colborder { |
---|
72 | padding-right: <%= (column_width + 2*gutter_width - 1)/2.to_i %>px; |
---|
73 | margin-right: <%= (column_width + 2 * gutter_width)/2.to_i %>px; |
---|
74 | border-right: 1px solid #ddd; |
---|
75 | } |
---|
76 | |
---|
77 | |
---|
78 | /* Use these classes on an element to push it into the |
---|
79 | next column, or to pull it into the previous column. */ |
---|
80 | |
---|
81 | <% (1..column_count).each do |column| %> |
---|
82 | .pull-<%= column %> { margin-left: -<%= (column * (column_width + gutter_width)).to_i %>px; }<% end %> |
---|
83 | |
---|
84 | <%= (1..column_count).map {|c| ".pull-#{c}" }.join(", ") %> {float: left; position:relative;} |
---|
85 | |
---|
86 | <% (1..(column_count)).each do |column| %> |
---|
87 | .push-<%= column %> { margin: 0 -<%= (column * (column_width + gutter_width)).to_i %>px 1.5em <%= (column * (column_width + gutter_width)).to_i %>px; }<% end %> |
---|
88 | |
---|
89 | <%= (1..column_count).map {|c| ".push-#{c}" }.join(", ") %> {float: left; position:relative;} |
---|
90 | |
---|
91 | |
---|
92 | /* Misc classes and elements |
---|
93 | -------------------------------------------------------------- */ |
---|
94 | |
---|
95 | /* In case you need to add a gutter above/below an element */ |
---|
96 | div.prepend-top, .prepend-top { |
---|
97 | margin-top:1.5em; |
---|
98 | } |
---|
99 | div.append-bottom, .append-bottom { |
---|
100 | margin-bottom:1.5em; |
---|
101 | } |
---|
102 | |
---|
103 | /* Use a .box to create a padded box inside a column. */ |
---|
104 | .box { |
---|
105 | padding: 1.5em; |
---|
106 | margin-bottom: 1.5em; |
---|
107 | background: #e5eCf9; |
---|
108 | } |
---|
109 | |
---|
110 | /* Use this to create a horizontal ruler across a column. */ |
---|
111 | hr { |
---|
112 | background: #ddd; |
---|
113 | color: #ddd; |
---|
114 | clear: both; |
---|
115 | float: none; |
---|
116 | width: 100%; |
---|
117 | height: 1px; |
---|
118 | margin: 0 0 1.45em; |
---|
119 | border: none; |
---|
120 | } |
---|
121 | |
---|
122 | hr.space { |
---|
123 | background: #fff; |
---|
124 | color: #fff; |
---|
125 | visibility: hidden; |
---|
126 | } |
---|
127 | |
---|
128 | |
---|
129 | /* Clearing floats without extra markup |
---|
130 | Based on How To Clear Floats Without Structural Markup by PiE |
---|
131 | [http://www.positioniseverything.net/easyclearing.html] */ |
---|
132 | |
---|
133 | .clearfix:after, .container:after { |
---|
134 | content: "\0020"; |
---|
135 | display: block; |
---|
136 | height: 0; |
---|
137 | clear: both; |
---|
138 | visibility: hidden; |
---|
139 | overflow:hidden; |
---|
140 | } |
---|
141 | .clearfix, .container {display: block;} |
---|
142 | |
---|
143 | /* Regular clearing |
---|
144 | apply to column that should drop below previous ones. */ |
---|
145 | |
---|
146 | .clear { clear:both; } |
---|