This library provides types and functions for building views with CSS Grid layout.
It depends on the package rtfeldman/elm-css for constructing styled Html (Copyright (c) 2015, Richard Feldman).
A 'fractional' length
A length in absolute pixels.
Length with explicit units plus template-specific length-values.
Constructs a length from a , which can be used in a template-definition (like grid-template-columns)
The auto value from CSS Grid.
The minmax function from CSS Grid.
Represents simple template for CSS Grid
Constructor function. The resulting value represents a minimal layout definition with areas, grid-gap and grid-template-columns.
A value of this type, when used somewhere inside the view function, will produce CSS similar to this example:
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad footer";Implicitly, grid-template-rows are defined as needed by the area definition.
See also common layout.
Represents a grid-area, uniquely identified by a name. The name of the grid-area must be unique for the entire view.
gridArea "header"The resulting GridArea will be appear in the resulting CSS in two places:
As an element of the template-definition.
As the value of the grid-area property in a Html element, which gets its layout from the template-definition.
Constructs a GridArea
A pair of values, defining the media-queries (first value) for the template (second value) to be active.
Constructs a div container which will layout child-elements identified by areas defined in the template-definition(s).
Uses SimpleTemplate to provide one single layout.
Constructs a div container which will layout child-elements identified by areas defined in the template-definition(s).
Uses ResponsiveTemplate to provide a responsive layout for more than one media device.
GridAreaConstructs a Html element with grid-area
Length with explicit units.