Safe Haskell	None
Language	Haskell2010

Clay.Grid

Contents

Grid
Size and location

Description

Partial implementation of | grid area CSS API.

Synopsis

gridGap :: Size a -> Css
gridTemplateColumns :: [Size a] -> Css
data GridLine
class ToGridLine a
data GridLines2
class ToGridLines2 a
data GridLines4
class ToGridLines4 a
data OneGridLine
data TwoGridLines
data ThreeGridLines
data FourGridLines
data CustomIdentGrid
customIdentToText :: CustomIdentGrid -> Text
partialMkCustomIdentGrid :: Text -> CustomIdentGrid
class ToSpan a
gridArea :: ToGridLines4 a => a -> Css
gridColumn :: ToGridLines2 a => a -> Css
gridColumnStart :: ToGridLine a => a -> Css
gridColumnEnd :: ToGridLine a => a -> Css
gridRow :: ToGridLines2 a => a -> Css
gridRowStart :: ToGridLine a => a -> Css
gridRowEnd :: ToGridLine a => a -> Css
(//) :: (Slash a r, ToGridLine b) => a -> b -> r
span_ :: ToSpan a => a -> GridLine

Grid

grid-gap and grid-template CSS properties.

Example

For the below CSS code:

.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 is:

 ".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

gridGap :: Size a -> Css Source #

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

gridTemplateColumns :: [Size a] -> Css Source #

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

Size and location

CSS documentation

The below functions are based on MDN Web Docs CSS documentation.

Naming note

Expand

In this documentation, as the functions are polymorphic we sometimes refer to the CSS types as used in the mdm web docs_ rather than the Haskell types. For example, grid-line is used instead of GridLine as a the argument might be provided as a GridLine but also as an Integer, String, etc.

Pragma

If you want to avoid specifying the types of the arguments, enable the ExtendedDefaultRules GHC language pragma as well as the -Wno-type-defaults GHC option to avoid compilation warnings.

{-# LANGUAGE ExtendedDefaultRules #-}
{-# OPTIONS_GHC -Wno-type-defaults #-}

Examples

Expand

With the above enabled, you can write:

> gridRowStart 2

> gridRowStart "somegridarea"

If you do not enable those, then you must write:

> gridRowStart (2 :: Integer)

> gridRowStart ("somegridarea" :: String)

Note

Expand

If you decide to enable the above, it is advisable to have your Clay CSS code in its own module, so the behaviour of the rest of your code is not affected.

Examples

Examples are provided through the documentation for the various functions. Further examples can be found in the source code of the test suite in the GridSpec.hs module.

Data types and type classes

data GridLine Source #

A grid-line value.

A grid-line value specifies a size and location in a grid.

Note

Expand

To know more about grid-line value, see for example the documentation of the grid-row-start CSS property.

Instances

Instances details

Show GridLine Source #
Instance details Defined in Clay.Grid Methods showsPrec :: Int -> GridLine -> ShowS # show :: GridLine -> String # showList :: [GridLine] -> ShowS #
Auto GridLine Source #	Keyword indicating that the property contributes nothing to the grid item's placement.
Instance details Defined in Clay.Grid Methods auto :: GridLine Source #
Inherit GridLine Source #	Keyword `inherit` applied to a `GridLine`.
Instance details Defined in Clay.Grid Methods inherit :: GridLine Source #
Initial GridLine Source #	Keyword `initial` applied to a `GridLine`.
Instance details Defined in Clay.Grid Methods initial :: GridLine Source #
Unset GridLine Source #	Keyword `unset` applied to a `GridLine`.
Instance details Defined in Clay.Grid Methods unset :: GridLine Source #
ToGridLine GridLine Source #
Instance details Defined in Clay.Grid Methods toGridLine :: GridLine -> GridLine
ToGridLines2 GridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: GridLine -> GridLines2
ToGridLines4 GridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: GridLine -> GridLines4
Val GridLine Source #	Convertion of `GridLine` to `Value`.
Instance details Defined in Clay.Grid Methods value :: GridLine -> Value Source #
Eq GridLine Source #
Instance details Defined in Clay.Grid Methods (==) :: GridLine -> GridLine -> Bool # (/=) :: GridLine -> GridLine -> Bool #

class ToGridLine a Source #

Minimal complete definition

toGridLine

Instances

Instances details

ToGridLine CustomIdentGrid Source #	`custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLine :: CustomIdentGrid -> GridLine
ToGridLine GridLine Source #
Instance details Defined in Clay.Grid Methods toGridLine :: GridLine -> GridLine
ToGridLine String Source #	`custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLine :: String -> GridLine
ToGridLine Integer Source #
Instance details Defined in Clay.Grid Methods toGridLine :: Integer -> GridLine
ToGridLine (CustomIdentGrid, Integer) Source #	Both `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLine :: (CustomIdentGrid, Integer) -> GridLine
ToGridLine (String, Integer) Source #	Both `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLine :: (String, Integer) -> GridLine

data GridLines2 Source #

One or two grid-line values.

Instances

Instances details

ToGridLines2 GridLines2 Source #	One or two `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines2 :: GridLines2 -> GridLines2
Val GridLines2 Source #
Instance details Defined in Clay.Grid Methods value :: GridLines2 -> Value Source #

class ToGridLines2 a Source #

Minimal complete definition

toGridLines2

Instances

Instances details

ToGridLines2 CustomIdentGrid Source #	One `custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: CustomIdentGrid -> GridLines2
ToGridLines2 GridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: GridLine -> GridLines2
ToGridLines2 GridLines2 Source #	One or two `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines2 :: GridLines2 -> GridLines2
ToGridLines2 OneGridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: OneGridLine -> GridLines2
ToGridLines2 TwoGridLines Source #	Two `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines2 :: TwoGridLines -> GridLines2
ToGridLines2 String Source #	One `custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: String -> GridLines2
ToGridLines2 Integer Source #	One `Integer` value. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines2 :: Integer -> GridLines2
ToGridLines2 (CustomIdentGrid, Integer) Source #	One time both a `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines2 :: (CustomIdentGrid, Integer) -> GridLines2
ToGridLines2 (String, Integer) Source #	One time both a `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines2 :: (String, Integer) -> GridLines2

data GridLines4 Source #

One, two, three or four grid-line values.

Instances

Instances details

ToGridLines4 GridLines4 Source #	One, two, three or four `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: GridLines4 -> GridLines4
Val GridLines4 Source #
Instance details Defined in Clay.Grid Methods value :: GridLines4 -> Value Source #

class ToGridLines4 a Source #

Minimal complete definition

toGridLines4

Instances

Instances details

ToGridLines4 CustomIdentGrid Source #	One `custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: CustomIdentGrid -> GridLines4
ToGridLines4 FourGridLines Source #	Four `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: FourGridLines -> GridLines4
ToGridLines4 GridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: GridLine -> GridLines4
ToGridLines4 GridLines4 Source #	One, two, three or four `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: GridLines4 -> GridLines4
ToGridLines4 OneGridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: OneGridLine -> GridLines4
ToGridLines4 ThreeGridLines Source #	Three `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: ThreeGridLines -> GridLines4
ToGridLines4 TwoGridLines Source #	Two `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: TwoGridLines -> GridLines4
ToGridLines4 String Source #	One `custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: String -> GridLines4
ToGridLines4 Integer Source #	One `Integer` value. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines4 :: Integer -> GridLines4
ToGridLines4 (CustomIdentGrid, Integer) Source #	One time both a `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines4 :: (CustomIdentGrid, Integer) -> GridLines4
ToGridLines4 (String, Integer) Source #	One time both a `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines4 :: (String, Integer) -> GridLines4

data OneGridLine Source #

One GridLine value.

Instances

Instances details

ToGridLines2 OneGridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: OneGridLine -> GridLines2
ToGridLines4 OneGridLine Source #	One `grid-line` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: OneGridLine -> GridLines4
Val OneGridLine Source #
Instance details Defined in Clay.Grid Methods value :: OneGridLine -> Value Source #

data TwoGridLines Source #

Two GridLine values.

Instances

Instances details

ToGridLines2 TwoGridLines Source #	Two `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines2 :: TwoGridLines -> GridLines2
ToGridLines4 TwoGridLines Source #	Two `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: TwoGridLines -> GridLines4
Val TwoGridLines Source #
Instance details Defined in Clay.Grid Methods value :: TwoGridLines -> Value Source #

data ThreeGridLines Source #

Three GridLine values.

Instances

Instances details

ToGridLines4 ThreeGridLines Source #	Three `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: ThreeGridLines -> GridLines4
Val ThreeGridLines Source #
Instance details Defined in Clay.Grid Methods value :: ThreeGridLines -> Value Source #

data FourGridLines Source #

Four GridLine values.

Instances

Instances details

ToGridLines4 FourGridLines Source #	Four `grid-line` values.
Instance details Defined in Clay.Grid Methods toGridLines4 :: FourGridLines -> GridLines4
Val FourGridLines Source #
Instance details Defined in Clay.Grid Methods value :: FourGridLines -> Value Source #

data CustomIdentGrid Source #

CSS custom-ident.

The data constructor is not exported. Use the partialMkCustomIdentGrid smart constructor to create a CustomIdentGrid.

Note

Expand

In CSS, some values for custom-ident are invalid depending on the CSS property the custom-ident is used with. Consequently, the custom-ident is only for CSS grid.

Instances

Instances details

Read CustomIdentGrid Source #
Instance details Defined in Clay.Grid Methods readsPrec :: Int -> ReadS CustomIdentGrid # readList :: ReadS [CustomIdentGrid] # readPrec :: ReadPrec CustomIdentGrid # readListPrec :: ReadPrec [CustomIdentGrid] #
Show CustomIdentGrid Source #
Instance details Defined in Clay.Grid Methods showsPrec :: Int -> CustomIdentGrid -> ShowS # show :: CustomIdentGrid -> String # showList :: [CustomIdentGrid] -> ShowS #
ToGridLine CustomIdentGrid Source #	`custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLine :: CustomIdentGrid -> GridLine
ToGridLines2 CustomIdentGrid Source #	One `custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLines2 :: CustomIdentGrid -> GridLines2
ToGridLines4 CustomIdentGrid Source #	One `custom-ident` value.
Instance details Defined in Clay.Grid Methods toGridLines4 :: CustomIdentGrid -> GridLines4
Eq CustomIdentGrid Source #
Instance details Defined in Clay.Grid Methods (==) :: CustomIdentGrid -> CustomIdentGrid -> Bool # (/=) :: CustomIdentGrid -> CustomIdentGrid -> Bool #
Ord CustomIdentGrid Source #
Instance details Defined in Clay.Grid Methods compare :: CustomIdentGrid -> CustomIdentGrid -> Ordering # (<) :: CustomIdentGrid -> CustomIdentGrid -> Bool # (<=) :: CustomIdentGrid -> CustomIdentGrid -> Bool # (>) :: CustomIdentGrid -> CustomIdentGrid -> Bool # (>=) :: CustomIdentGrid -> CustomIdentGrid -> Bool # max :: CustomIdentGrid -> CustomIdentGrid -> CustomIdentGrid # min :: CustomIdentGrid -> CustomIdentGrid -> CustomIdentGrid #
ToGridLine (CustomIdentGrid, Integer) Source #	Both `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLine :: (CustomIdentGrid, Integer) -> GridLine
ToGridLines2 (CustomIdentGrid, Integer) Source #	One time both a `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines2 :: (CustomIdentGrid, Integer) -> GridLines2
ToGridLines4 (CustomIdentGrid, Integer) Source #	One time both a `custom-ident` and `Integer` values, provided as a pair. NOTE: `Integer` value of 0 is invalid.
Instance details Defined in Clay.Grid Methods toGridLines4 :: (CustomIdentGrid, Integer) -> GridLines4

customIdentToText :: CustomIdentGrid -> Text Source #

Convert a CustomIdentGrid to Text.

Note

Expand

The function is defined on its own as the newtype constructor of CustomIdentGridis not exported.

partialMkCustomIdentGrid :: Text -> CustomIdentGrid Source #

Create a CustomIdentGrid.

WARNING: this function is partial. An error will be raised if:

"span" is provided as a value (this is a reserved keyword in this context)
a number is provided as first character
If a hyphen (-) is provided as first character:
- * a number is provided as second character
- * a hyphen (-) is provided as second character.

Note

Expand

The above is a partial implementation of the CSS custom-ident naming rules. If you stick to the following charset [a-zA-z0-9-_] the checks will be effective and your CSS custom-ident will be a valid one. On the other hand, the following will not be checked:

character escaping (for example ?) or unicode
characters provided as hexadecimal number (for example 0x03BB)
characters outside of the above charset.

More information regarding this topic can be found on mdm web docs_

class ToSpan a Source #

Minimal complete definition

span_

Instances

Instances details

ToSpan String Source #	One line from the provided name is counted.
Instance details Defined in Clay.Grid Methods span_ :: String -> GridLine Source #
ToSpan Integer Source #	Contributes the nth grid line to the grid item's placement. NOTE: negative `Integer` or 0 values are invalid.
Instance details Defined in Clay.Grid Methods span_ :: Integer -> GridLine Source #
ToSpan (String, Integer) Source #	Nth lines from the provided name are counted. NOTE: negative `Integer` or 0 values are invalid.
Instance details Defined in Clay.Grid Methods span_ :: (String, Integer) -> GridLine Source #

Style properties

The below functions are partial. They will raise an error if provided with a grid-line value which is:

an Integer value of 0
a pair with an Integer component of value 0
a span_ function provided with an Integer value of 0 or negative
a span_ function provided with a pair value with an Integer component of 0 or negative.
an invalid custom-ident value, see partialMkCustomIdentGrid.

gridArea :: ToGridLines4 a => a -> Css Source #

Property shorthand specifies a grid item's size and location within a grid.

One to four grid-line values can be specified. Grid-line values must be separated by a (//) operator.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridArea (auto :: GridLine)

gridArea "somegridarea"

gridArea $ ("somegridarea", 4) // ("someothergridarea", 2)

gridArea $ 1 // 3 // 4

gridColumn :: ToGridLines2 a => a -> Css Source #

Property shorthand specifies a grid item's size and location within a grid column.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridColumn (auto :: GridLine)

gridColumn $ span_ 3

gridColumn $ span_ ("somegridarea", 5)

gridColumn $ span_ 3 // 6

gridColumnStart :: ToGridLine a => a -> Css Source #

Property specifies a grid item's start position within the grid column.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridColumnStart (inherit :: GridLine)

gridColumnStart 2

gridColumnStart ("somegridarea", 4)

gridColumnStart $ span_ ("somegridarea", 5)

gridColumnEnd :: ToGridLine a => a -> Css Source #

Property specifies a grid item's end position within the grid column.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridColumnEnd (initial :: GridLine)

gridColumnEnd 2

gridColumnEnd "somegridarea"

gridColumnEnd $ span_ "somegridarea"

gridRow :: ToGridLines2 a => a -> Css Source #

Property shorthand specifies a grid item's size and location within a grid row.

One or two grid-line values can be specified. grid-line values must be separated by a (//) operator.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridRow (unset :: GridLine)

gridRow $ span_ 3

gridRow $ span_ 3 // 6

gridRow $ span_ ("somegridarea", 5) // span_ 2

gridRowStart :: ToGridLine a => a -> Css Source #

Property specifies a grid item's start position within the grid row.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridRowStart (initial :: GridLine)

gridRowStart (-2)

gridRowStart $ span_ "somegridarea"

gridRowStart "somegridarea"

gridRowEnd :: ToGridLine a => a -> Css Source #

Property specifies a grid item's end position within the grid row.

WARNING: this function is partial. See above Clay.Grid.

Examples

Expand

The below examples assume that the ExtendedDefaultRules GHC language pragma is enabled. See above Clay.Grid.

gridRowEnd (auto :: GridLine)

gridRowEnd (-2)

gridRowEnd ("somegridarea", 4)

gridRowEnd $ span_ 3

Keywords

(//) :: (Slash a r, ToGridLine b) => a -> b -> r Source #

/ CSS operator. Separates grid-line values.

span_ :: ToSpan a => a -> GridLine Source #

span CSS keyword, contributes to the grid item's placement.