sass/ezy/_grid.scss in ezy-0.0.2 vs sass/ezy/_grid.scss in ezy-0.0.3
- old
+ new
@@ -1,31 +1,66 @@
+// ---------------------------------------------------------------------------
+// Mandatory grid settings
+// Defaults: can be overridden
-$column-width: 4em !default;
-$gutter-width: 1em !default;
-$total-columns: 12 !default;
-$is-fluid: true !default;
+$column-width: 4em !default;
+$gutter-width: 1em !default;
+$gutter-property: "margin" !default;
+$total-columns: 12 !default;
+$is-fluid: true !default;
-$grid-init: false;
+// ---------------------------------------------------------------------------
+// Variables used in grid context
+$grid-init: false;
$context-warn: "You must set $context if $is-fluid is set to true.";
+// ---------------------------------------------------------------------------
+// @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
+
@function layout-width( $columns ) {
@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.";
}
}
+// ---------------------------------------------------------------------------
+// @function context-width
+//
+// Returns width based on given number of culumns, 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
+
@function context-width( $columns ) {
@return layout-width( $columns ) + $gutter-width;
}
+// ---------------------------------------------------------------------------
+// @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 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
+
@function gutter(
$context: false
) {
@if $is-fluid and $context {
@return ( percentage-round( ( $gutter-width / 2 ) / context-width( $context ) ) );
@@ -34,42 +69,81 @@
} @else {
@return $gutter-width / 2;
}
}
+// ---------------------------------------------------------------------------
+// @mixin gutters
+//
+// Sets gutters using the gutter( $context ) function
+// $context : Number of columns in the current context.
+// : Only mandatory if grid is fluid
+// $gutter-property : Set to "margin" or "padding"
+
@mixin gutters(
- $context: false
+ $context: false,
+ $gutter-property: $gutter-property
) {
- margin: {
- left: gutter( $context );
- right: gutter( $context );
+ @if $gutter-property == "margin" or $gutter-property == "padding" {
+ #{ $gutter-property }: {
+ left: gutter( $context );
+ right: gutter( $context );
+ }
+ } @else {
+ @warn "$gutter-property must be set to either 'margin' or 'padding'";
}
}
+// ---------------------------------------------------------------------------
+// Grid master placeholder selector
+// Adds cleafix and centers page in browser
+
%ezy-master {
@extend %clearfix;
margin: {
left: auto;
right: auto;
}
}
+// ---------------------------------------------------------------------------
+// @mixin master
+//
+// Sets width on page. If the grid is fluid, it's set as a max-width
+// Extends the grid master placeholder selector
+// $context : Number of columns in the current context.
+
@mixin master(
- $columns
+ $context
) {
@if $is-fluid {
- max-width: layout-width( $columns );
+ max-width: layout-width( $context );
} @else {
- width: layout-width( $columns );
+ width: layout-width( $context );
}
@extend %ezy-master;
}
+// ---------------------------------------------------------------------------
+// Grid container placeholder selector
+// Adds cleafix
+
%ezy-container {
@extend %clearfix;
}
+// ---------------------------------------------------------------------------
+// @mixin container
+//
+// Sets width on page. If the grid is fluid, it's set as a max-width
+// Extends the grid master placeholder selector
+// $context : Number of columns in the current context
+// : Only mandatory if grid is fluid
+// $at-breakpoint : Set to true if mixin is called within a media query
+// : Avoids SASS compillation errors from extending within
+// : a media query
+
@mixin container(
$context: false,
$at-breakpoint: false
) {
$pullout: -( $gutter-width )/2;
@@ -85,10 +159,23 @@
@if (not $at-breakpoint) {
@extend %ezy-container;
}
}
+// ---------------------------------------------------------------------------
+// @mixin grid-init
+//
+// Prints out placeholder selectors used with columns. Helps reduce the CSS output.
+//
+// Should be called after setting grid variables:
+// ----------------
+// $column-width
+// $gutter-width
+// $gutter-property
+// $total-columns
+// ----------------
+
@mixin grid-init() {
$grid-init: true;
@if $is-fluid {
@for $i from 1 through $total-columns {
%ezy-column-#{ $i } {
@@ -102,14 +189,28 @@
@include gutters;
}
}
}
+// ---------------------------------------------------------------------------
+// @mixin span-columns
+//
+// Sets width and gutter on columns
+// Uses @extend for gutters outside media queries if grid-init() has been called
+// $columns : Number of columns to span
+// $context : Number of columns in the current context
+// : Only mandatory if grid is fluid
+// $at-breakpoint : Set to true if mixin is called within a media query
+// : Avoids SASS compillation errors from extending within
+// : a media query
+// $gutter-property : Overrides the global $gutter-property
+
@mixin span-columns(
$columns,
$context: false,
- $at-breakpoint: false
+ $at-breakpoint: false,
+ $gutter-property: $gutter-property
) {
$width: span-column-width( $columns );
/* Spanning #{ $columns } of #{ $context } columns */
@if $is-fluid and $context {
$context-width: context-width( $context );
@@ -120,28 +221,28 @@
}
@if $is-fluid {
@if (not $at-breakpoint) {
@if $total-columns < $context {
@warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
- @include gutters( $context );
+ @include gutters( $context, $gutter-property );
} @else if (not $grid-init) {
@warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
- @include gutters( $context );
+ @include gutters( $context, $gutter-property );
} @else {
@extend %ezy-column-#{ $context };
}
} @else {
- @include gutters( $context );
+ @include gutters( $context, $gutter-property );
}
@if $columns > $context {
@warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
}
@if (not $context) {
@warn $context-warn;
}
} @else if (not $grid-init) {
@warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
- @include gutters( $context );
+ @include gutters( $context, $gutter-property );
} @else {
@extend %ezy-column;
}
}