// ————————————————————————— // Imports
@import “compass/utilities/general/clearfix”; @import “compass/css3/box-sizing”;
// ————————————————————————— // Border-Box Sizing
// Apply the border-box sizing model to all elements // and adjust the grid math appropriately. @mixin border-box-sizing {
$border-box-sizing: true !global; * { @include box-sizing(border-box); }
}
// ————————————————————————— // Container
// Set the width of a container // // $columns : The number of columns in the Grid Layout. @mixin set-container-width(
$columns : $total-columns, $style : $container-style, $px-vals : $pixel-values-only
){
$width: container-outer-width($columns); @if $style == 'static' { @if $px-vals == true { width: round(convert-length($width, px)); } @else { @include rem(width, $width); } } @else { @if $style == 'fluid' { @if unit($width) == '%' { @if $px-vals == true { width: round(convert-length($width, px)); } @else { @include rem(width, $width); } } } @else { @if $px-vals == true { max-width: round(convert-length($width, px)); } @else { @include rem(max-width, $width); } @include for-legacy-browser(ie,"6") { @if unit($width) == 'rem' { _width: round(convert-length($width, px)); } @else { _width: $width; } } } }
}
// Set the outer grid-containing element(s). // // $columns : The number of columns in the container. @mixin apply-container(
$columns : $total-columns, $px-vals : $pixel-values-only
){
@include pie-clearfix; @include set-container-width($columns); @if $px-vals == true { padding-left: round(convert-length($grid-padding, px)); padding-right: round(convert-length($grid-padding, px)); } @else { @include rem(padding-left, $grid-padding); @include rem(padding-right, $grid-padding); } margin: { left: auto; right: auto; }
}
// Set one or more layouts on a grid-containing element at any number of media-query breakpoints. // // $media-layout-1 : [default:$total-columns] A list of values including - // : One unitless number (representing columns in a layout) // : Two optional lengths (representing min and max-width media-query breakpoints). // $media-layout-2 …-10 : [optional] Same as $media-layout-1 @mixin container(
$media-layouts...
){
$media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns); @each $ml in $media-layouts { @if is-default-layout($ml) { @include apply-container; } @else { @include at-breakpoint($ml) { @include apply-container; } } }
}
// ————————————————————————— // Columns
// Create a grid element spanning any number of 'columns' in a grid 'context'. // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $padding : [optional] Padding applied to the inside of individual grid columns. // : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px) // : Padding values are applied only on the horizontal axis in from-to order // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin span-columns(
$columns, $context : $total-columns, $padding : false, $from : $from-direction, $style : fix-static-misalignment()
) {
$from : unquote($from); $to : opposite-position($from); $pos : split-columns-value($columns,position); $cols : split-columns-value($columns,columns); $pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); $pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); @if $padding != false { $pad-from : nth($padding, 1); @if length($padding) > 1 { $pad-to: nth($padding, 2); } @else { $pad-to: $pad-from; } $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context)); $pad-to : if($style == static, $pad-to, relative-width($pad-to, $context)); padding-#{$from}: $pad-from; padding-#{$to}: $pad-to; } width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from); @if ($pos == 'omega') { @include omega($from); } @else { float: $from; margin-#{$to}: gutter($context, $style); @include for-legacy-browser(ie, "6") { display: inline; } }
}
// Apply to elements spanning the last column, to account for the page edge. // Only needed as an override. Normally 'omega' can just be called by `columns`. // // $from : The start-direction for your document. @mixin omega(
$from : $from-direction
) {
$from : unquote($from); $to : opposite-position($from); $hack : opposite-position($omega-float); float: $omega-float; margin-#{$to}: 0; @include for-legacy-browser(ie, "6", "7") { *margin-#{$hack}: - $gutter-width; @include for-legacy-browser(ie, "6") { display: inline; } }
}
// Shortcut to apply omega to a specific subset of elements. // // $n : [first | only | last | <equation>] // $selector : [child | last-child | of-type | last-of-type ] // $from : The start-direction for your document. @mixin nth-omega(
$n : last, $selector : child, $from : $from-direction
) {
$from : unquote($from); &:#{format-nth($n,$selector)} { @if $n == "first" { @include omega($from); } @else { @include with-browser-ranges(css-sel3) { @include omega($from); } } }
}
// ————————————————————————— // Resets
// Reset a '+columns' grid element to default block behavior // // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin reset-columns(
$from: $from-direction
) {
$from : unquote($from); $to : opposite-position($from); $hack : opposite-position($omega-float); float: none; width: auto; margin-#{$to}: auto; @include for-legacy-browser(ie, "6", "7") { *margin-#{$hack}: auto; @include for-legacy-browser(ie, "6") { display: block; } }
}
// Apply to elements previously set as omega. // This will return floats and margins back to non-omega settigns. // // $context : [optional] The context (columns spanned by parent). // $from : The start-direction for your document. // $style : The container style to use. @mixin remove-omega(
$context : $total-columns, $from : $from-direction, $style : fix-static-misalignment()
) {
$from : unquote($from); $to : opposite-position($from); $hack : opposite-position($omega-float); float: $from; margin-#{$to}: gutter($context, $style); @include for-legacy-browser(ie, "6", "7") { *margin-#{$hack}: auto; }
}
// Shortcut to apply remove-omega to a specific subset of elements. // // $n : [first | only | last | <equation>] // $selector : [child | last-child | of-type | last-of-type ] // $context : [optional] The context (columns spanned by parent). // $from : The start-direction for your document. // $style : The container style to use. @mixin remove-nth-omega(
$n : last, $selector : child, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment()
) {
$from : unquote($from); &:#{format-nth($n,$selector)} { @if $n == "first" { @include remove-omega($context, $from, $style); } @else { @include with-browser-ranges(css-sel3) { @include remove-omega($context, $from, $style); } } }
}
// ————————————————————————— // Change Settings
@mixin with-grid-settings(
$columns: $total-columns, $width: $column-width, $gutter: $gutter-width, $padding: $grid-padding
) {
// keep the defaults around $default-columns: $total-columns; $default-width: $column-width; $default-gutter: $gutter-width; $default-padding: $grid-padding; // use the new settings $total-columns: $columns !global; $column-width: $width !global; $gutter-width: $gutter !global; $grid-padding: $padding !global; // apply to contents @content; // re-instate the defaults $total-columns: $default-columns !global; $column-width: $default-width !global; $gutter-width: $default-gutter !global; $grid-padding: $default-padding !global;
}