Responsive grids based on flexbox. This module provides a DSL for building such grids.
grid : List (List (Grid -> ResponsiveDSL.Builder { a | grid : ResponsiveDSL.Compatible } Grid)) -> List (Html.Styled.Attribute msg) -> List (Grid -> ResponsiveStyle -> Html.Styled.Html msg) -> ResponsiveStyle -> Html.Styled.Html msg
The outer builder of a responsive grid.
row : List (List (Grid -> ResponsiveDSL.Builder { a | row : ResponsiveDSL.Compatible } Grid)) -> List (Html.Styled.Attribute msg) -> List (Grid -> ResponsiveStyle -> Html.Styled.Html msg) -> Grid -> ResponsiveStyle -> Html.Styled.Html msg
The row builder for a responsive grid, on which row compatible properties can be defined.
col : List (List (Grid -> ResponsiveDSL.Builder { a | col : ResponsiveDSL.Compatible } Grid)) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Grid -> ResponsiveStyle -> Html.Styled.Html msg
The column builder for a responsive grid, on which column compatible properties can be defined.
auto : ResponsiveDSL.StyleBuilder { a | row : Basics.Never } Grid
Auto column width means that a column expands to fill the available width.
columns : Basics.Float -> Responsive.Device -> Grid -> ResponsiveDSL.Builder { a | row : Basics.Never } Grid
Defines how many column widths a column will take up. Zero means use 'auto' width and expand to fill available space.
When applied to a row or grid, this sets the total number of columns available. When applied to a column, this sets the number of columns taken up out of the total available.
offset : Basics.Float -> Responsive.Device -> Grid -> ResponsiveDSL.Builder { a | grid : Basics.Never, row : Basics.Never } Grid
Defines how many column widths a column is offset from the left hand side by.
start : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never } Grid
Puts the content of a row or column at the start.
end : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never } Grid
Puts the content of a row or column at the end.
center : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never } Grid
Centers a row or column.
between : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, col : Basics.Never } Grid
Only pad spacing between items in a row.
around : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, col : Basics.Never } Grid
Pad spacing around items in a row, with space on the left and right hand sides.
top : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, column : Basics.Never } Grid
Aligns items at the top of a row.
middle : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, column : Basics.Never } Grid
Aligns items in the middle of a row.
bottom : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, column : Basics.Never } Grid
Aligns items at the bottom of a row.
stretch : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, column : Basics.Never } Grid
Stretches items to fill the row height-wise.
baseline : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never, column : Basics.Never } Grid
Aligns items so their balines align at the top of a row.
first : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never } Grid
Orders a row or column so it comes first.
last : ResponsiveDSL.StyleBuilder { a | grid : Basics.Never } Grid
Orders a row or column so it comes last.
reverse : Responsive.Device -> Grid -> ResponsiveDSL.Builder { a | grid : Basics.Never } Grid
Reverses the order of items in a column or row.