SCSS Mixin
Liquid Type
Summary
Liquid Type is a SCSS mixin I created to help developers create quick, beautiful, and responsive typographical layouts. It's based on the incredible work from the individuals at utopia.fyi.
Basic Setup
Import the liquid-type.scss plugin in your main app.scss file and change the default settings as needed.
@import "liquid-type.scss";
$liquid-type-settings: (
baseFontSize: 16px,
minViewportWidth: 320px,
minFontSize: 21px,
minTypeScale: minorThird,
maxViewportWidth: 1140px,
maxFontSize: 24px,
maxTypeScale: majorThird,
singleStep: null,
negativeSteps: 3,
positiveSteps: 4,
);
By default, liquid-type will generate 8 steps in the typography scale to create a full typographical octave. Step 0 always returns the maxFontSize and each font size step increases or decreases relative to it. For example, the default 8 steps output as follows:
step-4, step-3, step-2, step-1, step-0, step--1, step--2
Now you can generate classes using the provided mixin and either extend the classes or use them in your html markup:
@include liquid-type-generate-classes($liquid-type-settings);
h1 { @extend .lt-4; }
h2 { @extend .lt-3; }
h3 { @extend .lt-2; }
h4 { @extend .lt-1; }
h5 { @extend .lt-0; }
p { @extend .lt-0; }
h6 { @extend .lt--1; }
small { @extend .lt--2; }
// You can also use these directly in your markup. For example:
// <h1 class="lt-4">Hello</h1>
See it in action (resize the browser)
Heading Level One
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading Level Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading Level Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading Level Four
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading Level Five
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading Level Six
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.