Skip to content

Instantly share code, notes, and snippets.

@jvlahos
Last active December 19, 2015 01:38
Show Gist options
  • Save jvlahos/5876851 to your computer and use it in GitHub Desktop.
Save jvlahos/5876851 to your computer and use it in GitHub Desktop.
ui-grid(x) with margin in second position
.examples {
@include ui-grid;
@include ui-grid(2);
@include ui-grid(flip);
@include ui-grid(2, 2.5%, 60%, 40%);
@include ui-grid(2, 2.5%, 60%, 40%, flip);
@include ui-grid(3);
@include ui-grid(3, 2.5%);
@include ui-grid(3, 5%, 20%, 60%, 20%);
@include ui-grid(4);
@include ui-grid(4, 2.5%);
@include ui-grid(4, 5%, 10%, 40%, 25%, 25%);
@include ui-grid(5);
@include ui-grid(5, 2.5%);
@include ui-grid(5, 5%, 20%, 40%, 10%, 10%, 20%);
}
@mixin ui-grid($ui-grid-num: 2, $margin-r:5%, $width-1: 0%, $width-2: 0%, $width-3: 0%, $width-4: 0%, $width-last: 0% ) {
@include pie-clearfix;
//Reference variable. Gets dicy when math placed in @for function
$ui-grid-num-less-one: $ui-grid-num - 1;
//Flip functionality
//Supports flipping any ui-grid(2...)
//@include ui-grid(2, flip); ui-grid(flip); ui-grid(2, 5%, 40%, 60%, flip);
$flip: false;
$var-list: $ui-grid-num, $margin-r, $width-1, $width-2, $width-3;
@each $var in $var-list {
@if $var == flip {
$flip: true;
}
}
@if $ui-grid-num == flip { $ui-grid-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%; }
//eo flip functionality
//Default values given no supplied values
@if $width-1 == 0% { $width-1: 100% / $ui-grid-num; }
@if $width-2 == 0% { $width-2: 100% / $ui-grid-num; }
@if $width-3 == 0% { $width-3: 100% / $ui-grid-num; }
@if $width-4 == 0% { $width-4: 100% / $ui-grid-num; }
@if $width-last == 0% { $width-last: 100% / $ui-grid-num; }
//width-last needs to be determined no matter what, in case it's not supplied
//Technically, you don't even need to supply the width of the last column anymore
@if $ui-grid-num == 5 { $width-last: 100% - $width-4 - $width-3 - $width-2 - $width-1; }
@if $ui-grid-num == 4 { $width-last: 100% - $width-3 - $width-2 - $width-1; }
@if $ui-grid-num == 3 { $width-last: 100% - $width-2 - $width-1; }
@if $ui-grid-num == 2 { $width-last: 100% - $width-1; }
//ui-block-1 is a nice given
> .ui-block-1,
> .ui-block.first {
width: $width-1 - ($margin-r/$ui-grid-num);
@if $flip == true {
@include float-right;
} @else {
@include float-left;
margin-right: $margin-r/($ui-grid-num - 1);
}
}
//ui-block-2 through x, whatever necessary
$widths-list: $width-1, $width-2, $width-3, $width-4;
@for $num from 2 through $ui-grid-num-less-one {
$width: nth($widths-list, $num);
> .ui-block-#{$num} {
width: $width - ($margin-r/$ui-grid-num);
@include float-left;
margin-right: $margin-r/($ui-grid-num - 1);
}
}
//ui-block-(last) derived
> .ui-block-#{$ui-grid-num},
> .ui-block.last {
width: $width-last - ($margin-r/$ui-grid-num);
@if $flip == true {
@include float-left;
} @else {
@include float-right;
}
margin-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment