Created
May 27, 2015 13:02
-
-
Save conwayeast/fd841bd501b46d72fbce to your computer and use it in GitHub Desktop.
Responsive Typography with Sass - James Steinbach
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
| <h1 class="hero-title">Primary Title</h1> | |
| <div class="entry-content"> | |
| <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> | |
| <h1>Content Title</h1> | |
| <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.</p> | |
| <h2>Content Subtitle</h2> | |
| <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> | |
| </div> |
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.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| $rwd-typography: ( | |
| default: ( | |
| base-font-size: 16px, | |
| vertical-rhythm: 1.414, | |
| type-scale: 1.2, | |
| min-width: null | |
| ), | |
| medium: ( | |
| base-font-size: 18px, | |
| vertical-rhythm: 1.5, | |
| type-scale: 1.414, | |
| min-width: 480px | |
| ), | |
| large: ( | |
| base-font-size: 20px, | |
| vertical-rhythm: 1.618, | |
| type-scale: 1.5, | |
| min-width: 960px | |
| ), | |
| xlarge: ( | |
| base-font-size: 24px, | |
| vertical-rhythm: 1.618, | |
| type-scale: 1.618, | |
| min-width: 1300px | |
| ) | |
| ); | |
| $rwd-scale-labels: (p, bq, sh, h, hero); | |
| @function rwd-generate-font-size($label, $breakpoint) { | |
| $label-position: index($rwd-scale-labels, $label); | |
| $breakpoint-base-font-size: map-get(map-get($rwd-typography, $breakpoint), base-font-size); | |
| $breakpoint-type-scale: map-get(map-get($rwd-typography, $breakpoint), type-scale); | |
| $breakpoint-vertical-rhythm: map-get(map-get($rwd-typography, $breakpoint), vertical-rhythm); | |
| $font-size: $breakpoint-base-font-size; | |
| @for $i from 1 to $label-position { | |
| $font-size: $font-size * $breakpoint-type-scale; | |
| } | |
| $base-vertical-rhythm: $breakpoint-base-font-size * $breakpoint-vertical-rhythm; | |
| $line-height: round($font-size / $base-vertical-rhythm) * $base-vertical-rhythm / $font-size; | |
| $return: join($font-size, $line-height); | |
| @return $return; | |
| } | |
| @each $label in $rwd-scale-labels { | |
| %#{$label} { | |
| @each $breakpoint, $data in $rwd-typography { | |
| $generated-values: rwd-generate-font-size($label, $breakpoint); | |
| $font-size: round(nth($generated-values, 1)*10)/10; | |
| $line-height: round(nth($generated-values, 2)*100)/100; | |
| @if map-get($data, min-width) != null { | |
| @media screen and (min-width: map-get($data, min-width)) { | |
| font-size: $font-size; | |
| line-height: $line-height; | |
| } | |
| } @else { | |
| font-size: $font-size; | |
| line-height: $line-height; | |
| } | |
| } | |
| } | |
| } | |
| body { | |
| @extend %p; | |
| } | |
| blockquote { | |
| @extend %bq; | |
| } | |
| h1 { | |
| @extend %h; | |
| } | |
| h2 { | |
| @extend %sh; | |
| } | |
| .hero-title { | |
| @extend %hero; | |
| } |
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
| body { | |
| font-size: 16px; | |
| line-height: 1.41; | |
| } | |
| @media screen and (min-width: 480px) { | |
| body { | |
| font-size: 18px; | |
| line-height: 1.5; | |
| } | |
| } | |
| @media screen and (min-width: 960px) { | |
| body { | |
| font-size: 20px; | |
| line-height: 1.62; | |
| } | |
| } | |
| @media screen and (min-width: 1300px) { | |
| body { | |
| font-size: 24px; | |
| line-height: 1.62; | |
| } | |
| } | |
| blockquote { | |
| font-size: 19.2px; | |
| line-height: 1.18; | |
| } | |
| @media screen and (min-width: 480px) { | |
| blockquote { | |
| font-size: 25.5px; | |
| line-height: 1.06; | |
| } | |
| } | |
| @media screen and (min-width: 960px) { | |
| blockquote { | |
| font-size: 30px; | |
| line-height: 1.08; | |
| } | |
| } | |
| @media screen and (min-width: 1300px) { | |
| blockquote { | |
| font-size: 38.8px; | |
| line-height: 1; | |
| } | |
| } | |
| h2 { | |
| font-size: 23px; | |
| line-height: 0.98; | |
| } | |
| @media screen and (min-width: 480px) { | |
| h2 { | |
| font-size: 36px; | |
| line-height: 0.75; | |
| } | |
| } | |
| @media screen and (min-width: 960px) { | |
| h2 { | |
| font-size: 45px; | |
| line-height: 0.72; | |
| } | |
| } | |
| @media screen and (min-width: 1300px) { | |
| h2 { | |
| font-size: 62.8px; | |
| line-height: 1.24; | |
| } | |
| } | |
| h1 { | |
| font-size: 27.6px; | |
| line-height: 0.82; | |
| } | |
| @media screen and (min-width: 480px) { | |
| h1 { | |
| font-size: 50.9px; | |
| line-height: 1.06; | |
| } | |
| } | |
| @media screen and (min-width: 960px) { | |
| h1 { | |
| font-size: 67.5px; | |
| line-height: 0.96; | |
| } | |
| } | |
| @media screen and (min-width: 1300px) { | |
| h1 { | |
| font-size: 101.7px; | |
| line-height: 1.15; | |
| } | |
| } | |
| .hero-title { | |
| font-size: 33.2px; | |
| line-height: 0.68; | |
| } | |
| @media screen and (min-width: 480px) { | |
| .hero-title { | |
| font-size: 72px; | |
| line-height: 1.13; | |
| } | |
| } | |
| @media screen and (min-width: 960px) { | |
| .hero-title { | |
| font-size: 101.3px; | |
| line-height: 0.96; | |
| } | |
| } | |
| @media screen and (min-width: 1300px) { | |
| .hero-title { | |
| font-size: 164.5px; | |
| line-height: 0.94; | |
| } | |
| } |
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
| <h1 class="hero-title">Primary Title</h1> | |
| <div class="entry-content"> | |
| <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> | |
| <h1>Content Title</h1> | |
| <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.</p> | |
| <h2>Content Subtitle</h2> | |
| <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment