1.0.7 • Published 3 years ago
create-a-scale v1.0.7
create-a-scale
A simple CLI to generate a typography and spacing css file to keep your design consitent.
How it works
First off, you'll need node and npm installed, the simplest way to do that is to use Volta.
To install the tool globally run this command:
npm i -g create-a-scale
Once it's installed all you have to do is run:
create-a-scale
You'll be prompted for the required information.
The output of this command would be:
:root {
--b: 16px;
--xs: 21.328px;
--s: 28.430224px;
--m: 37.897488591999995px;
--l: 50.51735229313599px;
--xl: 67.33963060675028px;
}
.b {
font-size: var(--b);
margin-bottom: var(--b);
line-height: calc(var(--b) * 1.333);
}
.xs {
font-size: var(--xs);
margin-bottom: var(--b);
line-height: calc(var(--xs) * 1.333);
}
.s {
font-size: var(--s);
margin-bottom: var(--b);
line-height: calc(var(--s) * 1.333);
}
.m {
font-size: var(--m);
margin-bottom: var(--b);
line-height: calc(var(--m) * 1.333);
}
.l {
font-size: var(--l);
margin-bottom: var(--b);
line-height: calc(var(--l) * 1.333);
}
.xl {
font-size: var(--xl);
margin-bottom: var(--b);
line-height: calc(var(--xl) * 1.333);
}
The output provides you with css variables and some utility classes for font sizes to use however you like. All built around the two values you initially provided.
Config options
If you want to skip the prompts you can run the command by passing in some arguments they are:
--out
: The name you want to give you file (defaults to scale.css)--size
: The base size you want to start with (you'll be prompted for this if you don't provide a value).--scale
: The scale to apply to the base size (you'll be prompted for this if you don't provide a value).--break
: Breakpoints to scale up for. Under the hood this will use media queries with amin-width
of the value you provide, can add as many as you want.
An example with all of these options:
create-a-scale --out type-scale.css --size 16 --scale 1.2 --break 960 --break 1200
This would output a file called type-scale.css
in your current directory that looked like this:
:root {
--b: 16px;
--xs: 19.2px;
--s: 23.04px;
--m: 27.648px;
--l: 33.1776px;
--xl: 39.81312px;
}
@media (min-width: 960px) {
:root {
--b: 19.2px;
--xs: 23.04px;
--s: 27.648px;
--m: 33.1776px;
--l: 39.81312px;
--xl: 47.775743999999996px;
}
}
@media (min-width: 1200px) {
:root {
--b: 23.04px;
--xs: 27.648px;
--s: 33.1776px;
--m: 39.81312px;
--l: 47.775743999999996px;
--xl: 57.330892799999994px;
}
}
.b {
font-size: var(--b);
margin-bottom: var(--b);
line-height: calc(var(--b) * 1.2);
}
.xs {
font-size: var(--xs);
margin-bottom: var(--b);
line-height: calc(var(--xs) * 1.2);
}
.s {
font-size: var(--s);
margin-bottom: var(--b);
line-height: calc(var(--s) * 1.2);
}
.m {
font-size: var(--m);
margin-bottom: var(--b);
line-height: calc(var(--m) * 1.2);
}
.l {
font-size: var(--l);
margin-bottom: var(--b);
line-height: calc(var(--l) * 1.2);
}
.xl {
font-size: var(--xl);
margin-bottom: var(--b);
line-height: calc(var(--xl) * 1.2);
}