A simple way to build responsive grids.
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"
]
]
{ multiline : Basics.Bool
, gap : Gap
, display : Display
, centered : Basics.Bool
}
mobile : Display
tablet : Display
desktop : Display
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.
Html.Styled.Html msg
{ 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.
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" ]
]