Import this to have a liquid grid.
The original liquid grid documentation is here.
By default the container takes 80% of the canvas, you can override this:
.container {
width: 99%
}
This file can be imported using:
@import "blueprint/liquid"
24
Main layout grid, override these constants to build your grid and container sizes. The width shown gives the right floored percentage values.
3.167%
1.042%
80%
Do not edit below this line unless you really know what you're doing.
950px
-($blueprint-liquid-grid-margin + $blueprint-liquid-grid-width)
@function span-fluid($n) @return $blueprint-liquid-grid-width * $n + $blueprint-liquid-grid-margin * ($n - 1)
@function span-fluid($n) {
@return $blueprint-liquid-grid-width * $n + $blueprint-liquid-grid-margin * ($n - 1);
}
Return the width of $n columns in percents.
=blueprint-liquid-grid
// A container should group all your columns
.container
+container
// Use these classes (or mixins) to set the width of a column.
@for $n from 1 to $blueprint-liquid-grid-columns + 1
.span-#{$n}
width: span-fluid($n)
div
&.span-#{$n}
+column($n, $n == $blueprint-liquid-grid-columns)
// The last column in a row needs this class (or mixin) or it will end up on the next row.
div.last
+last
// Add these to a column to append empty cols.
@for $n from 1 to $blueprint-liquid-grid-columns
.append-#{$n}
+append($n)
// Add these to a column to prepend empty cols.
@for $n from 1 to $blueprint-liquid-grid-columns
.prepend-#{$n}
+prepend($n)
// Use these classes on an element to push it into the
// next column, or to pull it into the previous column.
@for $n from 1 to $blueprint-liquid-grid-columns + 1
.pull-#{$n}
+pull($n)
@for $n from 1 to $blueprint-liquid-grid-columns + 1
.push-#{$n}
+push($n)
@mixin blueprint-liquid-grid {
// A container should group all your columns
.container {
@include container;
}
// Use these classes (or mixins) to set the width of a column.
@for $n from 1 to $blueprint-liquid-grid-columns + 1 {
.span-#{$n} {
width: span-fluid($n);
}
div {
&.span-#{$n} {
@include column($n, $n == $blueprint-liquid-grid-columns);
}
}
}
// The last column in a row needs this class (or mixin) or it will end up on the next row.
div.last {
@include last;
}
// Add these to a column to append empty cols.
@for $n from 1 to $blueprint-liquid-grid-columns {
.append-#{$n} {
@include append($n);
}
}
// Add these to a column to prepend empty cols.
@for $n from 1 to $blueprint-liquid-grid-columns {
.prepend-#{$n} {
@include prepend($n);
}
}
// Use these classes on an element to push it into the
// next column, or to pull it into the previous column.
@for $n from 1 to $blueprint-liquid-grid-columns + 1 {
.pull-#{$n} {
@include pull($n);
}
}
@for $n from 1 to $blueprint-liquid-grid-columns + 1 {
.push-#{$n} {
@include push($n);
}
}
}
=container min-width: $blueprint-liquid-container-min-width width: $blueprint-liquid-container-width margin: 0 auto +clearfix
@mixin container {
min-width: $blueprint-liquid-container-min-width;
width: $blueprint-liquid-container-width;
margin: 0 auto;
@include clearfix;
}
=span($n, $important: false)
@warn "The span mixin is deprecated. Please use the span-fluid function instead. E.g. width: span-fluid(#{$n})"
$width: span-fluid($n)
@if $important
width: $width !important
@else
width: $width
@mixin span($n, $important: false) {
@warn "The span mixin is deprecated. Please use the span-fluid function instead. E.g. width: span-fluid(#{$n})";
$width: span-fluid($n);
@if $important {
width: $width !important;
}
@else {
width: $width;
}
}
=last margin-right: 0
@mixin last {
margin-right: 0;
}
=column($n, $last: false)
+float-left
overflow: hidden
width: span-fluid($n)
@if $last
+last
@else
margin-right: $blueprint-liquid-grid-margin
@mixin column($n, $last: false) {
@include float-left;
overflow: hidden;
width: span-fluid($n);
@if $last {
@include last;
}
@else {
margin-right: $blueprint-liquid-grid-margin;
}
}
=append($n) padding-right: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n
@mixin append($n) {
padding-right: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n;
}
=prepend($n) padding-left: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n
@mixin prepend($n) {
padding-left: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n;
}
=pull($n, $last: false) margin-left: $blueprint-liquid-grid-push-pull * $n
@mixin pull($n, $last: false) {
margin-left: $blueprint-liquid-grid-push-pull * $n;
}
=push($n)
+float-right
margin:
top: 0
left: $blueprint-liquid-grid-margin
right: $blueprint-liquid-grid-push-pull * $n
bottom: 0
@mixin push($n) {
@include float-right;
margin: {
top: 0;
left: $blueprint-liquid-grid-margin;
right: $blueprint-liquid-grid-push-pull * $n;
bottom: 0;
};
}
=border border-right: 1px solid #eeeeee
@mixin border {
border-right: 1px solid #eeeeee;
}
=colborder padding-right: $blueprint-liquid-grid-margin * 2 margin-right: $blueprint-liquid-grid-margin * 2 +border
@mixin colborder {
padding-right: $blueprint-liquid-grid-margin * 2;
margin-right: $blueprint-liquid-grid-margin * 2;
@include border;
}
=colruler background: #dddddd color: #dddddd clear: both width: 100% height: 0.083em margin: 0 margin-left: $blueprint-liquid-grid-margin * 2 margin-right: $blueprint-liquid-grid-margin * 2 border: none
@mixin colruler {
background: #dddddd;
color: #dddddd;
clear: both;
width: 100%;
height: 0.083em;
margin: 0;
margin-left: $blueprint-liquid-grid-margin * 2;
margin-right: $blueprint-liquid-grid-margin * 2;
border: none;
}
=colspacer +colruler background: white color: white
@mixin colspacer {
@include colruler;
background: white;
color: white;
}