This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0

Layout.Grid

Functions for creating grid layouts.

Options

Containers

alignContent : Align -> Rule

Specifies the alignment of content in a container along the row axis.

alignItems : Align -> Rule

Specifies the alignment of content in items along the column axis.

justifyContent : Align -> Rule

Specifies the alignment of content in a container along the row axis.

justifyItems : Align -> Rule

Specifies the alignment of content in items along the row axis.

gap : String -> String -> Rule

Shorthand for the combination of gapRow and gapColumn.

gapRow : String -> Rule

Specifies the size of the gaps between rows.

gapColumn : String -> Rule

Specifies the size of the gaps between columns.

Items

alignSelf : Align -> Rule

Specifies the alignment of content in an item in a container along the column axis.

justifySelf : Align -> Rule

Specifies the alignment of content in an item in a container along the column axis.

Nodes

grid : List String -> List String -> List (List String) -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg

Returns a div node which is styled as grid.

cell : String -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg

Returns a div node which is styled as a cell in a grid.

module Layout.Grid exposing
  ( alignContent
  , alignItems
  , justifyContent
  , justifyItems
  , gap
  , gapRow
  , gapColumn
  , alignSelf
  , justifySelf
  , grid
  , cell
  )

{-| Functions for creating grid layouts.

# Options

## Containers

@docs alignContent
@docs alignItems
@docs justifyContent
@docs justifyItems
@docs gap
@docs gapRow
@docs gapColumn

## Items

@docs alignSelf
@docs justifySelf

# Nodes

@docs grid
@docs cell

-}

import Html exposing (..)
import Html.Attributes exposing (..)

import Layout.Common exposing (..)

-- OPTIONS ---------------------------------------

{-| Specifies the alignment of content in a container along the row axis. -}
alignContent : Align -> Rule
alignContent option = case option of
  Start -> Just ("align-content", "start")
  Center -> Just ("align-content", "center")
  End -> Just ("align-content", "end")
  Around -> Just ("align-content", "space-evenly")
  Between -> Just ("align-content", "space-between")
  Stretch -> Just ("align-content", "stretch")

{-| Specifies the alignment of content in items along the column axis. -}
alignItems : Align -> Rule
alignItems option = case option of
  Start -> Just ("align-items", "start")
  Center -> Just ("align-items", "center")
  End -> Just ("align-items", "end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("align-items", "stretch")

{-| Specifies the alignment of content in a container along the row axis. -}
justifyContent : Align -> Rule
justifyContent option = case option of
  Start -> Just ("justify-content", "start")
  Center -> Just ("justify-content", "center")
  End -> Just ("justify-content", "end")
  Around -> Just ("justify-content", "space-evenly")
  Between -> Just ("justify-content", "space-between")
  Stretch -> Just ("justify-content", "stretch")

{-| Specifies the alignment of content in items along the row axis. -}
justifyItems : Align -> Rule
justifyItems option = case option of
  Start -> Just ("justify-items", "start")
  Center -> Just ("justify-items", "center")
  End -> Just ("justify-items", "end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("justify-items", "stretch")

{-| Specifies the alignment of content in an item in a container along the column axis. -}
alignSelf : Align -> Rule
alignSelf option = case option of
  Start -> Just ("align-self", "start")
  Center -> Just ("align-self", "center")
  End -> Just ("align-self", "end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("align-self", "stretch")

{-| Specifies the alignment of content in an item in a container along the column axis. -}
justifySelf : Align -> Rule
justifySelf option = case option of
  Start -> Just ("justify-self", "start")
  Center -> Just ("justify-self", "center")
  End -> Just ("justify-self", "end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("justify-self", "stretch")

{-| Shorthand for the combination of `gapRow` and `gapColumn`. -}
gap : String -> String -> Rule
gap row column = Just ("grid-gap", row ++ " " ++ column)

{-| Specifies the size of the gaps between rows. -}
gapRow : String -> Rule
gapRow option = Just ("grid-row-gap", option)

{-| Specifies the size of the gaps between columns. -}
gapColumn : String -> Rule
gapColumn option = Just ("grid-column-gap", option)

-- NODES -----------------------------------------

gridRules : List String -> List String -> List (List String) -> List (String, String)
gridRules columns rows areas =
  [ ("display", "grid")
  , ("grid-template-columns", String.join " " columns)
  , ("grid-template-rows", String.join " " rows)
  , ("grid-template-areas", String.join " " (List.map (\a -> "\"" ++ (String.join " " a) ++ "\"") areas))
  ]

{-| Returns a `div` node which is styled as grid. -}
grid : List String -> List String -> List (List String) -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
grid columns rows areas options attributes children =
  let styles = (gridRules columns rows areas) ++ (List.filterMap identity options)
  in div ((style styles) :: attributes) children

{-| Returns a `div` node which is styled as a cell in a grid. -}
cell : String -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
cell area options attributes children =
  let styles = ("grid-area", area) :: (List.filterMap identity options)
  in div ((style styles) :: attributes) children