Set to a specific width

Set to a specific height

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

Space surrounding the children of the element

To create even spacing around and between all elements:

col (pad 10 . gap 10) $ do
  el_ "one"
  el_ "two"
  el_ "three"

The space between child elements. See pad

Add a drop shadow to an element

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

Round the corners of the element

Set the background color. See ToColor

Set the text color. See ToColor

Set the list style of an item

ol id $ do
  li (list Decimal) "First"
  li (list Decimal) "Second"
  li (list Decimal) "Third"

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

Use a button-like cursor when hovering over the element

Button-like elements:

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

options = row id $ do
  el btn "Login"
  el btn "Sign Up"

Animate changes to the given property

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

Set Top, Right, Bottom and Left. Requires position Absolute or Fixed. Also see popup

position:absolute. See stack and popout

Set container display

el (display None) HIDDEN

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 the Media matches the current window. This allows for responsive designs

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

Apply when the element is somewhere inside an anscestor.

For example, the HTMX library applies an "htmx-request" class to the body when a request is pending. We can use this to create a loading indicator

el (pad 10) $ do
  el (parent "htmx-request" flexRow . hide) "Loading..."
  el (parent "htmx-request" hide . flexRow) "Normal Content"

Add a single class

width :: PxRem -> Mod
width n =
  addClass
    $ cls ("w" -. n)
    & prop "width" n
    & prop @Int "flex-shrink" 0

Construct a class from a ClassName

Construct a mod from a ClassName with no CSS properties. Convenience for situations where external CSS classes need to be referenced.

el (extClass "btn" . extClass "btn-primary") "Click me!"

Add a property to a class

Hyphenate classnames