This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Bulma HTML/CSS Framework for Elm
version 6.1.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 6.1.1
Committed At 2018-08-07 20:33:17 UTC
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-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 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 Never Model msg
main 
  = Html.beginnerProgram
    { model = {}
    , 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