hugdubois/elm-bulma

Elm library for the Bulma front-end framework

Elm-Bulma is a simple and beautiful front-end library.

Documentation

• Learn about the components at bulma.io.
• For API information, head over to the Elm package.

Getting Started

1. Make a new project: mkdir bulma-example && cd bulma-example.
2. Install the package: elm package install --yes surprisetalk/elm-bulma.
3. Create a new file Example.elm and copy this example file or the code below.
4. Start elm reactor and navigate to http://localhost:8000/Example.elm.

module Example exposing (..)

import Browser
import Bulma.CDN exposing (..)
import Bulma.Modifiers exposing (..)
import Bulma.Elements exposing (..)
import Bulma.Columns exposing (..)
import Bulma.Layout exposing (..)
import Html exposing ( Html, main_, text )

type alias Model = {}

main : Program () Model Msg
main
  = Browser.sandbox
    { init = {}
    , view = view
    , update = \msg -> \model -> model
    }

view : Model -> Html msg
view model 
  = main_ []
    [ stylesheet
    , exampleHero
    , exampleColumns
    ]

exampleHero : Html msg
exampleHero 
  = hero { heroModifiers | size = Medium, color = Primary } []
    [ heroBody []
      [ container []
          [ title H1 [] [ text "Hero Title" ]
          , title H2 [] [ text "Hero Subtitle" ]
          ]
      ]
    ]

exampleColumns : Html msg
exampleColumns 
  = section NotSpaced []
    [ container []
      [ columns columnsModifiers []
        [ column columnModifiers [] [ text "First Column" ]
        , column columnModifiers [] [ text "Second Column" ]
        , column columnModifiers [] [ text "Third Column" ]
        ]
      ]
    ]

Contributions

• Feel free to report bugs on Github.
• If you have any suggestions on how to make the API more friendly, please reach out to me at surprisetalk@gmail.com.

Friends

• elm-bootstrap