MichaelCombs28 / elm-css-bulma / 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 : Basics.Bool
, gap : Gap
, display : Display
, centered : Basics.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 (Html.Styled.Attribute msg) -> List (Column msg) -> Html.Styled.Html msg

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

Column


type alias Column msg =
Html.Styled.Html msg


type alias ColumnModifiers =
{ offset : Bulma.Styled.Modifiers.Width
, widths : Bulma.Styled.Modifiers.Devices (Maybe Bulma.Styled.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.Styled.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.Styled.Attribute msg) -> List (Html.Styled.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" ]
        ]