Created
July 25, 2016 21:55
-
-
Save davidpanzarella/2c87bde751faa378c1abbbb52f09f9be to your computer and use it in GitHub Desktop.
Precise control over responsive typography for Sass
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| /*! ======================================================================== | |
| PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS | |
| --------------------------------------------------- | |
| Author: Indrek Paas <@indrekpaas> | |
| Inspired by Mike Riethmuller's Precise control over responsive typography | |
| http://madebymike.com.au/writing/precise-control-responsive-typography/ | |
| `strip-unit()` function by Hugo Giraudel | |
| ======================================================================== */ | |
| @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) { | |
| & { | |
| @each $property in $properties { | |
| #{$property}: $min-value; | |
| } | |
| @media screen and (min-width: $min-vw) { | |
| @each $property in $properties { | |
| #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); | |
| } | |
| } | |
| @media screen and (min-width: $max-vw) { | |
| @each $property in $properties { | |
| #{$property}: $max-value; | |
| } | |
| } | |
| } | |
| } | |
| @function strip-unit($value) { | |
| @return $value / ($value * 0 + 1); | |
| } | |
| /* Single property */ | |
| html { | |
| @include fluid-type(font-size, 320px, 1366px, 14px, 18px); | |
| } | |
| /* Multiple properties with same values */ | |
| h1 { | |
| @include fluid-type(font-size margin-bottom, 320px, 1366px, 14px, 18px); | |
| } | |
| /* Multiple properties with different values */ | |
| div { | |
| @include fluid-type(padding, 320px, 1366px, 14px, 18px); | |
| @include fluid-type(width, 20em, 100em, 8em, 16em); | |
| } |
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
| /*! ======================================================================== | |
| PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS | |
| --------------------------------------------------- | |
| Author: Indrek Paas <@indrekpaas> | |
| Inspired by Mike Riethmuller's Precise control over responsive typography | |
| http://madebymike.com.au/writing/precise-control-responsive-typography/ | |
| `strip-unit()` function by Hugo Giraudel | |
| ======================================================================== */ | |
| /* Single property */ | |
| html { | |
| font-size: 14px; | |
| } | |
| @media screen and (min-width: 320px) { | |
| html { | |
| font-size: calc(14px + 4 * ((100vw - 320px) / 1046)); | |
| } | |
| } | |
| @media screen and (min-width: 1366px) { | |
| html { | |
| font-size: 18px; | |
| } | |
| } | |
| /* Multiple properties with same values */ | |
| h1 { | |
| font-size: 14px; | |
| margin-bottom: 14px; | |
| } | |
| @media screen and (min-width: 320px) { | |
| h1 { | |
| font-size: calc(14px + 4 * ((100vw - 320px) / 1046)); | |
| margin-bottom: calc(14px + 4 * ((100vw - 320px) / 1046)); | |
| } | |
| } | |
| @media screen and (min-width: 1366px) { | |
| h1 { | |
| font-size: 18px; | |
| margin-bottom: 18px; | |
| } | |
| } | |
| /* Multiple properties with different values */ | |
| div { | |
| padding: 14px; | |
| } | |
| @media screen and (min-width: 320px) { | |
| div { | |
| padding: calc(14px + 4 * ((100vw - 320px) / 1046)); | |
| } | |
| } | |
| @media screen and (min-width: 1366px) { | |
| div { | |
| padding: 18px; | |
| } | |
| } | |
| div { | |
| width: 8em; | |
| } | |
| @media screen and (min-width: 20em) { | |
| div { | |
| width: calc(8em + 8 * ((100vw - 20em) / 80)); | |
| } | |
| } | |
| @media screen and (min-width: 100em) { | |
| div { | |
| width: 16em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment