https://github.com/rl-king/elm-modular-scale

Generate proportionally related values to use as font-sizes, line-height, ect.
https://github.com/rl-king/elm-modular-scale

elm modular-scale typography

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rl-king/elm-modular-scale
• Owner: rl-king
• License: bsd-3-clause
• Created: 2017-07-17T08:25:47.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-11T12:07:00.000Z (about 6 years ago)
• Last Synced: 2023-08-08T20:39:57.863Z (over 1 year ago)
• Topics: elm, modular-scale, typography
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/rl-king/elm-modular-scale/latest
• Size: 36.1 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#  elm-modular-scale

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

[example live](https://rl-king.github.io/elm-modular-scale-example/) |

[example code](https://github.com/rl-king/elm-modular-scale-example)

Based on the idea found at [modularscale.com](http://www.modularscale.com/)

## Usage

```elm

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](https://vimeo.com/17079380) great talk by Tim Brown, introducing this concept.