| <hr /> | |
| <article class="copy"> | |
| <h1>Responsive Typography for dummies</h1> | |
| <pre>h1 { | |
| @include responsive-type(22px, 38px); | |
| }</pre> | |
| <p><strong>A "let the mixin do all the work" approach</strong> to the wonderful <code>calc()</code> liquid and molten text. This is all based off the great work done <a href="https://madebymike.com.au/writing/precise-control-responsive-typography/">by mike</a></p> | |
| <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em></p> | |
| <h2>A Level two header that has a lot of text in it for the molten-lettering and showing off that the <a href="typecast.com/blog/a-more-modern-scale-for-web-typography">line height drops</a> as it gets smaller.</h2> | |
| <pre>h2 { | |
| @include responsive-type(18px, 28px); | |
| @include responsive-type(1.2, 1.05, line-height); | |
| }</pre> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> | |
| <h3>Header Level 3 - As I wanted to keep the mixin readable to people that don't know the argument order of the function.</h3> | |
| <pre>h3 { | |
| @include responsive-type('14px@400px', '50px@1900px'); | |
| @include responsive-type('1.2@400px', '1.05@1900px', line-height); | |
| }</pre> | |
| <p>This custom <code>@</code> approach is the way you can tweak the typography without using the <code>@include responsive-resize</code> with a bunch of params</p> | |
| <ul> | |
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | |
| <li>Aliquam tincidunt mauris eu risus.</li> | |
| </ul> | |
| <p>p.s Please note I'm linking up more helpers in the external CSS.</p> | |
| </article> | |
| <div class="box"></div> |
An attempt to implement a responsive typography system similar to Matt's: http://codepen.io/stowball/pen/JWoWWz?editors=0100
Based off: http://www.sassmeister.com/gist/7f22e44ace49b5124eec
Written about by: https://madebymike.com.au/writing/precise-control-responsive-typography/
Please note I'm linking up more helpers in the external SCSS file
A Pen by James Nowland on CodePen.
| // This Responsive Typography demo is to show the simplier syntax | |
| // | |
| // It asks just for the min size and the max size | |
| // h1 { @include responsive-type(22px, 38px); } | |
| // | |
| // Built of the back of the authors of: | |
| // http://www.sassmeister.com/gist/7f22e44ace49b5124eec | |
| // https://codepen.io/stowball/pen/JWoWWz?editors=0100 | |
| // As most min-width values will be 320px and the max value often will be the max-width of the container | |
| // We set "smart" default values | |
| $responsive-type-min-width: 320px !default; | |
| $responsive-type-max-width: 700px !default; | |
| // Base Responsive resize function that the type one uses | |
| @mixin responsive-resize($properties, $min-vw, $max-vw, $min-value, $max-value) { | |
| @each $property in $properties { | |
| #{$property}: $min-value; | |
| } | |
| @media (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 (min-width: $max-vw) { | |
| @each $property in $properties { | |
| #{$property}: $max-value; | |
| } | |
| } | |
| } | |
| // Type Focus helper mixin for the resize function | |
| @mixin responsive-type($min-value, $max-value, $properties: font-size) { | |
| // use the global default values based on the assumption these | |
| // will be contained in a block | |
| $min-vw: $responsive-type-min-width; | |
| $max-vw: $responsive-type-max-width; | |
| // check if value is using the "@" api syntax. | |
| @if ( type-of($min-value) == "string") { | |
| // So it is a string does it have a "@" symbol to break apart | |
| @if ( str-index($min-value, '@') ) { | |
| // split string helper | |
| $min-value-list : split-str($min-value, '@'); | |
| // unquote the split and cast the string to a number | |
| // http://hugogiraudel.com/2014/01/15/sass-string-to-number/ | |
| $min-value: to-number( unquote( nth($min-value-list, 1) ) ); | |
| $min-vw: to-number( unquote( nth($min-value-list, 2) )); | |
| } | |
| } | |
| // run the same checks over the $max-value | |
| @if ( type-of($max-value) == "string") { | |
| // So it is a string does it have a "@" symbol to break apart | |
| @if ( str-index($max-value, '@') ) { | |
| $max-value-list : split-str($max-value, '@'); | |
| $max-value: to-number( unquote( nth($max-value-list, 1) ) ); | |
| $max-vw: to-number( unquote( nth($max-value-list, 2) )); | |
| } | |
| } | |
| // feed the shorter api back to the responsice resizer | |
| @include responsive-resize($properties, $min-vw, $max-vw, $min-value, $max-value); | |
| } | |
| /* | |
| Single property. | |
| with min and max passed. | |
| */ | |
| h1 { | |
| @include responsive-type(22px, 38px); | |
| } | |
| /* An example of adding another property in such as line height */ | |
| h2 { | |
| @include responsive-type(18px, 28px); | |
| @include responsive-type(1.2, 1.05, line-height); | |
| } | |
| /* An example of the custom breakpoints for '@' redable syntax */ | |
| /* This is to avoid the map approach here: https://codepen.io/stowball/pen/JWoWWz */ | |
| h3 { | |
| @include responsive-type('14px@400px', '50px@1900px'); | |
| @include responsive-type('1.2@400px', '1.05@1900px', line-height); | |
| } | |
| /* Multiple properties with same values with default */ | |
| div.box { | |
| @include responsive-resize(width height, 20em, 70em, 5em, 10em); | |
| margin: 1em auto; | |
| } | |
| // set up a familiar context. | |
| article { | |
| max-width: $responsive-type-max-width; | |
| margin: 0 auto; | |
| line-height: 1.5; | |
| } | |
| .box { | |
| background-color: red; | |
| } | |
| pre { | |
| @include responsive-type(10px, 16px); | |
| border: 1px solid #95bdf2;; | |
| border-radius: 4px; | |
| margin-bottom: 1em; | |
| padding: 0.66667em 1.86667em; | |
| color: darken(#5193EA, 20%); | |
| background-color: #d4e4fa; | |
| overflow: scroll; | |
| } | |
| code { | |
| color: darken(#5193EA, 20%); | |
| background-color: #d4e4fa; | |
| } | |
| hr { | |
| position: relative; | |
| magin: 1em; | |
| height: 2px; | |
| border: none; | |
| background: darken(#5193EA, 20%); | |
| animation-duration: 3s; | |
| animation-name: resizeMe; | |
| animation-iteration-count: infinite; | |
| &:before, | |
| &:after{ | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| position: absolute; | |
| top: -11px; | |
| } | |
| &:before{ | |
| left: -2px; | |
| border-width: 12px 20.8px 12px 0; | |
| border-color: transparent darken(#5193EA, 20%) transparent transparent; | |
| } | |
| &:after{ | |
| right: -2px; | |
| border-width: 12px 0 12px 20.8px; | |
| border-color: transparent transparent transparent darken(#5193EA, 20%); | |
| } | |
| } | |
| body { | |
| padding: 20px; | |
| } | |
| @keyframes resizeMe { | |
| 0% { | |
| width: 100%; | |
| } | |
| 50% { | |
| width: 50%; | |
| } | |
| 100% { | |
| width: 100%; | |
| } | |
| } |
| <link href="https://codepen.io/jnowland/pen/BWygZe" rel="stylesheet" /> |