sass/ezy/grid/_helpers.scss in ezy-0.3.0.beta vs sass/ezy/grid/_helpers.scss in ezy-0.3.1.beta
- old
+ new
@@ -4,14 +4,22 @@
// ---------------------------------------------------------------------------
// @function layout-width
//
// Returns width based on given number of culumns
-// $columns : Number of columns to calculate width from
-// @return : Width in the same unit as $column-width and $gutter-width
+// $columns : Number of columns to calculate width from
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
+// @return : Width in the same unit as $column-width and $gutter-width
-@function layout-width( $columns ) {
+@function layout-width(
+ $columns,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
+ ) {
@if comparable( $column-width, $gutter-width ) {
@return $columns * ( $column-width + $gutter-width ) - $gutter-width;
} @else {
@warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
}
@@ -23,82 +31,116 @@
// Returns full width of a grid, based on number of columns.
// Similar to layout width, but adds grid padding
// $columns : Number of columns to calculate width from
// $grid-padding : Grid padding to add on both sides of layout width.
// : Defaults to globally set $grid-padding
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
// @return : Width in the same unit as $column-width, $gutter-width and $grid-padding
@function grid-width(
$columns : $total-columns,
- $grid-padding : $grid-padding
+ $grid-padding : $grid-padding,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
@if type-of( $grid-padding ) == "list" {
// If grid padding is set as 2 values (in case left
// and right are not the same), add the two
$grid-padding: nth( $grid-padding, 1 ) + nth( $grid-padding, 2 );
}
- @if comparable( layout-width( $columns ), $grid-padding ) {
- @return layout-width( $columns ) + $grid-padding * 2;
+ @if comparable( layout-width( $columns, $column-width, $gutter-width ), $grid-padding ) {
+ @return layout-width( $columns, $column-width, $gutter-width ) + $grid-padding * 2;
} @else {
@warn "$grid-padding must have the same unit as $column-width and $gutter-width. #{ unit( $grid-padding ) }'s and #{ unit( layout-width( $columns ) ) }'s are not comparable.";
}
}
// ---------------------------------------------------------------------------
// @function context-width
//
-// Returns width based on given number of culumns, plus an extra gutter
+// Returns width based on given number of columns, plus an extra gutter
// Used for % calculations in the grid
-// $columns : Number of columns to calculate width from
-// @return : Width in the same unit as $column-width and $gutter-width
+// $columns : Number of columns to calculate width from
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
+// @return : Width in the same unit as $column-width and $gutter-width
-@function context-width( $columns ) {
- @return layout-width( $columns ) + $gutter-width;
+@function context-width(
+ $columns,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
+ ) {
+ @return layout-width( $columns, $column-width, $gutter-width ) + $gutter-width;
}
// ---------------------------------------------------------------------------
-// @function columns
+// @function span-column-width
//
// Same as layout-width( $columns ), but renamed for better context awareness
-@function span-column-width( $columns ) {
- @return layout-width( $columns );
+@function span-column-width(
+ $columns,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
+ ) {
+ @return layout-width( $columns, $column-width, $gutter-width );
}
// ---------------------------------------------------------------------------
// @function columns
//
// Returns a span columns width. If the grid is fluid, it will be as a
// percentage of the context width
+// $columns : Number of columns to span
+// $context : Number of columns in the current context.
+// : If set to false, the returned value is as in static grid
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
+// @return : Width in the same unit as $column-width and $gutter-width
@function columns(
$columns,
- $context: $total-columns
+ $context : $total-columns,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
@if $is-fluid and $context {
- @return percentage( layout-width( $columns ) / context-width( $context ) );
+ @return percentage( layout-width( $columns, $column-width, $gutter-width ) / context-width( $context, $column-width, $gutter-width ) );
} @else if $is-fluid {
@warn $context-warn;
} @else {
- @return layout-width( $columns );
+ @return layout-width( $columns, $column-width, $gutter-width );
}
}
// ---------------------------------------------------------------------------
// @function gutter
//
// Returns gutter in the same unit as $gutter-width if grid is static
// Returns gutter as a percentage of the context if grid is fluid
-// $context : Number of columns in the current context.
-// : If set to false, the returned value is as in static grid
-// @return : Width as $gutter-width or as a percentage of the context
+// $context : Number of columns in the current context.
+// : If set to false, the returned value is as in static grid
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
+// @return : Width as $gutter-width or as a percentage of the context
@function gutter(
- $context: $total-columns
+ $context: $total-columns,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
@if $is-fluid and $context {
- @return ( percentage( ( $gutter-width ) / context-width( $context ) ) );
+ @return ( percentage( ( $gutter-width ) / context-width( $context, $column-width, $gutter-width ) ) );
} @else if $is-fluid {
@warn $context-warn;
} @else {
@return $gutter-width;
}
@@ -107,21 +149,27 @@
// ---------------------------------------------------------------------------
// @mixin gutters
//
// Sets gutters using the gutter( $context ) function
// $context : Number of columns in the current context.
-// : Only mandatory if grid is fluid
+// : If set to false, the returned value is as in static grid
// $gutter-property : Set to "margin" or "padding"
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
@mixin gutters(
$context : $total-columns,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
@if $gutter-property == "margin" or $gutter-property == "padding" {
#{ $gutter-property }: {
- left: gutter( $context ) / 2;
- right: gutter( $context ) / 2;
+ left: gutter( $context, $column-width, $gutter-width ) / 2;
+ right: gutter( $context, $column-width, $gutter-width ) / 2;
}
} @else {
@warn "$gutter-property must be set to either 'margin' or 'padding'";
}
}
@@ -134,21 +182,27 @@
// $direction : Which direction to apply the offset
// $columns : Number of columns to offset with
// $context : Number of columns in the current context
// $gutter-property : Which gutter property the gutter is set with.
// : Affects the way the offset is applied
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
@mixin offset(
$direction,
$columns,
$context : $total-columns,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
/* Offset #{ $direction } by #{ $columns } columns */
- $offset: columns( $columns, $context ) + gutter( $context ) * 1.5;
+ $offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width ) * 1.5;
@if $gutter-property == "padding" {
- $offset: columns( $columns, $context ) + gutter( $context );
+ $offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width );
}
@if $direction == "both" {
margin: {
left: $offset;
right: $offset;
@@ -164,21 +218,27 @@
// $direction : Which direction to apply the pull
// $columns : Number of columns to pull
// $context : Number of columns in the current context
// $gutter-property : Which gutter property the gutter is set with.
// : Affects the way the pull is applied
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
@mixin pullout(
$direction,
$columns,
$context : $total-columns,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
/* Pull out to the #{ $direction } by #{ $columns } columns */
- $offset: columns( $columns, $context ) + gutter( $context ) / 2;
+ $offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width ) / 2;
@if $gutter-property == "padding" {
- $offset: columns( $columns, $context ) + gutter( $context );
+ $offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width );
}
margin-#{ $direction }: -($offset);
}
// ---------------------------------------------------------------------------
@@ -187,15 +247,21 @@
// $direction : Which direction to reset.
// : Defaults to "both"
// $context : Number of columns in the current context
// $gutter-property : Which gutter property the gutter is set with.
// : Used to re-apply gutter in the right property
+// $column-width : Column width in current syntax
+// : Defaults to globally set $column-width
+// $gutter-width : Gutter width in current syntax
+// : Defaults to globally set $gutter-width
@mixin reset(
$direction : "both",
$context : $total-columns,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
@if $gutter-property == "padding" {
@if $direction == "both" {
margin: {
left: 0;
@@ -204,13 +270,13 @@
} @else {
margin-#{ $direction }: 0;
}
} @else {
@if $direction == "both" {
- @include gutters( $context, $gutter-property );
+ @include gutters( $context, $gutter-property, $column-width, $gutter-width );
} @else {
- #{ $gutter-property }-#{ $direction }: gutter( $context ) / 2;
+ #{ $gutter-property }-#{ $direction }: gutter( $context, $column-width, $gutter-width ) / 2;
}
}
}
// ---------------------------------------------------------------------------
@@ -218,32 +284,40 @@
// Mapping @mixin reset()
@mixin remove-offset(
$direction : "both",
$context : $total-columns,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
/* Removing offset #{ $direction } */
@include reset(
$direction : $direction,
$context : $context,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
);
}
// ---------------------------------------------------------------------------
// @mixin remove-pullout
// Mapping @mixin reset()
@mixin remove-pullout(
$direction : "both",
$context : $total-columns,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
) {
/* Removing pullout #{ $direction } */
@include reset(
$direction : $direction,
$context : $context,
- $gutter-property : $gutter-property
+ $gutter-property : $gutter-property,
+ $column-width : $column-width,
+ $gutter-width : $gutter-width
);
}