Hyperbole Examples

Hyperbole encourages using the Atomic CSS package to factor styles with haskell functions

import Web.Atomic.CSS
import Web.Hyperbole

header = bold
h1 = header . fontSize 32
h2 = header . fontSize 24
h3 = header . fontSize 18
clickable = pointer . hover bold

example = do
  col $ do
    el ~ h3 $ "My Page"
    el ~ border 1 . pad 10 . clickable $ "Hover Me"
  ...

Note how we use hover to provide immediate feedback to the user without talking to the server

My Page

Hover Me

View Source

Animate changes with CSS Transitions

Small

View Source

For immediate feedback, create interactivity via Atomic CSS whenever possible

One

Two

Three

Four

Five

Six

View Source

You can opt-out of Atomic CSS and use external classes with class_