Created
March 2, 2014 21:14
-
-
Save corysimmons/9314018 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// Grid Settings | |
$jeet-gutter: 3 !default; | |
$jeet-parent-first: false !default; | |
$jeet-layout-direction: LTR !default; | |
$g: $jeet-gutter; | |
@function -get_span($ratio: 1) { | |
@return $ratio * 100; | |
} | |
@function -get_column($ratios: 1, $gutter: $jeet-gutter) { | |
$ratios: -reverse($ratios) unless $jeet-parent-first is true; | |
$w: 100; | |
@each $ratio in $ratios { | |
$g: $gutter / $w * 100; | |
$w: 100 * $ratio - $g + $ratio * $g; | |
} | |
@return $w $g; | |
} | |
@function -get_layout_direction() { | |
@if $jeet-layout-direction == 'RTL' { | |
$result: right; | |
} @else { | |
$result: left; | |
} | |
@return $result; | |
} | |
@function -replace-nth($list, $index, $value) { | |
@if type-of($index) != number or $index == 0 or abs($index) > length($list) { | |
@warn "Invalid index (#{$index}) for `replace-nth`."; | |
@return false; | |
} | |
$list: set-nth($list, $index, $value); | |
@return if(not is-true($value), purge($list), $list); | |
} | |
@function -reverse($list, $recursive: false) { | |
$result: (); | |
@for $i from length($list)*-1 through -1 { | |
@if type-of(nth($list, abs($i))) == list and $recursive { | |
$result: append($result, reverse(nth($list, abs($i)), $recursive)); | |
} @else { | |
$result: append($result, nth($list, abs($i))); | |
} | |
} | |
@return $result; | |
} | |
// opposite-direction courtesy of another awesome grid system, Singularity, by the peeps at Team Sass - https://github.com/Team-Sass/Singularity | |
@function opposite-direction($dir: $jeet-layout-direction) { | |
@if $dir == 'LTR' { | |
@return RTL; | |
} | |
@else if $dir == 'RTL' { | |
@return LTR; | |
} | |
@else { | |
@warn "#{$dir} is not a direction! Make sure your direction is all lowercase!"; | |
@return false; | |
} | |
} | |
// Columns with Gutters | |
@mixin column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) { | |
$side: -get_layout_direction(); | |
$column_widths: -get_column($ratios, $gutter); | |
$margin_l: $margin_last; | |
$margin_last: 0; | |
$margin_r: nth($column_widths, 1); | |
@if $offset != 0 { | |
@if $offset < 0 { | |
$offset: $offset * -1; | |
$offset: nth(-get_column($offset, nth($column_widths, 1)), 0); | |
$margin_r: $margin_last; | |
$margin_last: $offset + nth($column_widths, 1) * 2; | |
} @else { | |
$offset: nth(-get_column($offset, nth($column_widths, 1)), 0); | |
$margin_l: $offset + nth($column_widths, 1); | |
} | |
} | |
@extend %cf; | |
float: $side; | |
display: inline; | |
clear: none; | |
text-align: inherit; | |
padding-left: 0; | |
padding-right: 0; | |
width: nth($column_widths, 0) + '%'; | |
margin-#{$side}: $margin_l + '%'; | |
margin-#{opposite-position($side)}: $margin_r + '%'; | |
@if $uncycle != 0 { | |
&:nth-child(#{$uncycle}n) { | |
margin-#{opposite-position($side)}: $margin_r + '%'; | |
float: $side; | |
} | |
} | |
@if $cycle != 0 { | |
&:nth-child(#{$cycle}n) { | |
margin-#{opposite-position($side)}: $margin_last + '%'; | |
float: opposite-position($side); | |
} | |
} @else { | |
&:last-child { | |
margin-#{opposite-position($side)}: $margin_last + '%'; | |
} | |
} | |
} | |
$col: column(); | |
// Columns without Gutters | |
@mixin span($ratio: 1, $offset: 0) { | |
$side: -get_layout_direction(); | |
$span_width: -get_span($ratio); | |
$margin_l: $margin_r; | |
$margin_r: 0; | |
@if $offset != 0 { | |
@if $offset < 0 { | |
$offset: $offset * -1; | |
$margin_r: -get_span($offset); | |
} @else { | |
$margin_l: -get_span($offset); | |
} | |
} | |
@extend %cf; | |
float: $side; | |
display: inline; | |
clear: none; | |
padding-left: 0; | |
padding-right: 0; | |
text-align: inherit; | |
width: $span_width + '%'; | |
margin-#{$side}: $margin_l + '%'; | |
margin-#{opposite-position($side)}: $margin_r + '%'; | |
} | |
// Source Ordering | |
@mixin shift($ratios: 0, $col_or_span: $column, $gutter: $jeet-gutter) { | |
$side: -get_layout_direction(); | |
@if $side == right { | |
$ratios: -replace_nth($ratios, 0, nth($ratios, 0) * -1); | |
} | |
@if $col_or_span == $column or $col_or_span == $col or $col_or_span == $c { | |
$column_widths: -get_column($ratios, $gutter); | |
$translate: nth($column_widths, 0) + nth($column_widths, 1); | |
} @else { | |
$translate: -get_span($ratios); | |
} | |
position: relative; | |
left: $translate + '%'; | |
} | |
@mixin unshift() { | |
position: static; | |
left: 0; | |
} | |
// Edit Mode | |
@mixin edit() { | |
* { | |
background: #eee; | |
background: rgba(#000, 5%); | |
} | |
} | |
// Horizontal Centering Block Elements | |
@mixin center($max_width: 1410px, $pad: 0) { | |
@extend %cf; | |
width: auto; | |
max-width: $max_width; | |
float: none; | |
display: block; | |
margin-right: auto; | |
margin-left: auto; | |
padding-left: $pad; | |
padding-right: $pad; | |
} | |
// Stacking/Unstacking Elements | |
@mixin stack($pad: 0, $align: false) { | |
$side: -get_layout_direction(); | |
display: block; | |
clear: both; | |
float: none; | |
width: 100%; | |
margin-left: auto; | |
margin-right: auto; | |
&:first-child { | |
margin-#{$side}: auto; | |
} | |
&:last-child { | |
margin-#{opposite-position($side)}: auto; | |
} | |
@if $pad != 0 { | |
padding-left: $pad; | |
padding-right: $pad; | |
} | |
@if ($align is not false) { | |
@if ($align == center) or ($align == c) { | |
text-align: center; | |
} | |
@if ($align == left) or ($align == l) { | |
text-align: left; | |
} | |
@if ($align == right) or ($align == r) { | |
text-align: right; | |
} | |
} | |
} | |
@mixin unstack() { | |
$side: -get_layout_direction(); | |
display: inline; | |
clear: none; | |
width: auto; | |
margin-left: 0; | |
margin-right: 0; | |
&:first-child { | |
margin-#{$side}: 0; | |
} | |
&:last-child { | |
margin-#{opposite-position($side)}: 0; | |
} | |
@if ($jeet-layout-direction == RTL) { | |
text-align: right; | |
} @else { | |
text-align: left; | |
} | |
} | |
// Horizontal/Vertical/Both Alignment - Parent container needs position relative. IE9+ | |
@mixin align($direction: both) { | |
position: absolute; | |
@if ($direction == horizontal) or ($direction == h) { | |
left: 50%; | |
transform: translateX(-50%); | |
} @else if ($direction == vertical) or ($direction == v) { | |
top: 50%; | |
transform: translateY(-50%); | |
} @else { | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
} | |
// Clearfix | |
@mixin cf() { | |
*zoom: 1; | |
&:before, &:after { | |
content: ''; | |
display: table; | |
} | |
&:after { | |
clear: both; | |
} | |
} | |
%cf { | |
@include cf(); | |
} |
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
Functions can only contain variable declarations and control directives. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment