rl-king / elm-modular-scale

Generate proportionally related values to use as font-sizes, line-height, ect.

elm-modular-scale

Create proportionally related values to be used as font sizes, element widths, line height, ect.

example live | example code

Based on the idea found at modularscale.com

Usage

config : Config
config =
    config [ 1 ] PerfectFifth

get config 5

--> 7.59375

ms : Int -> String
ms x =
    String.fromFloat (get config x) ++ "em"

h1 [ style [ ( "font-size", ms 4 ) ] ] [ text "Foo" ]

-- Or, if you're using elm-css

ms : Int -> Css.Rem
ms x =
    rem (get config x)

style : List Style
style =
    [ fontSize (ms 4) ]

Also check out this great talk by Tim Brown, introducing this concept.