mdgriffith / style-elements / Style.Scale

When designing it's nice to use a modular scale to set spacial rythms.

scaled =
    Scale.modular 16 1.618

A modular scale starts with a number, and multiplies it by a ratio a number of times.

Then, when setting font sizes you can use:

Font.size (scaled 1) -- results in 16

Font.size (scaled 2) -- 16 * (1.618 ^ 2) results in 25.8

We can also provide negative numbers to scale below 16px.

modular : Basics.Float -> Basics.Float -> Basics.Int -> Basics.Float

roundedModular : Basics.Float -> Basics.Float -> Basics.Int -> Basics.Float

Same a modular but rounds to the nearest integer.

Still returns a Float for compatibility reasons.