Skip to content

Instantly share code, notes, and snippets.

@corysimmons
Created March 2, 2014 21:14
Show Gist options
  • Save corysimmons/9314018 to your computer and use it in GitHub Desktop.
Save corysimmons/9314018 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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();
}
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