After a lot of research, I’ve found that Bulma withing elm is a very good and easy package to use. I’ve decided to share some of the column layout in elm view for a few columns.
The code is very simple and I used a very basic elm code to demonstrate columns.
module Columns exposing (…)
import Browser
import Bulma.Elements exposing (box)
import Bulma.Columns exposing (columnModifiers, column)
import Html exposing ( Html, text, div)
import Html.Attributes exposing (class)
type alias Model =
{ header : String
, body : String
}
type Msg
= Header1 String
| Body1 String
init : Model
init =
{ header = “”
, body = “”
}
update : Msg → Model → Model
update msg model =
case msg of
Header1 next →
{ model | header = next }
Body1 next ->
{ model | body = next }
view : Model → Html Msg
view model =
column columnModifiers [ class “column has-background-info is-8” ]
[ box [ class “box has-background-light has-text-grey text is-size-1 has-text-centered has-text-weight-bold”
][ text “Working With Columns”]
, box [ class “has-background-light has-text-grey text is-size-3 has-text-centered is-family-primary has-text-weight-semibold”
][ text “Diffrent Column Layouts!!!” ]
, column columnModifiers [ class “has-background-grey has-text-centered has-text-black text is-size-3” ][ text “Column 1” ]
, div [ class “mb-3” ][]
, column columnModifiers [ class “has-background-warning has-text-centered has-text-black text is-size-3” ][ text “Column 2” ]
, column columnModifiers [ class “has-background-danger has-text-centered has-text-black text is-size-3” ][ text “Column 3” ]
, div [ class “mb-3” ][]
, column columnModifiers [ class “has-background-light” ]
[ column columnModifiers [ class “has-background-primary has-text-centered has-text-black text is-size-3” ][ text “Column 4” ]
, div [ class “mb-3” ][]
, column columnModifiers [ class “has-background-grey has-text-centered has-text-black text is-size-3” ][ text “Column 5” ]
]
, div [ class “mb-6” ][]
, div [ class “columns”]
[ div [ class “column has-background-warning has-text-centered has-text-black text is-size-3” ][ text “Column 6” ]
, div [ class “column has-background-primary has-text-centered has-text-black text is-size-3” ][ text “Column 7” ]
, div [ class “column has-background-grey has-text-centered has-text-black text is-size-3” ][ text “Column 8” ]
]
, div [ class “mb-6”][]
, div [ class “box” ]
[ div [ class “columns is-8” ]
[ div [ class “column has-background-danger has-text-centered has-text-black text is-size-3” ][ text “Column 9” ]
, div [ class “column has-background-grey has-text-centered has-text-black text is-size-3”][ text “Column 10” ]
, div [ class “column has-background-primary has-text-centered has-text-black text is-size-3” ][ text “Column 11” ]
]
]
]
main =
Browser.sandbox
{ init = init
, view = view
, update = update
}