This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Create beautiful examples to show off your Elm packages and projects
version 1.1.1
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.1.1
Committed At 2017-05-29 18:48:42 UTC
rtfeldman/elm-css-helpers 2.1.0 <= v < 3.0.0 2.1.0
rtfeldman/elm-css 8.2.0 <= v < 9.0.0 8.2.0
eskimoblood/elm-color-extra 4.0.0 <= v < 5.0.0 4.1.1
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

README

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-package install avh4/elm-beautiful-example
    
  2. Replace Html.program or Html.beginnerProgram with BeautifulExample.program or BeautifulExample.beginnerProgram and add the beautiful example config, filling in the fields as appropriate for your example:

    +import BeautifulExample
    
     main : Program Never Model Msg
     main =
    -    Html.program
    +    BeautifulExample.program
    +        { 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 = ( model, 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