Created
March 15, 2017 21:15
-
-
Save paultannenbaum/d054fa70e1564a824db398cc0ac565bb to your computer and use it in GitHub Desktop.
Viewport Relative Utils
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
| @function calculate-rem($size) { | |
| // transform px to em | |
| $remSize: $size / 16px; | |
| @return $remSize * 1rem; | |
| } | |
| @function get-vw($target, $viewport-width) { | |
| // Transform px to vw | |
| $vw-context: ($viewport-width*.01); | |
| @return ($target/$vw-context) * 1vw; | |
| } | |
| @mixin vw($rule, $target, $viewport-width) { | |
| #{$rule}: $target; | |
| #{$rule}: get-vw($target, $viewport-width); | |
| } | |
| @mixin fluid-font($size, $line-height, $font-family, $viewport-width) { | |
| @include vw(font-size, $size, $viewport-width); | |
| @include vw(line-height, $line-height, $viewport-width); | |
| font-family: $font-family; | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| @mixin font-size($pixels) { | |
| // font size to em | |
| font-size: ($pixels / 16px) * 1rem; | |
| } | |
| @mixin font($size, $line-height, $font-family) { | |
| @include font-size($size); | |
| line-height: calculate-rem($line-height); | |
| font-family: $font-family; | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| @mixin full-container { | |
| display: table; | |
| width: 100%; | |
| max-width: $desktop; | |
| margin: 0 auto; | |
| padding: 0 10px; | |
| float: none; | |
| } | |
| @mixin full-fluid-container { | |
| @include full-container; | |
| @include vw(max-width, 1440px, $desktop); | |
| } | |
| @mixin fluid-columns { | |
| float: left; | |
| @include vw(padding-left, 15px, $desktop); | |
| @include vw(padding-right, 15px, $desktop); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment