Modular scale calculator built into your Stylus CSS preprocessor
npm install modularscale-stylnpm install modularscale-styl --save-dev
@import '../node_modules/modularscale-styl/stylesheets/_modular-scale.styl';
bower install modularscale-styl --save-dev
@import '../link_to_component_dir/modular-scale/stylesheets/_modular-scale.styl';
@import '_modular-scale.styl';
$ms-base is usually your font size or 1em and can have multiple values. $ms-ratio is the factor of change between each number so if the ratio is 1.5 then each number in the sequence will be 1.5 times that of the previous number. Just as you can have multiple bases you can have multiple ratios.
stylus
$ms-base = 1em;
$ms-ratio = $golden;
`
Modular-scale is used as a function. Simply pass it through in place of any value to generate a value based on a modular scale.
`stylus
font-size: ms(2); // two up the modular scale
font-size: ms(2, 16px); // two up the modular scale with a base size of 16px, default is 1em
font-size: ms(2, 1em, $octave); // Same as above but on an octave scale
`
You can output a list to your terminal to help you find out what values are on your scale.
`stylus
p(ms-list($start, $end, $ms-base, $ms-ratio))
`
You can use a double standard scale by simply adding more base sizes in a space-separated list.
note: the starting point of the scale will always be the first value in this list
`stylus
.double-standard {
width: ms(7, 1em 2em);
}
`
You can do the same thing with ratios
`stylus
.multi-ratio {
width: ms(7, 1em, $golden $octave);
}
`
You can use multiple $ms-bases and multiple $ms-ratio together
`stylus
.multibase-multiratio {
width: ms(7, 16px 24px, $golden $fourth);
}
`
Responsive scales
Based on Mike Riethmuller’s _Precise control over responsive typography_. A fantastic technique for fluidly scaling typography.
See a responsive modular scale in action.
First, you will need to set your range. A range is a list of ratio and breakpoint values from smallest to largest. Because this will render as a fluid range by default you will probably only want or need a range of two.
`stylus
$ms-range = 1.1 20em, 1.333 60em;
`
If you want to have specified steps instead of fluid type set $ms-fluid to false and you may want to add more values to your range.
`stylus
$ms-fluid = false;
$ms-range = 1.2 20em, 1.3 30em, 1.4 40em, 1.5 50em, 1.6 60em;
`
Now you can use the ms-respond mixin to output a range of values for a single point on a scale. The first value is the property and the second value is the point on the scale you wish to use. That’s it, a series of responisve values will be generated based on your configuration.
`stylus
foo {
ms-respond(font-size, 2);
}
`
Ratios
Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
By default, the variable $ms-ratio is set to $golden.
Function Ratio Decimal value
$phi 1:1.618 1.618
$golden 1:1.618 1.618
$double-octave 1:4 4
$major-twelfth 1:3 3
$major-eleventh 3:8 2.667
$major-tenth 2:5 2.5
$octave 1:2 2
$major-seventh 8:15 1.875
$minor-seventh 9:16 1.778
$major-sixth 3:5 1.667
$minor-sixth 5:8 1.6
$fifth 2:3 1.5
$augmented-fourth 1:√2 1.414
$fourth 3:4 1.333
$major-third 4:5 1.25
$minor-third 5:6 1.2
$major-second 8:9 1.125
$minor-second 15:16 1.067
Add your own ratio in Stylus by setting a variable and passing that to modular-scale.
`stylus
$my-ratio = 1 / 3.14159265;
$ms-ratio = $my-ratio;
``