Skip to content

Added the ability to define asymmetrical grids. #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pixelwhip wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added the ability to define asymmetrical grids. #16

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d15d269
Added the ability to define asymetrical grids.
pixelwhip Apr 9, 2012
193bb9f
Changed space-before and -after to margin-before and -after.
pixelwhip Apr 9, 2012
33faed2
Fixed spelling of asymmetric.
pixelwhip Apr 9, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 68 additions & 10 deletions stylesheets/zen/_grids.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,19 +78,61 @@ $zen-reverse-all-floats: false !default;
$column-span,
$column-position,
$float-direction: $zen-float-direction,
$column-count: $zen-column-count,
$columns: $zen-column-count,
$gutter-width: $zen-gutter-width,
$grid-width: $zen-grid-width,
$box-sizing: $zen-box-sizing,
$reverse-all-floats: $zen-reverse-all-floats,
$auto-include-item-base: $zen-auto-include-item-base
) {

// Calculate the unit width.
$unit-width: $grid-width / $column-count;
$width: 0;
$margin-before: 0;
$margin-after: 0;

// If $columns is a list, add up the appropriate column widths.
@if type-of($columns) == "list" {
$length: length($columns);
$width: zen-asymmetric-grid-width(
$column-span,
$column-position
);

// Calculate the margin before the grid-item.
@if $column-position == 1 {
$margin-before: 0;
}
@else {
$margin-before: zen-asymmetric-grid-width(
$column-position - 1,
1
);
}

// Calculate the margin after the grid-item.
$margin-after: 0 - $width - $margin-before;

@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
// Display a warning if units are % and add up to more than 100%.
@if unit($width) == "%" {
@if (zen-asymmetric-grid-width($length, 1) > 100% ) {
@warn "Your column widths are greater than 100%, which may cause columns to wrap.";
}
}
}

// Otherwise, set the $unit-width based on equal width columns.
@else {
// Calculate the unit width.
$unit-width: $grid-width / $columns;

// Display a warning if $columns is does not a multiple of $grid-width.
@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
}

$width: $column-span * $unit-width;
$margin-before: ($column-position - 1) * $unit-width;
$margin-after: (1 - $column-position - $column-span) * $unit-width;
}

// Determine the float direction and its reverse.
Expand All @@ -101,7 +143,6 @@ $zen-reverse-all-floats: false !default;
$rev: zen-direction-flip($dir);

float: $dir;
$width: $column-span * $unit-width;
@if $box-sizing == content-box {
@if not comparable($width, $gutter-width) {
$units-gutter: unit($gutter-width);
Expand All @@ -112,8 +153,8 @@ $zen-reverse-all-floats: false !default;
}
width: $width;
margin: {
#{$dir}: ($column-position - 1) * $unit-width;
#{$rev}: (1 - $column-position - $column-span) * $unit-width;
#{$dir}: $margin-before;
#{$rev}: $margin-after;
}

// Auto-apply the unit base mixin.
Expand Down Expand Up @@ -229,10 +270,10 @@ $zen-reverse-all-floats: false !default;
$auto-include-flow-item-base: $zen-auto-include-flow-item-base
) {

$columns: $column-count;
$columns: $columns;
@if unit($grid-width) == "%" {
@if $parent-column-count == false {
@warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
@warn "For responsive layouts with a percentage-based grid width, you must set the $columns to the number of columns that the parent element spans.";
}
@else {
$columns: $parent-column-count;
Expand Down Expand Up @@ -302,6 +343,23 @@ $zen-reverse-all-floats: false !default;
@return $half-gutter;
}

//
// Returns the width of an asymmetrical zen-grid-item.
//
@function zen-asymmetric-grid-width (
$column-span,
$column-position,
$columns: $zen-column-count
) {
$width: 0;
$i: 0;

@for $i from $column-position through ($column-position + $column-span - 1) {
$width: $width + nth($columns, $i);
}
@return $width;
}

// Returns the opposite direction, given "left" or "right".
@function zen-direction-flip($dir) {
@if $dir == left {
Expand Down