Responsive Typography for dummies.

Developer
James Nowland
Size
6,869 Kb
Views
30,360
  1. Responsive Typography for dummies. Previews
  2. Responsive Typography for dummies. HTML Codes
  3. Responsive Typography for dummies. CSS Codes

How do I make an responsive typography for dummies.?

An attempt to implement a responsive typography system similar to Matt's: http://codepen.io/stowball/pen/JWoWWz?editors=0100. What is a responsive typography for dummies.? How do you make a responsive typography for dummies.? This script and codes were developed by James Nowland on 31 October 2022, Monday.

Responsive Typography for dummies. Previews
IQ Test

Responsive Typography for dummies. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Typography for dummies.</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/bwygze.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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>
</body>
</html>

Responsive Typography for dummies. - Script Codes CSS Codes

// 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%; }
}
Responsive Typography for dummies. - Script Codes
Responsive Typography for dummies. - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 4.5
Size 6,869 Kb
Views 30,360
Do you need developer help for Responsive Typography for dummies.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Nowland (jnowland) Script Codes
Name
CSS Ribbon with inner border.
Dribble Button CSS Rebound
Ad Folding without regions
Outer Gradient Circle Progress
Step 3
Lorem pixel Images
SVG Modified with Query String
Download Rebound
Login Form CSS only validation
Pure CSS Spinner
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!