Create an atomic CSS utility. These are classes that set a single property, allowing you to compose styles like functions

bold :: Styleable h => CSS h -> CSS h
bold = utility "bold" ["font-weight" :. "bold"]

pad :: Styleable h => PxRem -> CSS h -> CSS h
pad px = utility ("pad" -. px) ["padding" :. style px]

example = el ~ bold . pad 10 $ "Padded and bold"

Embed CSS with a custom selector and apply it to an element. Modifiers like hover will ignore this

listItems =
  css
    "list"
    ".list > .item"
    [ "display" :. "list-item"
    , "list-style" :. "square"
    ]

example = do
  el ~ listItems $ do
    el ~ cls "item" $ "one"
    el ~ cls "item" $ "two"
    el ~ cls "item" $ "three"

Apply a class name with no styles. Useful for external CSS

el ~ cls "parent" $ do
  el ~ cls "item" $ "one"
  el ~ cls "item" $ "two"

Set container display

el ~ (display None) $ "none"
el ~ (display Block) $ "block"

Set to specific width

el ~ width 100 $ "100px"
el ~ width (PxRem 100) $ "100px"
el ~ width (Pct 50) $ "50pct"

Allow width to grow to contents but not shrink any smaller than value

Allow height to grow to contents but not shrink any smaller than value

position:absolute, relative, etc. See stack and popup for a higher-level interface

tag "nav" ~ position Fixed . height 100 $ "Navigation bar"
tag "div" ~ flexCol . margin (T 100) $ "Main Content"

Set top, bottom, right, and left all at once

Control how an element clips content that exceeds its bounds

Lay out children in a row. See row

el ~ flexRow $ do
   el "Left"
   el " - " ~ grow
   el "Right"

Lay out children in a column. See col

el ~ flexCol $ do
   el "Top"
   el " - " ~ grow
   el "Bottom"

Grow to fill the available space in the parent flexRow or flexCol

Set the flex-wrap

el ~ flexWrap WrapReverse $ do
  el "one"
  el "two"
  el "three"
el ~ flexWrap Wrap $ do
  el "one"
  el "two"
  el "three"

Stack children on top of each other as layers. Each layer has the full width. See popup

el ~ stack $ do
  el "Background"
  el ~ bg Black . opacity 0.5 $ "Overlay"

Place an element above others, out of the flow of the page

el ~ stack $ do
  input @ value "Autocomplete Box"
  el ~ popup (TL 10 10) $ do
    el "Item 1"
    el "Item 2"
    el "Item 3"
el "This would be covered by the menu"

Space surrounding the children of the element

To create even spacing around and between all elements combine with gap

el ~ flexCol . pad 10 . gap 10 $ do
  el "one"
  el "two"
  el "three"

The space between child elements. See pad

Element margin. Using gap and pad on parents is more intuitive and usually makes margin redundant

Set the background color. See ToColor

Set a border around the element

el ~ border 1 $ "all sides"
el ~ border (X 1) $ "only left and right"

Set a border color. See ToColor

Round the corners of the element

Add a drop shadow to an element

input ~ shadow Inner $ "Inset Shadow"
button ~ shadow () $ "Click Me"

Animate changes to the given property

el ~ transition 100 (Height 400) $ "Tall"
el ~ transition 100 (Height 100) $ "Small"

Set the list style of an item

tag "ol" $ do
  tag "li" ~ list Decimal $ "one"
  tag "li" ~ list Decimal $ "two"
  tag "li" ~ list Decimal $ "three"

Use a button-like cursor when hovering over the element

Button-like elements:

btn = pointer . bg Primary . hover (bg PrimaryLight)

options = do
  el ~ btn $ "Login"
  el ~ btn $ "Sign Up"

Apply when hovering over an element

el ~ bg Primary . hover (bg PrimaryLight) $ "Hover"

Apply when the mouse is pressed down on an element

Apply to even-numbered children

Apply to odd-numbered children

Apply when this element is contained somewhere another element with the given class

el ~ descendentOf "htmx-request" bold $ "Only bold when htmx is making a request"

Apply when the Media matches the current window. This allows for responsive designs

el ~ width 100 . media (MinWidth 800) (width 400) $ do
  "Big if window > 800"

Media allows for responsive designs that change based on characteristics of the window. See Layout Example

ToColor allows you to create a type containing your application's colors:

data AppColor
  = White
  | Primary
  | Dark
  deriving (Show)

instance ToColor AppColor where
  colorValue White = "#FFF"
  colorValue Dark = "#333"
  colorValue Primary = "#00F"

hello = el ~ bg Primary . color White $ "Hello"

Hexidecimal Color. Can be specified with or without the leading #. Recommended to use an AppColor type instead of manually using hex colors. See ToColor

Default CSS to remove unintuitive default styles. This is required for utilities to work as expected

import Data.String.Interpolate (i)

toDocument :: ByteString -> ByteString
toDocument cnt =
  [i|<html>
    <head>
      <style type="text/css">#{cssResetEmbed}</style>
    </head>
    <body>#{cnt}</body>
  </html>|]

Convert a type to a css style value

data Float = Right | Left

instance ToStyle Float where
  style Right = "right"
  style Left = "left"

Reuse types that belong to more than one css property

data None = None
  deriving (Show, ToClassName, ToStyle)

data Display
  = Block
  | Flex
  deriving (Show, ToClassName, ToStyle)
instance PropertyStyle Display Display
instance PropertyStyle Display None

display :: (PropertyStyle Display d, ToClassName d, Styleable h) => d -> CSS h -> CSS h
display disp =
  utility ("disp" -. disp) ["display" :. propertyStyle @Display disp]

Px, converted to Rem. Allows for the user to change the document font size and have the app scale accordingly. But allows the programmer to code in pixels to match a design

Milliseconds, used for transitions

Options for styles that support specifying various sides

border 5
border (X 2)
border (TRBL 0 5 0 0)

Get all the declarations for a utility or combination of them

Get all the rules for combined utilities