A single HTML tag. Note that the class attribute is stored separately from the rest of the attributes to make adding styles easier

Element functions expect a Mod function as their first argument that adds attributes and classes.

userEmail :: User -> View c ()
userEmail user = input (fontSize 16 . active) (text user.email)
  where
    active = isActive user then bold else id

All the atomic classes used in a View

Atomic classes include a selector and the corresponding styles

The styles to apply for a given atomic Class

The selector to use for the given atomic Class

Create a Selector given only a ClassName

A class name

Convert a type into a className segment to generate unique compound style names based on the value

Psuedos allow for specifying styles that only apply in certain conditions. See hover etc

el (color Primary . hover (color White)) "hello"

The value of a css style property

Use a type as a css style property value

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

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

Options for styles that support specifying various sides. This has a "fake" Num instance to support literals

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

Element's attributes do not include class, which is separated. FlatAttributes generate the class attribute and include it

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

data AppColor
  = White
  | Primary
  | Dark

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

hello :: View c ()
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