Elm-Bulma is a simple and beautiful front-end library.
- Learn about the components at bulma.io.
- For API information, head over to the Elm package.
- Make a new project:
mkdir bulma-example && cd bulma-example. - Install the package:
elm package install --yes surprisetalk/elm-bulma. - Create a new file
Example.elmand copy this example file or the code below. - Start
elm reactorand 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" ]
]
]
]- 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.