BodyBuilder

This module entirely replaces Html, providing a type-safer alternatives. This also manages inlining styling through Elegant. It is perfectly compatible with Html, though.

Types

Elements Types


type alias Node msg =

Html.Html msg

The main type of BodyBuilder. It is an alias to Html, in order to keep perfect backward compatibility.


type FlexItem msg

[]

The type of the flex items. A flex container contains only specific items. Those are represented by this type. They're generated by the flexItem function, to be used exclusively in flex.


type GridItem msg

[]

The type of the grid items. A grid container contains only specific items. Those are represented by this type. They're generated by the gridItem function, to be used exclusively in grid.


type Option msg

[]

Represents the different options used in select items. They're generated by the option function, exclusively to be used in select.


type alias NodeWithStyle msg =

( BodyBuilder.Node msg, List.List String.String )

NodeWithStyle is allowing BodyBuilder to have Nodes with styles inside them. It is the central type of Bodybuilder, and inside that type resides the key asset of BodyBuilder and Elegant



type alias Document msg =

{ title : String.String, body : BodyBuilder.NodeWithStyle msg }

Document, like in Browser, but for BodyBuilder.


Attributes


type alias BlockAttributes msg =

BodyBuilder.Attributes.HeadingAttributes msg

Represents the attributes for a block element, i.e. an element which can't be anything else other than a block. This includes titles, paragraph, section, nav, article, aside, footer, header and div. This element have to use Style.blockProperties to set style on them.


Elements

Special


text : String.String -> BodyBuilder.NodeWithStyle msg

Puts plain text in the DOM. You can't set any attributes or events on it.


none : BodyBuilder.NodeWithStyle msg

Don't create anything in the DOM. This is useful when you have a conditionnal and are forced to return a Node.

textOrNone : Maybe String -> NodeWithStyle msg
textOrNone value =
    case value of
        Nothing ->
            BodyBuilder.none

        Just content ->
            BodyBuilder.text content

flexItem : Modifiers.Modifiers (BodyBuilder.Attributes.FlexItemAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.FlexItem msg

Generates a flexItem in the DOM. A flexItem is only used inside flex, and can contains the specific styling of the flexChildren.

flexElement : NodeWithStyle msg
flexElement =
    BodyBuilder.flex []
        [ BodyBuilder.flexItem []
            [ Html.text "I'm inside a flex-item!" ]
        ]

gridItem : Modifiers.Modifiers (BodyBuilder.Attributes.GridItemAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.GridItem msg

Generates a gridItem in the DOM. A gridItem is only used inside grid, and can contains the specific styling of the gridChildren.

gridElement : NodeWithStyle msg
gridElement =
    BodyBuilder.grid []
        [ BodyBuilder.gridItem []
            [ Html.text "I'm inside a grid-item!" ]
        ]

option : String.String -> String.String -> Basics.Bool -> BodyBuilder.Option msg

Generates an option in the DOM. An option is only used inside select, and constituted of to String: the value and the content. It can also be selected, or not.

selectElement : NodeWithStyle msg
selectElement =
    BodyBuilder.select []
        [ BodyBuilder.option "Paris" "We're in Paris!" True
        , BodyBuilder.option "London" "We're in London!" False
        , BodyBuilder.option "Berlin" "We're in Berlin!" False
        ]

br : BodyBuilder.NodeWithStyle msg

Puts a br in the DOM. You can't set any attributes or events on it, since you want br to insert a carriage return.


Inline

Those elements are inline by default. However, their behavior can be overrided by using Style.block []. They become block, and behaves like this.


node : Modifiers.Modifiers (BodyBuilder.Attributes.NodeAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an empty inline node in the DOM. A node is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use a node whenever you want, style like you want, it will adapt to what you wrote.

inlineElement : NodeWithStyle msg
inlineElement =
    -- This produces an inline node in the DOM.
    BodyBuilder.node [] []

blockElement : NodeWithStyle msg
blockElement =
    -- This produces a block node in the DOM.
    BodyBuilder.node [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

span : Modifiers.Modifiers (BodyBuilder.Attributes.NodeAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

For backward compatibilty. It behaves like node, but avoids to rewrote all your code when switching to BodyBuilder.


flex : Modifiers.Modifiers (BodyBuilder.Attributes.FlexContainerAttributes msg) -> List.List (BodyBuilder.FlexItem msg) -> BodyBuilder.NodeWithStyle msg

Generates an inline flex in the DOM. A flex is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use a flex whenever you want, style like you want, it will adapt to what you wrote.

inlineFlex : NodeWithStyle msg
inlineFlex =
    -- This produces an inline flex in the DOM.
    BodyBuilder.flex [] []

blockFlex : NodeWithStyle msg
blockFlex =
    -- This produces a block flex in the DOM.
    BodyBuilder.flex [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

grid : Modifiers.Modifiers (BodyBuilder.Attributes.GridContainerAttributes msg) -> List.List (BodyBuilder.GridItem msg) -> BodyBuilder.NodeWithStyle msg

Generates an inline grid in the DOM. A grid is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use a grid whenever you want, style like you want, it will adapt to what you wrote.

inlineGrid : NodeWithStyle msg
inlineGrid =
    -- This produces an inline grid in the DOM.
    BodyBuilder.grid [] []

blockGrid : NodeWithStyle msg
blockGrid =
    -- This produces a block grid in the DOM.
    BodyBuilder.grid [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

a : Modifiers.Modifiers (BodyBuilder.Attributes.AAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates a link in the DOM. A link is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an a whenever you want, style like you want, it will adapt to what you wrote.

inlineLink : NodeWithStyle msg
inlineLink =
    -- This produces an inline a in the DOM.
    BodyBuilder.a [] []

blockLink : NodeWithStyle msg
blockLink =
    -- This produces a block a in the DOM.
    BodyBuilder.a [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

button : Modifiers.Modifiers (BodyBuilder.Attributes.ButtonAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates a button in the DOM. A button is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an button whenever you want, style like you want, it will adapt to what you wrote.

inlineButton : NodeWithStyle msg
inlineButton =
    -- This produces an inline button in the DOM.
    BodyBuilder.button [] []

blockButton : NodeWithStyle msg
blockButton =
    -- This produces a block button in the DOM.
    BodyBuilder.button [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

img : String.String -> String.String -> Modifiers.Modifiers (BodyBuilder.Attributes.ImgAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates an image in the DOM. An image is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an img whenever you want, style like you want, it will adapt to what you wrote.

inlineImage : NodeWithStyle msg
inlineImage =
    -- This produces an inline img in the DOM.
    BodyBuilder.img [] []

blockImage : NodeWithStyle msg
blockImage =
    -- This produces a block img in the DOM.
    BodyBuilder.img [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

audio : Modifiers.Modifiers (BodyBuilder.Attributes.AudioAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates an audio in the DOM. An audio is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an audio whenever you want, style like you want, it will adapt to what you wrote.

inlineAudio : NodeWithStyle msg
inlineAudio =
    -- This produces an inline audio in the DOM.
    BodyBuilder.audio [] []

blockAudio : NodeWithStyle msg
blockAudio =
    -- This produces a block audio in the DOM.
    BodyBuilder.audio [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

inputColor : Modifiers.Modifiers (BodyBuilder.Attributes.InputColorAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a color input in the DOM. A color input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputColor whenever you want, style like you want, it will adapt to what you wrote.

inlineColorInput : NodeWithStyle msg
inlineColorInput =
    -- This produces an inline color input in the DOM.
    BodyBuilder.inputColor []

blockColorInput : NodeWithStyle msg
blockColorInput =
    -- This produces a block color input in the DOM.
    BodyBuilder.inputColor [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputFile : Modifiers.Modifiers (BodyBuilder.Attributes.InputFileAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a file input in the DOM. A file input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputFile whenever you want, style like you want, it will adapt to what you wrote.

inlineFileInput : NodeWithStyle msg
inlineFileInput =
    -- This produces an inline file input in the DOM.
    BodyBuilder.inputFile []

blockFileInput : NodeWithStyle msg
blockFileInput =
    -- This produces a block file input in the DOM.
    BodyBuilder.inputFile [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputHidden : Modifiers.Modifiers BodyBuilder.Attributes.InputHiddenAttributes -> BodyBuilder.NodeWithStyle msg

Generates an hidden input in the DOM. An hidden input is not displayed in the DOM.

hiddenInput : NodeWithStyle msg
hiddenInput =
    -- This produces an hidden input in the DOM.
    BodyBuilder.inputHidden []

inputNumber : Modifiers.Modifiers (BodyBuilder.Attributes.InputNumberAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a number input in the DOM. A number input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputNumber whenever you want, style like you want, it will adapt to what you wrote.

inlineNumberInput : NodeWithStyle msg
inlineNumberInput =
    -- This produces an inline number input in the DOM.
    BodyBuilder.inputNumber []

blockNumberInput : NodeWithStyle msg
blockNumberInput =
    -- This produces a block number input in the DOM.
    BodyBuilder.inputNumber [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputCheckbox : Modifiers.Modifiers (BodyBuilder.Attributes.InputCheckboxAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a checkbox input in the DOM. A checkbox input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputCheckbox whenever you want, style like you want, it will adapt to what you wrote.

inlineCheckboxInput : NodeWithStyle msg
inlineCheckboxInput =
    -- This produces an inline checkbox input in the DOM.
    BodyBuilder.inputCheckbox []

blockCheckboxInput : NodeWithStyle msg
blockCheckboxInput =
    -- This produces a block checkbox input in the DOM.
    BodyBuilder.inputCheckbox [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputPassword : Modifiers.Modifiers (BodyBuilder.Attributes.InputPasswordAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a password input in the DOM. A password input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputPassword whenever you want, style like you want, it will adapt to what you wrote.

inlinePasswordInput : NodeWithStyle msg
inlinePasswordInput =
    -- This produces an inline password input in the DOM.
    BodyBuilder.inputPassword []

blockPasswordInput : NodeWithStyle msg
blockPasswordInput =
    -- This produces a block password input in the DOM.
    BodyBuilder.inputPassword [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputRadio : Modifiers.Modifiers (BodyBuilder.Attributes.InputRadioAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a radio input in the DOM. A radio input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputRadio whenever you want, style like you want, it will adapt to what you wrote.

inlineRadioInput : NodeWithStyle msg
inlineRadioInput =
    -- This produces an inline radio input in the DOM.
    BodyBuilder.inputRadio []

blockRadioInput : NodeWithStyle msg
blockRadioInput =
    -- This produces a block radio input in the DOM.
    BodyBuilder.inputRadio [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputRange : Modifiers.Modifiers (BodyBuilder.Attributes.InputRangeAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a range input in the DOM. A range input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputRange whenever you want, style like you want, it will adapt to what you wrote.

inlineRangeInput : NodeWithStyle msg
inlineRangeInput =
    -- This produces an inline range input in the DOM.
    BodyBuilder.inputRange []

blockRangeInput : NodeWithStyle msg
blockRangeInput =
    -- This produces a block range input in the DOM.
    BodyBuilder.inputRange [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputSubmit : Modifiers.Modifiers (BodyBuilder.Attributes.InputSubmitAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a submit input in the DOM. A submit input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputSubmit whenever you want, style like you want, it will adapt to what you wrote.

inlineSubmitInput : NodeWithStyle msg
inlineSubmitInput =
    -- This produces an inline submit input in the DOM.
    BodyBuilder.inputSubmit []

blockSubmitInput : NodeWithStyle msg
blockSubmitInput =
    -- This produces a block submit input in the DOM.
    BodyBuilder.inputSubmit [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputTel : Modifiers.Modifiers (BodyBuilder.Attributes.InputTextAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a tel input in the DOM. A tel input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputTel whenever you want, style like you want, it will adapt to what you wrote.

inlineTelInput : NodeWithStyle msg
inlineTelInput =
    -- This produces an inline tel input in the DOM.
    BodyBuilder.inputTel []

blockTelInput : NodeWithStyle msg
blockTelInput =
    -- This produces a block tel input in the DOM.
    BodyBuilder.inputTel [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputText : Modifiers.Modifiers (BodyBuilder.Attributes.InputTextAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a text input in the DOM. A text input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputText whenever you want, style like you want, it will adapt to what you wrote.

inlineTextInput : NodeWithStyle msg
inlineTextInput =
    -- This produces an inline text input in the DOM.
    BodyBuilder.inputText [] []

blockTextInput : NodeWithStyle msg
blockTextInput =
    -- This produces a block text input in the DOM.
    BodyBuilder.inputText [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

inputEmail : Modifiers.Modifiers (BodyBuilder.Attributes.InputTextAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a email input in the DOM. A email input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputEmail whenever you want, style like you want, it will adapt to what you wrote.

inlineTextInput : NodeWithStyle msg
inlineTextInput =
    -- This produces an inline text input in the DOM.
    BodyBuilder.inputEmail []

blockTextInput : NodeWithStyle msg
blockTextInput =
    -- This produces a block text input in the DOM.
    BodyBuilder.inputEmail [ BodyBuilder.Attributes.style [ Style.block [] ] ]

inputUrl : Modifiers.Modifiers (BodyBuilder.Attributes.InputUrlAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates an url input in the DOM. An url input is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an inputUrl whenever you want, style like you want, it will adapt to what you wrote.

inlineUrlInput : NodeWithStyle msg
inlineUrlInput =
    -- This produces an inline url input in the DOM.
    BodyBuilder.inputUrl []

blockUrlInput : NodeWithStyle msg
blockUrlInput =
    -- This produces a block url input in the DOM.
    BodyBuilder.inputUrl [ BodyBuilder.Attributes.style [ Style.block [] ] ]

progress : Modifiers.Modifiers (BodyBuilder.Attributes.ProgressAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a progress in the DOM. A progress is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an progress whenever you want, style like you want, it will adapt to what you wrote.

inlineProgress : NodeWithStyle msg
inlineProgress =
    -- This produces an inline progress in the DOM.
    BodyBuilder.progress [] []

blockProgress : NodeWithStyle msg
blockProgress =
    -- This produces a block progress in the DOM.
    BodyBuilder.progress [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

select : Modifiers.Modifiers (BodyBuilder.Attributes.SelectAttributes msg) -> List.List (BodyBuilder.Option msg) -> BodyBuilder.NodeWithStyle msg

Generates a select in the DOM. A select is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use a select whenever you want, style like you want, it will adapt to what you wrote.

inlineSelect : NodeWithStyle msg
inlineSelect =
    -- This produces an inline select in the DOM.
    BodyBuilder.select [] []

blockSelect : NodeWithStyle msg
blockSelect =
    -- This produces a block select in the DOM.
    BodyBuilder.select [ BodyBuilder.Attributes.style [ Style.block [] ] ] []

textarea : Modifiers.Modifiers (BodyBuilder.Attributes.TextareaAttributes msg) -> BodyBuilder.NodeWithStyle msg

Generates a textarea in the DOM. A textarea is inline by default, but changes its behavior when specifically set as block. You don't have to worry about the display: use an textarea whenever you want, style like you want, it will adapt to what you wrote.

inlineTextarea : NodeWithStyle msg
inlineTextarea =
    -- This produces an inline textarea in the DOM.
    BodyBuilder.textarea []

blockTextarea : NodeWithStyle msg
blockTextarea =
    -- This produces a block textarea in the DOM.
    BodyBuilder.textarea [ BodyBuilder.Attributes.style [ Style.block [] ] ]

Block

Those elements are block by default. Their behavior can't be overrided. It is possible to style those elements using Style.blockProperties.


div : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

For backward compatibilty. It behaves like div in Html.


header : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates the corresponding header in the DOM. This is used mainly to respect the HTML semantic and for accessibility.


footer : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates the corresponding footer in the DOM. This is used mainly to respect the HTML semantic and for accessibility.


nav : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates the corresponding nav in the DOM. This is used mainly to respect the HTML semantic and for accessibility.


section : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates the corresponding section in the DOM. This is used mainly to respect the HTML semantic and for accessibility.


article : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates the corresponding article in the DOM. This is used mainly to respect the HTML semantic and for accessibility.


aside : Modifiers.Modifiers (BodyBuilder.BlockAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates the corresponding aside in the DOM. This is used mainly to respect the HTML semantic and for accessibility.


h1 : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an h1 in the DOM. An h1 is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.h1
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a title!" ]

h2 : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an h2 in the DOM. An h2 is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.h2
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a title!" ]

h3 : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an h3 in the DOM. An h3 is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.h3
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a title!" ]

h4 : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an h4 in the DOM. An h4 is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.h4
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a title!" ]

h5 : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an h5 in the DOM. An h5 is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.h5
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a title!" ]

h6 : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates an h6 in the DOM. An h6 is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.h6
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a title!" ]

p : Modifiers.Modifiers (BodyBuilder.Attributes.HeadingAttributes msg) -> List.List (BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg

Generates a p in the DOM. A p is block, and can't be anything else. You can add custom block style on it, but can't turn it inline.

title : NodeWithStyle msg
title =
    BodyBuilder.p
        [ BodyBuilder.Attributes.style [ Style.blockProperties [] ] ]
        [ Html.text "I'm inside a paragrah!" ]

Programs


element : { init : flags -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), view : model -> BodyBuilder.NodeWithStyle msg } -> Platform.Program flags model msg

Creates a program, like you could with Html. This allows you to completely overrides Html to focus on BodyBuilder.



sandbox : { init : model, view : model -> BodyBuilder.NodeWithStyle msg, update : msg -> model -> model } -> Platform.Program () model msg

Creates a sandbox program exactly like VirtualDom.



staticPage : BodyBuilder.NodeWithStyle msg -> Platform.Program () () msg

Creates a static page in HTML.



application : { init : flags -> Url.Url -> Browser.Navigation.Key -> ( model, Platform.Cmd.Cmd msg ), view : model -> BodyBuilder.Document msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, onUrlRequest : Browser.UrlRequest -> msg, onUrlChange : Url.Url -> msg } -> Platform.Program flags model msg

Creates a program, like you could with Html.



document : { init : flags -> ( model, Platform.Cmd.Cmd msg ), view : model -> BodyBuilder.Document msg, update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg } -> Platform.Program flags model msg

Creates a progarm, like Html.


Lazy


lazy : (a -> BodyBuilder.NodeWithStyle msg) -> a -> BodyBuilder.NodeWithStyle msg

Allows app developers to use the power of easy directly inside athlete programs



lazy2 : (a -> b -> BodyBuilder.NodeWithStyle msg) -> a -> b -> BodyBuilder.NodeWithStyle msg

Same as lazy, but with 2 arguments



lazy3 : (a -> b -> c -> BodyBuilder.NodeWithStyle msg) -> a -> b -> c -> BodyBuilder.NodeWithStyle msg

Same as lazy, but with 3 arguments



lazy4 : (a -> b -> c -> d -> BodyBuilder.NodeWithStyle msg) -> a -> b -> c -> d -> BodyBuilder.NodeWithStyle msg

Same as lazy, but with 4 arguments



lazy5 : (a -> b -> c -> d -> e -> BodyBuilder.NodeWithStyle msg) -> a -> b -> c -> d -> e -> BodyBuilder.NodeWithStyle msg

Same as lazy, but with 5 arguments



stylise : (a -> BodyBuilder.NodeWithStyle msg) -> a -> BodyBuilder.Node msg

resulting html of a parameterized athlete structure



stylise2 : (a -> b -> BodyBuilder.NodeWithStyle msg) -> a -> b -> BodyBuilder.Node msg

resulting html of a parameterized athlete structure (with two arguments)



stylise3 : (a -> b -> c -> BodyBuilder.NodeWithStyle msg) -> a -> b -> c -> BodyBuilder.Node msg

resulting html of a parameterized athlete structure (with three arguments)



stylise4 : (a -> b -> c -> d -> BodyBuilder.NodeWithStyle msg) -> a -> b -> c -> d -> BodyBuilder.Node msg

resulting html of a parameterized athlete structure (with four arguments)



stylise5 : (a -> b -> c -> d -> e -> BodyBuilder.NodeWithStyle msg) -> a -> b -> c -> d -> e -> BodyBuilder.Node msg

resulting html of a parameterized athlete structure (with five arguments)