Web.View.Style

Styles

width :: PxRem -> Mod

Set to a specific width

height :: PxRem -> Mod

Set to a specific height

minWidth :: PxRem -> Mod

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

minHeight :: PxRem -> Mod

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

pad :: Sides PxRem -> Mod

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"

gap :: PxRem -> Mod

The space between child elements. See pad

fontSize :: PxRem -> Mod

flexRow :: Mod

Set container to be a row. Favor row when possible

flexCol :: Mod

Set container to be a column. Favor col when possible

shadow :: Mod

Adds a basic drop shadow to an element

rounded :: PxRem -> Mod

Round the corners of the element

bg :: ToColor c => c -> Mod

Set the background color. See ToColor

color :: ToColor c => c -> Mod

Set the text color. See ToColor

bold :: Mod

hide :: Mod

Hide an element. See parent and media

border :: Sides PxRem -> Mod

Set a border around the element

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

borderColor :: ToColor c => c -> Mod

Set a border color. See ToColor

pointer :: Mod

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"

truncate :: Mod

Cut off the contents of the element

transition :: Ms -> TransitionProperty -> Mod

Animate changes to the given property

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

data TransitionProperty

Constructors

Width PxRem

Height PxRem

Instances

Show TransitionProperty

Defined in Web.View.Style

Methods

showsPrec :: Int -> TransitionProperty -> ShowS

show :: TransitionProperty -> String

showList :: [TransitionProperty] -> ShowS

textAlign :: Align -> Mod

data Align

Constructors

Center

Instances

Show Align

Defined in Web.View.Style

Methods

showsPrec :: Int -> Align -> ShowS

show :: Align -> String

showList :: [Align] -> ShowS

ToClassName Align

Defined in Web.View.Style

Methods

toClassName :: Align -> Text

ToStyleValue Align

Defined in Web.View.Style

Methods

toStyleValue :: Align -> StyleValue

Selector Modifiers

hover :: Mod -> Mod

Apply when hovering over an element

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

active :: Mod -> Mod

Apply when the mouse is pressed down on an element

even :: Mod -> Mod

Apply to even-numbered children

odd :: Mod -> Mod

Apply to odd-numbered children

media :: Media -> Mod -> Mod

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"

parent :: Text -> Mod -> Mod

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"

applyPseudo :: Pseudo -> Mod -> Mod

mapModClass :: (Class -> Class) -> Mod -> Mod

Creating New Styles

addClass :: Class -> Mod

Add a single class

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

cls :: ClassName -> Class

Construct a class from a ClassName

prop :: ToStyleValue val => Name -> val -> Class -> Class

Add a property to a class

(-.) :: ToClassName a => ClassName -> a -> ClassName infixl 6

Hyphneate classnames