-
-
Save cybermarinella/2595303 to your computer and use it in GitHub Desktop.
CSS:Grid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Main Variables: | |
| // I'm placing an underscore before each variable | |
| // because I'm using rather generic names | |
| // I'm using the underscore | |
| // to avoid any accidents: | |
| $_columns: 12 !default; // Total number of columns | |
| $_column-width: 60px !default; // Width of a single column | |
| $_gutter: 20px !default; // Width of the gutter | |
| // Calculate the total width: | |
| $_width: $_columns * ($_column-width + $_gutter); | |
| // A Function to calculate width: | |
| // Example usage: (based on default values) | |
| // get_width(3, false) would return 240px | |
| // get_width(3) or get_width(3, true) would return 220px; | |
| // and plain get_width() or get_width would return 940px; | |
| @function get_width($columns:$_columns, $onlyInnerWidth: true, $_subtract:0) | |
| { | |
| // First set a default return value | |
| $return: ($_column-width + $_gutter) * $columns - $_subtract !default; | |
| // If we want to get only the inner width (without gutter) | |
| @if $onlyInnerWidth == true | |
| { | |
| // Return the total calculated width, without the margins | |
| // If the second parameter of this function is not specified | |
| // This is what is going to be returned | |
| $return: ($_column-width + $_gutter) * $columns - $_gutter - $_subtract; | |
| } | |
| @return $return; | |
| } | |
| // ClearFix Mixin | |
| // Thanks to http://nicolasgallagher.com/micro-clearfix-hack/ | |
| @mixin clearfix { | |
| *zoom:1; | |
| &:before, &:after | |
| { | |
| content: ""; | |
| display:table; | |
| } | |
| &:after | |
| { | |
| clear:both; | |
| } | |
| } | |
| // Column Mixin: | |
| // We're defining the default values as follows: | |
| // Default Column Count: Max Column Count | |
| // Padding (explained below): 0 | |
| // Margin is the gutter width, but can be overridden | |
| @mixin column($columns: $_columns, $_subtract:0, $_offset: null, $gutter:$_gutter) | |
| { | |
| // Default Properties for a column: | |
| display:inline; | |
| float:left; | |
| $getWidth: get_width($columns, true, $_subtract); // Use the width calculation function to get the width | |
| @if $gutter != 0 | |
| { | |
| // Check for Alpha (a, first, f); | |
| @if $_offset == alpha { | |
| margin-left: -($gutter / 2);margin-right:$gutter/2; | |
| } | |
| @else if $_offset == a { | |
| margin-right: ($gutter / 2);margin-left:0; | |
| } | |
| @else if $_offset == first { | |
| margin-right: ($gutter / 2);margin-left:0; | |
| } | |
| @else if $_offset == f { | |
| margin-right: ($gutter / 2);margin-left:0; | |
| } | |
| // Check for Omega (o, l, last); | |
| @else if $_offset == omega { | |
| margin-right: -($gutter / 2);margin-left:$gutter/2; | |
| } | |
| @else if $_offset == o { | |
| margin-left: ($gutter / 2);margin-right:0; | |
| } | |
| @else if $_offset == last { | |
| margin-left: ($gutter / 2);margin-right:0; | |
| } | |
| @else if $_offset == l { | |
| margin-left: ($gutter / 2);margin-right:0; | |
| } | |
| // No Margins | |
| @else if $_offset == full { | |
| $getWidth: $getWidth + $gutter; | |
| } | |
| @else if $_offset == none { | |
| $getWidth: $getWidth + $gutter; | |
| } | |
| @else { | |
| margin-left: ($gutter / 2); | |
| margin-right: ($gutter / 2); | |
| } | |
| } | |
| width: $getWidth; | |
| } | |
| // Finally, we need a wrapper for our columns. | |
| // This typically is a main content wrapper, | |
| // But just in case someone finds an alternative use of this, | |
| // we shouldhave the flexibility | |
| // So wrapper( column count, center ?, subtract) | |
| @mixin wrapper($columns: $_columns, $center:true, $_subtract:0) | |
| { | |
| // Because this is a wrapper, we don't need the outer gutter - we need the full width | |
| $getWrapperWidth: get_width($columns, false); | |
| // In case there is a need to subtract the wrapper | |
| $wrapperWidth: $getWrapperWidth - $_subtract; | |
| width:$wrapperWidth; | |
| // If we want the wrapper to be centered (by default we do) | |
| @if $center == true | |
| { | |
| margin-left:auto; | |
| margin-right:auto; | |
| } | |
| // And clear the mess afterwards: | |
| @include clearfix; | |
| } | |
| // To be able to use columns inside another element, | |
| // You need to set that element to be a container (of how many columns) | |
| // So: @include container(x_number_of_columns) | |
| @mixin container($columns:$_columns, $_subtract:0) | |
| { | |
| display:inline; | |
| float:left; | |
| $getWidth: get_width($columns, false); // Use the width calculation function to get | |
| $columnWidth: $getWidth - $_subtract; | |
| width: $columnWidth; | |
| } | |
| // Container Alias | |
| @mixin fullwidth($columns:$_columns, $_subtract:0) { | |
| @include container($columns, $_subtract) | |
| } | |
| @mixin alpha { | |
| margin-left:0; | |
| } | |
| @mixin omega { | |
| margin-right:0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment