the-sett / the-sett-laf / Grid

Responsive grids based on flexbox. This module provides a DSL for building such grids.

Grid constructors

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.

Column size and offset

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.

Justify content

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.

Align Items

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.

Ordering and direction

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.