Elm library for the Bulma front-end framework
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo elm-format Mar 12, 2018
src 6.1.4 - added a reminder for roundedImage function Nov 29, 2018
.gitignore Initial commit Jun 4, 2017
.projectile rewrite Jun 26, 2017
LICENSE housekeeping Jun 25, 2017
README.md updated readme Oct 28, 2018
elm.json 6.1.4 - package bump Nov 29, 2018

README.md

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

Documentation

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

Friends