Last active
December 19, 2015 01:39
-
-
Save jvlahos/5877700 to your computer and use it in GitHub Desktop.
cols(x) mixin adapted off of Upstatement's ui-block mixin.
This file contains 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
@mixin cols($col-num: 2, $width-1: 0, $width-2: 0, $width-3: 0, $width-4: 0, $width-last: 0, $margin-r:5% ) { | |
@include pie-clearfix; | |
$var-list: $col-num, $width-1, $width-2, $width-3, $width-4, $width-last, $margin-r; | |
//Discovers margin option | |
@for $num from 1 through length($var-list) { | |
$value: nth($var-list, $num); | |
@if $num == ($col-num + 2){ | |
@if $num < length($var-list) { | |
@if type_of($value) == number { | |
@if unit($value) == "%" { | |
$margin-r: $value; | |
} | |
} | |
} | |
} | |
} | |
//Flip functionality | |
$flip: false; | |
@each $var in $var-list { | |
@if $var == flip { | |
$flip: true; | |
} | |
} | |
@if $col-num == flip { $col-num: 2; } | |
@if $margin-r == flip { $margin-r: 5%; } | |
@if $width-1 == flip { $width-1: 0; } | |
@if $width-2 == flip { $width-2: 0; } | |
@if $width-3 == flip { $width-3: 0; } | |
@if $width-4 == flip { $width-4: 0; } | |
//eo flip functionality | |
//Default values given no supplied values | |
@if $width-1 == 0 { $width-1: 100% / $col-num; } | |
@if $width-2 == 0 { $width-2: 100% / $col-num; } | |
@if $width-3 == 0 { $width-3: 100% / $col-num; } | |
@if $width-4 == 0 { $width-4: 100% / $col-num; } | |
@if $width-last == 0 { $width-last: 100% / $col-num; } | |
//width-last needs to be determined no matter what, in case it's not supplied | |
@if $col-num == 5 { $width-last: 100% - $width-4 - $width-3 - $width-2 - $width-1; } | |
@if $col-num == 4 { $width-last: 100% - $width-3 - $width-2 - $width-1; } | |
@if $col-num == 3 { $width-last: 100% - $width-2 - $width-1; } | |
@if $col-num == 2 { $width-last: 100% - $width-1; } | |
//Needed to reset var-list for some reason | |
$var-list: $col-num, $width-1, $width-2, $width-3, $width-4, $width-last, $margin-r; | |
$name-list: first, second, third, fourth, fifth; | |
//First col - second-to-last col | |
@for $num from 2 through $col-num { | |
$width: nth($var-list, $num); | |
$name: nth($name-list, ($num - 1)); | |
$col: $num - 1; | |
> .col-#{$col}, | |
> .col.#{$name} { | |
margin-right: $margin-r/($col-num - 1); | |
width: $width - ($margin-r/$col-num); | |
@include float-left; | |
@if $flip == true { | |
@include float-right; | |
} | |
} | |
} | |
//Last col | |
> .col-#{$col-num}, | |
> .col.#{nth($name-list, $col-num)}, | |
> .col.last { | |
width: $width-last - ($margin-r/$col-num); | |
@include float-left; | |
margin-right: 0; | |
} | |
} |
This file contains 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
.examples { | |
@include cols; | |
@include cols(2); | |
@include cols(flip); | |
@include cols(2, 60%, 40%); | |
@include cols(2, 60%, 40%, flip); | |
@include cols(2, 60%, 40%, 2.5%); | |
@include cols(2, 60%, 40%, 2.5%, flip); | |
@include cols(3); | |
@include cols(3, 20%, 60%, 20%); | |
@include cols(3, 20%, 60%, 20%, 2.5%); | |
@include cols(4); | |
@include cols(4, 10%, 40%, 25%, 25%); | |
@include cols(4, 10%, 40%, 25%, 25%, 2.5%); | |
@include cols(5); | |
@include cols(5, 20%, 40%, 10%, 10%, 20%); | |
@include cols(5, 20%, 40%, 10%, 10%, 20%, 2.5%); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment