clojj / elm-css-grid / SimpleGrid

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.

Definition of the CSS Grid container

gridContainer : SimpleTemplate -> List (Html.Styled.Attribute msg) -> List (CssGrid.Areas.GridAreaElement msg) -> Html.Styled.Html msg

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.

mediaGridContainer : List ResponsiveTemplate -> List (Html.Styled.Attribute msg) -> List (CssGrid.Areas.GridAreaElement msg) -> Html.Styled.Html msg

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.

Definition of layouted Html, identified by a value of type GridArea

gridElement : GridArea -> List (Html.Styled.Html msg) -> CssGrid.Areas.GridAreaElement msg

Constructs a Html element with grid-area

Defining a (CSS Grid) template- and area-definitions


type SimpleTemplate

Represents simple template for CSS Grid

simpleTemplate : CssGrid.Areas.Areas -> CssGrid.Sizes.Gap -> List CssGrid.Sizes.LengthTemplate -> SimpleTemplate

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.


type alias GridArea =
CssGrid.Areas.GridArea

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:

  1. As an element of the template-definition.
  2. As the value of the grid-area property in a Html element, which gets its layout from the template-definition.

gridArea : String -> GridArea

Constructs a GridArea

Binding templates to media-queries


type alias ResponsiveTemplate =
( List Css.Media.MediaQuery
, SimpleTemplate 
)

A pair of values, defining the media-queries (first value) for the template (second value) to be active.

Common length


type alias Length =
CssGrid.Sizes.Length

Length with explicit units.

fr : Basics.Float -> Length

A 'fractional' length

px : Basics.Int -> Length

A length in absolute pixels.

Length for template definitions


type alias LengthTemplate =
CssGrid.Sizes.LengthTemplate

Length with explicit units plus template-specific length-values.

units : Length -> LengthTemplate

Constructs a length from a , which can be used in a template-definition (like grid-template-columns)

auto : LengthTemplate

The auto value from CSS Grid.

minmax : Length -> Length -> LengthTemplate

The minmax function from CSS Grid.

gap : Length -> CssGrid.Sizes.Gap

The gap function from CSS Grid.