Embeds the stylesheet and renders the Element's into Html.

Same as root, but the height and width of the site is set to the height and width of the screen.

You can think of an Element as Html with built-in layout.

It has one style identifier, which you can think of as a CSS class.

It can also have style variations, which are covered in the Style module.

The most basic element.

You need to specify a style, a list of attributes, and a single child.

-- an element with the style `MyStyle`, that is aligned left, and has one child.
el MyStyle [ alignLeft ] (text "Hello World!")

el can only have one child because in order to have multiple children, we need to specify how the layout would work.

For when you want to embed Html.

If you're using this library, I'd encourage you to try to solve your problem without using this escape hatch.

Usage of this function makes the most sense when you're dealing with Html from another module or package.

Change the msg that an Element is sending.

An analog of Html.map.

A text layout.

Children that are aligned left or right will be floated left or right. Everything else if arranged in the standard 'block' layout of css, meaning a column flowing down.

Paragraph is actually a layout if you can believe it!

This is the same as a textLayout, except all of the children are set to display:inline.

Because all the children are inline, they will not respect and width or height set on them.

An interface to css grid. Here's a basic example:

grid MyGridStyle
    { columns = [ px 100, px 100, px 100, px 100 ]
    , rows =
        [ px 100
        , px 100
        , px 100
        , px 100
        ]
    }
    []
    [ area
        { start = ( 0, 0 )
        , width = 1
        , height = 1
        }
        (el Box [] (text "box"))
    , area
        { start = ( 1, 1 )
        , width = 1
        , height = 2
        }
        (el Box [] (text "box"))
    ]

With a named grid, you can name areas within the grid and use that name to place an element.

Here's an example:

namedGrid MyGridStyle
    { columns = [ px 200, px 200, px 200, fill 1 ]
    , rows =
        [ px 200 => [ spanAll "header" ]
        , px 200 => [ span 3 "content", span 1 "sidebar" ]
        , px 200 => [ span 3 "content", span 1 "sidebar" ]
        , px 200 => [ spanAll "footer" ]
        ]
    }
    []
    [ named "header"
        (el Box [] (text "box"))
    , named "sidebar"
        (el Box [] (text "box"))
    ]

note: this example uses rocket(=>) as a synonym for creating a tuple. For more, check out the rocket update package!

Specify a specific position on a normal grid.

Specify a named postion on a namedGrid.

Used to define named areas in a namedGrid.

Used to define named areas in a namedGrid.

A full element will ignore the spacing set for it by the parent, and also grow to cover the parent's padding.

This is mostly useful in text layouts.

An element for adding additional spacing. The Float is the multiple that should be used of the spacing that's being set by the parent.

So, if the parent element is a column that set spacing to 5, and this spacer was a 2. Then it would be a 10 pixel spacer.

Creates a 1 px tall horizontal line.

If you want a horizontal rule that is something more specific, craft it with el!

Turn an element into a link.

link "http://zombo.com"
    <| el MyStyle (text "Welcome to Zombocom")

Changes an element's node to <a> and sets the href. rel properties are set to noopener and noreferrer.

A convenience node for images. Accepts an image src as the first argument.

A simple circle. Provide the radius it should have.

Automatically sets the propery width, height, and corner rounded.

Make a line-break.

You probably want to use paragraph instead. This is only for adjusting where a sentance should break, not for formating paragraphs.

A helper function. This:

when (x == 5) (text "yay, it's 5")

is sugar for

if (x == 5) then
    text "yay, it's 5"
else
    empty

Position an element relative to the window.

Essentially the same as display: fixed

Takes in a Window.Size and returns a device profile which can be used for responsiveness.

Define two ranges that should linearly match up with each other.

Provide a value for the first and receive the calculated value for the second.

fontsize =
    responsive device.width ( 600, 1200 ) ( 16, 20 )

When the device width is between 600 and 1200, set the font-size between 16 and 20 using a linear scale.

An automatically labeled checkbox.

For input elements that are not automatically labeled (checkbox, radio), this will attach a label above the element.

label Label [] (text "check this out") <|
    inputText Style [] "The Value!"

Same as label, but places the label below the input field.

Text input

label LabelStyle [] (text "check this out") <|
    inputText Style [] "The Value!"

Create a list of labeled radio button.

This implies a column layout.

radio "lunch" None []
    [ option "burrito" True (text "A Burrito!")
    , option "taco" False (text "A Taco!")
    ]

A standard html dropdown set of options.

select "favorite-animal" MySelectionStyle []
    [ option "manatee" False (text "Manatees are pretty cool")
    , option "pangolin" False (text "But so are pangolins")
    , option "bee" True (text "Bees")
    ]

Create an Option. Can only be used with radio and select.

Renders Element's into Html, but does not embed a stylesheet.

Embed a stylesheet.

DEPRECATED, will be removed in the next major version

DEPRECATED, will be removed in the next major version

DEPRECATED, will be removed in the next major version