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
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| /*! ======================================================================== | |
| 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 | |
| ======================================================================== */ | |
| @function strip-unit($value) { | |
| @return $value / ($value * 0 + 1); | |
| } | |
| @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) { | |
| & { | |
| font-size: $min-font-size; | |
| @media screen and (min-width: $min-vw) { | |
| font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); | |
| } | |
| @media screen and (min-width: $max-vw) { | |
| font-size: $max-font-size; | |
| } | |
| } | |
| } | |
| html { | |
| @include fluid-type(320px, 1366px, 14px, 18px); | |
| } |
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 | |
| ======================================================================== */ | |
| 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment