Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
198 lines (180 sloc) 5.68 KB
// ---------------------------------------------------------------------------
// Salsa Layout - This is where the real magic happens
// ---------------------------------------------------------------------------
// Micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clear {
&:before, &:after {
content: "\0020";
display: table;
}
&:after { clear: both; }
@if $ie7-support {
& { zoom: 1; }
}
}
// ---------------------------------------------------------------------------
// Box sizing
// Apply this where you want your elements to contain their padding and borders,
// this allows salsa to minimize browsers rounding errors and to use pixels or
// even em gutters and not be bound to %.
// Paul Irish wrote about it here - http://paulirish.com/2012/box-sizing-border-box-ftw/
@mixin box-sizing($model: border-box) {
-moz-box-sizing: $model;
-webkit-box-sizing: $model;
box-sizing: $model;
}
// ---------------------------------------------------------------------------
// Containers
// Apply container to your outer-most container element.
@mixin container {
width: $container-width;
margin: {
left: auto;
right: auto;
}
@include clear;
}
// Nested Container
// Apply nested-container to any layout element that contains other layout
// elements as a nested layout container.
@mixin nested-container {
padding: {
left: 0;
right: 0;
}
@include clear;
}
// ---------------------------------------------------------------------------
// Layout Rows
// Apply row to any layout element that should force a new layout row.
@mixin row {
clear: $flow;
}
// Apply unrow to cancel the previous mixin's effect, e.g. when changing layouts
// using media queries.
@mixin unrow {
clear: none;
}
// ---------------------------------------------------------------------------
// Layout Elements
// Apply this mixin to only set the layout element box-model (padding) but not
// positioning it, the element will simply flow in its natural position in the
// document. see the next mixin for positioned layout-elements.
@mixin cell($container: false) {
@include box-sizing;
@if $container == false {
padding: {
left: $gutter-width / 2;
right: $gutter-width / 2;
}
}
@else if $container == left {
padding-left: $gutter-width / 2;
}
@else if $container == right {
padding-right: $gutter-width / 2;
}
@if $box-sizing-polyfill-path != "" and $ie7-support {
behavior: url($box-sizing-polyfill-path);
}
}
// Backwards compatibility grid-cell() => cell()
@mixin grid-cell($container: false) {
@include cell($container);
}
// span(<$width> [<$gutters>], [<$position>])
//
// span() is the heart of the layout system, it allows you to define the
// layout-element's width and position.
//
// $width:
// - Can be unitless and represent the number of columns to span.
// - May have any kind of width unit (e.g. px, em, % etc.) and provide
// complete control over the element's with, even if not complying with
// the grid layout or if using a grid is not your cup of tea.
// - May be followed by a space and none/left/right to remove gutters, 'none'
// for no gutters (e.g. for nested containers), 'left/right' to leave a
// gutter on one side only.
// $position:
// - Can be unitless and represent the column number the element starts on.
// - May have any kind of width unit (e.g. px, em, % etc.) and provide
// complete control over the element's position, similar to absolute
// positioning only that elements are NOT removed from the normal flow.
// - May be 'omega' for the last item in a row, will float the other way.
// - May be 'row' to force a new layout row.
//
// Examples:
// - Simple layout element spanning 4 columns starting from the 12th column
//
// @include span(4, 12);
//
// - a 40% wide element pushed 60% off the layout's first column
//
// @include span(40%, 60%);
//
// Nested grids -
// - You may provide $width as a simple fraction, so if you want an element
// to span 3 columns inside a 6 columns (nested) grid container, you'll
// probably use 3/6 as $width.
// - $position too.
// - note: 6/6 = 1 column, not 6 columns out of 6, use 100% instead.
//
// Example: 2 column element nested inside a 6 columns nested-container,
// starting from the 4th column.
//
// @include span(2/6, 4/6);
//
@mixin span($width, $position: false) {
@if length($width) > 1 {
@include cell(nth($width, 2));
$width: nth($width, 1);
}
@else {
@include cell;
}
// Width (fraction/columns/units)
@if unitless($width) == false { // has unit, arbitrary width
width: $width;
}
@else if round($width) != $width { // fraction
width: 100% * $width;
}
@else if unitless($width) { // columns
width: 100% / $columns * $width;
}
@else { // fallback
width: $width;
}
// Position (omega/row/fraction/columns/units)
@if $position != omega {
float: $flow; // normal float
}
@if $position == omega { // omega
float: $opos;
}
@else if $position == row { // row
@include row;
}
@else if $position {
margin: {
#{$opos}: -100%;
@if unitless($width) == false { // has unit, arbitrary width
#{$flow}: $position;
}
@else if round($position) != $position { // fraction
#{$flow}: $position * 100%;
}
@else if unitless($position) { // columns
#{$flow}: $position * 100% / $columns;
}
@else { // fallback
#{$flow}: $position;
}
}
}
}
// Backwards compatibility grid() => span()
@mixin grid($width, $position: false) {
@include span($width, $position);
}