137 lines
4.2 KiB
Plaintext
Executable File
137 lines
4.2 KiB
Plaintext
Executable File
/* --------------------------------------------------------------
|
|
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. */
|
|
<%= (1..column_count).map {|column| "input.span-#{column}, textarea.span-#{column}"}.join(", ") %> {
|
|
border-left-width: <%= input_border %>px!important;
|
|
border-right-width: <%= input_border %>px!important;
|
|
padding-left: <%= input_padding %>px!important;
|
|
padding-right: <%= input_padding %>px!important;
|
|
}
|
|
<% (1..column_count).each do |column| %>
|
|
input.span-<%= column %>, textarea.span-<%= column %> { width: <%= ((column_width + gutter_width) * (column - 1) + column_width - 2*(input_padding + input_border))%>px!important; }<% end %>
|
|
|
|
/* 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 + 2*gutter_width - 1)/2.to_i %>px;
|
|
margin-right: <%= (column_width + 2 * gutter_width)/2.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: "\0020";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
overflow:hidden;
|
|
}
|
|
.clearfix, .container {display: block;}
|
|
|
|
/* Regular clearing
|
|
apply to column that should drop below previous ones. */
|
|
|
|
.clear { clear:both; }
|