Skip to content

avh4/elm-beautiful-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status Latest Version

elm-beautiful-example

This package makes it easy to create beautiful examples for your Elm projects and packages.

Screenshot of a Counter example using elm-beautiful-example

Usage

Start with your not-so-pretty Elm example:

Screenshot of the original, not-so-pretty Counter example from the Elm Guide

  1. Install elm-beautiful-example

    elm install avh4/elm-beautiful-example
  2. Replace Browser.sandbox, Browser.element, Browser.document or Browser.application with BeautifulExample.sandbox, BeautifulExample.element, BeautifulExample.document or BeautifulExample.application and add the beautiful example config, filling in the fields as appropriate for your example:

    +import BeautifulExample
    
     main : Program () Model Msg
     main =
    -    Browser.document
    +    BeautifulExample.document
    +        { title = "Counter"
    +        , details =
    +            Just """This shows how elm-beautiful-example can be used to
    +              wrap the view of any other program (in this case, the Counter example
    +              from the Elm Guide)."""
    +        , color = Just Color.blue
    +        , maxWidth = 400
    +        , githubUrl = Just "https://github.com/avh4/elm-beautiful-example"
    +        , documentationUrl = Just "http://package.elm-lang.org/packages/avh4/elm-beautiful-example/latest"
    +        }
             { init = \() -> ( initialModel, Cmd.none )
             , update = update
             , subscriptions = \_ -> Sub.none
             , view = view
             }

Now your example will look like this:

Screenshot of a Counter example using elm-beautiful-example