Bulma.Styled.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

mobile : Display

tablet : Display

desktop : Display

type Gap

gap0 : Gap

gap1 : Gap

gap2 : Gap

gap3 : Gap

gap4 : Gap

gap5 : Gap

gap6 : Gap

gap7 : Gap

gap8 : Gap

columnsModifiers : ColumnsModifiers

Default column attributes.

myColumnsModifiers : ColumnsModifiers
myColumnsModifiers
  = { multiline          = False
    , gap                = Gap3
    , 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" ]
        ]

MichaelCombs28/elm-css-bulma/1.0.0

Bulma.Styled.Columns

Columns

Column

Modules