clay-0.15.0: CSS preprocessor as embedded Haskell.

Safe Haskell | None
Language | Haskell2010

Clay.Grid

Description

Partial implementation of grid area CSS API.

For instance, you want to generate the following CSS:

    .grid1 {
      display: grid;
      width: max-content;
    }

    .grid3 {
      display: grid;
      width: max-content;
    }

    @media (min-width: 40.0rem) {
      .grid3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
        width: max-content;
      }
    }

The corresponding clay code:

     ".grid1" ? do
       display grid
       width maxContent
     ".grid3" ? do
       display grid
       width maxContent
     query M.screen [M.minWidth (rem 40)] $ ".grid3" ? do
       display grid
       gridTemplateColumns [fr 1, fr 1, fr 1]
       gridGap $ rem 1
       width maxContent

Synopsis

- gridGap :: Size a -> Css
- gridTemplateColumns :: [Size a] -> Css

# Documentation

gridGap :: Size a -> Css #

Property sets the gaps (gutters) between rows and columns.

gridTemplateColumns :: [Size a] -> Css #

Property defines the line names and track sizing functions of the grid columns.