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 : Bool

, gap : Gap

, display : Display

, centered : 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
    , gapless            = False             
    , display            = TabletAndBeyond
    , centered           = False
    }


myColumnsModifiers == columnsModifiers

columns :

ColumnsModifiers

-> List (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 : Width

, widths : Devices (Maybe 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 =

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 (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" ]
    ]

afidegnum/elm-bulmanizer/1.0.0

Bulma.Columns

Columns

Column

Modules