surprisetalk / elm-bulma / Bulma.Columns

A simple way to build responsive grids.

Columns

Learn more about columnar grids in the official docs.

myGrid : Html msg
myGrid
  = columns myColumnsModifiers []
    [ column myColumnModifiers [] 
      [ text "First Column"
      ]
    , column myColumnModifiers [] 
      [ text "Second Column"
      ]
    , column myColumnModifiers [] 
      [ text "Third Column"
      ]
    ]


type alias ColumnsModifiers =
{ multiline : Basics.Bool
, gap : Gap
, display : Display
, centered : Basics.Bool 
}


type Display
    = MobileAndBeyond
    | TabletAndBeyond
    | DesktopAndBeyond


type Gap
    = Gap0
    | Gap1
    | Gap2
    | Gap3
    | Gap4
    | Gap5
    | Gap6
    | Gap7
    | Gap8

columnsModifiers : ColumnsModifiers

Default column attributes.

myColumnsModifiers : ColumnsModifiers
myColumnsModifiers 
  = { multiline          = False
    , gap                = Gap3             
    , display            = TabletAndBeyond
    , centered           = False
    }

myColumnsModifiers == columnsModifiers

columns : ColumnsModifiers -> List (Html.Attribute msg) -> List (Column msg) -> Html msg

Make a columnar grid! The widths of all your columns should be no greater than twelve.

Column


type alias Column msg =
Html msg


type alias ColumnModifiers =
{ offset : Bulma.Modifiers.Width
, widths : Bulma.Modifiers.Devices (Maybe Bulma.Modifiers.Width) 
}

The widths field requires a Maybe Width for each device size. Nothing will create a narrow column for that device range.


type alias Offset =
Bulma.Modifiers.Width

columnModifiers : ColumnModifiers

Default offsets and widths for an individiual column. The offset defaults to Auto. Each device defaults to Just Auto.

narrowColumnModifiers : ColumnModifiers

Default offsets and widths for an individiual column. The offset defaults to Auto. Each device defaults to Nothing.

column : ColumnModifiers -> List (Html.Attribute msg) -> List (Html msg) -> Column msg

A column element that is meant to be placed in columns.

myColumn : Html msg
myColumn
  = column myColumnModifiers []
    [ h1 [] [ text "Lorem" ]
    , h2 [] [ text "ipsum" ]
    , h3 [] [ text "dolor" ]
    , h4 [] [ text "sit" ]
    , h5 [] [ text "amet" ]
    ]