Last active
December 19, 2015 10:59
-
-
Save jvlahos/5944688 to your computer and use it in GitHub Desktop.
Bourbon.io mixin research
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
| //Default font-family mixins | |
| $georgia: Georgia, Cambria, "Times New Roman", Times, serif; | |
| $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; | |
| $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; | |
| $verdana: Verdana, Geneva, sans-serif; |
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
| // Font-face mixin. Pretty self-explanatory | |
| // https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_font-face.scss | |
| // Order of the includes matters, and it is: normal, bold, italic, bold+italic. | |
| @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { | |
| @font-face { | |
| font-family: $font-family; | |
| font-weight: $weight; | |
| font-style: $style; | |
| @if $asset-pipeline == true { | |
| src: font-url('#{$file-path}.eot'); | |
| src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), | |
| font-url('#{$file-path}.woff') format('woff'), | |
| font-url('#{$file-path}.ttf') format('truetype'), | |
| font-url('#{$file-path}.svg##{$font-family}') format('svg'); | |
| } @else { | |
| src: url('#{$file-path}.eot'); | |
| src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), | |
| url('#{$file-path}.woff') format('woff'), | |
| url('#{$file-path}.ttf') format('truetype'), | |
| url('#{$file-path}.svg##{$font-family}') format('svg'); | |
| } | |
| } | |
| } |
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
| // Hide text mixin | |
| // The newest proper way to hide text (not the text-indent method anymore) | |
| @mixin hide-text { | |
| color: transparent; | |
| font: 0/0 a; | |
| text-shadow: none; | |
| } |
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
| // Golden ratio / modular scale | |
| // Used to scale any number by a modular / golden ratio | |
| // Increment up from 1 | |
| @function golden-ratio($value, $increment) { | |
| @return modular-scale($value, $increment, $golden) | |
| } | |
| // Scaling Varaibles | |
| $golden: 1.618; | |
| $minor-second: 1.067; | |
| $major-second: 1.125; | |
| $minor-third: 1.2; | |
| $major-third: 1.25; | |
| $perfect-fourth: 1.333; | |
| $augmented-fourth: 1.414; | |
| $perfect-fifth: 1.5; | |
| $minor-sixth: 1.6; | |
| $major-sixth: 1.667; | |
| $minor-seventh: 1.778; | |
| $major-seventh: 1.875; | |
| $octave: 2; | |
| $major-tenth: 2.5; | |
| $major-eleventh: 2.667; | |
| $major-twelfth: 3; | |
| $double-octave: 4; | |
| @function modular-scale($value, $increment, $ratio) { | |
| $v1: nth($value, 1); | |
| $v2: nth($value, length($value)); | |
| $value: $v1; | |
| // scale $v2 to just above $v1 | |
| @while $v2 > $v1 { | |
| $v2: ($v2 / $ratio); // will be off-by-1 | |
| } | |
| @while $v2 < $v1 { | |
| $v2: ($v2 * $ratio); // will fix off-by-1 | |
| } | |
| // check AFTER scaling $v2 to prevent double-counting corner-case | |
| $double-stranded: $v2 > $v1; | |
| @if $increment > 0 { | |
| @for $i from 1 through $increment { | |
| @if $double-stranded and ($v1 * $ratio) > $v2 { | |
| $value: $v2; | |
| $v2: ($v2 * $ratio); | |
| } @else { | |
| $v1: ($v1 * $ratio); | |
| $value: $v1; | |
| } | |
| } | |
| } | |
| @if $increment < 0 { | |
| // adjust $v2 to just below $v1 | |
| @if $double-stranded { | |
| $v2: ($v2 / $ratio); | |
| } | |
| @for $i from $increment through -1 { | |
| @if $double-stranded and ($v1 / $ratio) < $v2 { | |
| $value: $v2; | |
| $v2: ($v2 / $ratio); | |
| } @else { | |
| $v1: ($v1 / $ratio); | |
| $value: $v1; | |
| } | |
| } | |
| } | |
| @return $value; | |
| } |
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
| // Position mixin (position value as variable) | |
| // Following list as [top, right, bottom, left] | |
| //What if 'relative' used margin-top, margin-right, margin-bottom, margin-left | |
| //and 'absolute' value used top, right, bottom, left (most common scenarios?) | |
| @mixin position ($position: relative, $coordinates: 0 0 0 0) { | |
| @if type-of($position) == list { | |
| $coordinates: $position; | |
| $position: relative; | |
| } | |
| $top: nth($coordinates, 1); | |
| $right: nth($coordinates, 2); | |
| $bottom: nth($coordinates, 3); | |
| $left: nth($coordinates, 4); | |
| position: $position; | |
| @if $top == auto { | |
| top: $top; | |
| } | |
| @else if not(unitless($top)) { | |
| top: $top; | |
| } | |
| @if $right == auto { | |
| right: $right; | |
| } | |
| @else if not(unitless($right)) { | |
| right: $right; | |
| } | |
| @if $bottom == auto { | |
| bottom: $bottom; | |
| } | |
| @else if not(unitless($bottom)) { | |
| bottom: $bottom; | |
| } | |
| @if $left == auto { | |
| left: $left; | |
| } | |
| @else if not(unitless($left)) { | |
| left: $left; | |
| } | |
| } |
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
| //Size mixin | |
| //Width, height. Pretty straight forward | |
| //Square if you only supply one argument | |
| @mixin size($size) { | |
| @if length($size) == 1 { | |
| @if $size == auto { | |
| width: $size; | |
| height: $size; | |
| } | |
| @else if unitless($size) { | |
| width: $size + px; | |
| height: $size + px; | |
| } | |
| @else if not(unitless($size)) { | |
| width: $size; | |
| height: $size; | |
| } | |
| } | |
| // Width x Height | |
| @if length($size) == 2 { | |
| $width: nth($size, 1); | |
| $height: nth($size, 2); | |
| @if $width == auto { | |
| width: $width; | |
| } | |
| @else if not(unitless($width)) { | |
| width: $width; | |
| } | |
| @else if unitless($width) { | |
| width: $width + px; | |
| } | |
| @if $height == auto { | |
| height: $height; | |
| } | |
| @else if not(unitless($height)) { | |
| height: $height; | |
| } | |
| @else if unitless($height) { | |
| height: $height + px; | |
| } | |
| } | |
| } |
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
| // More elaborate timing functions for animations and effects | |
| // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) | |
| // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html | |
| // EASE IN | |
| $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); | |
| $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
| $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); | |
| $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
| $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); | |
| $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); | |
| $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); | |
| $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); | |
| // EASE OUT | |
| $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
| $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
| $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); | |
| $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); | |
| $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); | |
| $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); | |
| $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); | |
| // EASE IN OUT | |
| $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
| $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); | |
| $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); | |
| $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); | |
| $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); | |
| $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); | |
| $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); | |
| $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); |
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
| //Tint and shade functions | |
| //Different from darken and lighten functions | |
| //Actual mix of white and/or black with color | |
| // Add percentage of white to a color | |
| @function tint($color, $percent){ | |
| @return mix(white, $color, $percent); | |
| } | |
| // Add percentage of black to a color | |
| @function shade($color, $percent){ | |
| @return mix(black, $color, $percent); | |
| } |
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
| //Triangles with more directions | |
| //Up-left, up-right, down-left, down-right | |
| @mixin triangle ($size, $color, $direction) { | |
| height: 0; | |
| width: 0; | |
| @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { | |
| border-color: transparent; | |
| border-style: solid; | |
| border-width: $size / 2; | |
| @if $direction == up { | |
| border-bottom-color: $color; | |
| } @else if $direction == right { | |
| border-left-color: $color; | |
| } @else if $direction == down { | |
| border-top-color: $color; | |
| } @else if $direction == left { | |
| border-right-color: $color; | |
| } | |
| } | |
| @else if ($direction == up-right) or ($direction == up-left) { | |
| border-top: $size solid $color; | |
| @if $direction == up-right { | |
| border-left: $size solid transparent; | |
| } @else if $direction == up-left { | |
| border-right: $size solid transparent; | |
| } | |
| } | |
| @else if ($direction == down-right) or ($direction == down-left) { | |
| border-bottom: $size solid $color; | |
| @if $direction == down-right { | |
| border-left: $size solid transparent; | |
| } @else if $direction == down-left { | |
| border-right: $size solid transparent; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment