// 'the_grid' determines width by taking column count, calculates gutter count // default setting for grid is ``em`` this is specified in ``_config.scss`` @mixin the_grid($col_count, $col_width, $grid_uom, $grid_padding_lr, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context) { $col_gutter_width: ($col_count - 1) * $col_gutter + ($col_count * $col_width); //determines full col width with gutters $grid_context_width: $grid_context * 80; // determines width of contextual grid block for calculating percentages @include grid_placement($grid_align, $grid_uom, $grid_child, $grid_context_width, $margin: $col_gutter / 2); @if $grid_uom == em { @if $grid_border > 0 { border: #{$grid_border}px $standard_border_style $border_color; } @if $grid_padding_lr > 0 { padding: { left: em($grid_padding_lr); right: em($grid_padding_lr); } } @if $grid_padding_tb > 0 { padding: { top: em($grid_padding_tb); bottom: em($grid_padding_tb); } } $grid_width: em($col_gutter_width); width: $grid_width; // fallback for unsupported browsers $grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2)); @if $grid_width_fallback < $col_gutter_width { .ie7 & { width: #{$grid_width_fallback}px; } } } @else if $grid_uom == percent { @if $grid_border > 0 { border: #{$grid_border}px $standard_border_style $border_color; } $grid_width: $col_gutter_width / $grid_context_width * 100%; @if $grid_padding_lr > 0 { padding: { //left: $grid_padding_lr / $grid_960; left: $grid_padding_lr / $grid_context_width * 100%; right: $grid_padding_lr / $grid_context_width * 100%; } } @if $grid_padding_tb > 0 { padding: { top: $grid_padding_tb / $grid_context_width * 100%; bottom: $grid_padding_tb / $grid_context_width * 100%; } } width: $grid_width; // fallback for unsupported browsers $grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2)); @if $grid_width_fallback < $col_gutter_width { .ie7 & { width: $grid_width_fallback / $grid_context_width * 100%; } } } @else if $grid_uom == combo { $grid_width: $col_gutter_width / $grid_context_width * 100%; @if $grid_padding_lr > 0 { padding: { left: em($grid_padding_lr); right: em($grid_padding_lr); } } @if $grid_padding_tb > 0 { padding: { top: em($grid_padding_tb); bottom: em($grid_padding_tb); } } width: $grid_width; // fallback for unsupported browsers $grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2)); @if $grid_width_fallback < $col_gutter_width { .ie7 & { width: $grid_width_fallback / $grid_context_width * 100%; } } } }