photomix/resources/DummyHTML/css/joshuaclayton-blueprint-css-05312a805eca539ab85e435cfd94bdedfd12ab2e/lib/blueprint/grid.css.erb

137 lines
4.2 KiB
Plaintext
Raw Normal View History

2009-06-09 21:38:32 +02:00
/* --------------------------------------------------------------
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; }