MichaelCombs28 / elm-css-bulma / Bulma.Styled.Layout

Table of Contents

Container


type alias Container msg =
Html.Styled.Html msg

container : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Container msg

A simple container to center your content horizontally.

myContainer : Html msg
myContainer =
    container []
        [ p []
            [ text "My container is centered on a desktop!"
            ]
        ]

Containers can be used in any context, but mostly as a direct child of:

fluidContainer : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Container msg

If you don't want to have a maximum width, but want to keep the 24px margin on the left and right sides, fluidContainer is for you!

myFluidContainer : Html msg
myFluidContainer
  = container []
    [ p []
      [ text "My container will have a 24px gap on its left and right."
      ]
    [ p []
      [ text "This gap holds for all viewport sizes."
      ]
    ]

widescreenContainer : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Container msg

This container is full-width until the "widescreen" breakpoint.

myWidescreenContainer : Html msg
myWidescreenContainer =
    widescreenContainer []
        [ p [] [ text "This container fills the screen-width..." ]
        , p [] [ text "...until it hits the widescreen breakpoint." ]
        ]

fullHDContainer : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Container msg

This container is full-width until the "fullHD" breakpoint.

fullHDContainer : Html msg
fullHDContainer =
    widescreenContainer []
        [ p [] [ text "This container fills the screen-width..." ]
        , p [] [ text "...until it hits the fullHD breakpoint." ]
        ]

Level


type alias Level msg =
Html.Styled.Html msg

level : List (Html.Styled.Attribute msg) -> List (LevelPartition msg) -> Level msg

myLevel : Html msg
myLevel =
    level []
        [ levelLeft []
            [ levelItem [] []
            , levelItem [] []
            , levelItem [] []
            ]
        , levelRight []
            [ levelItem [] []
            , levelItem [] []
            , levelItem [] []
            ]
        ]

horizontalLevel : List (Html.Styled.Attribute msg) -> List (LevelPartition msg) -> Level msg

centeredLevel : List (Html.Styled.Attribute msg) -> List (LevelItem msg) -> Level msg

myLevel : Html msg
myLevel =
    centeredLevel []
        [ levelItem [] []
        , levelItem [] []
        , levelItem [] []
        ]

Level Partition


type alias LevelPartition msg =
Html.Styled.Html msg

levelLeft : List (Html.Styled.Attribute msg) -> List (LevelItem msg) -> LevelPartition msg

levelRight : List (Html.Styled.Attribute msg) -> List (LevelItem msg) -> LevelPartition msg

Level Item


type alias LevelItem msg =
Html.Styled.Html msg

levelItem : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> LevelItem msg

levelItemLink : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> LevelItem msg

levelItemText : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> LevelItem msg

easyLevelItemWithHeading : List (Html.Styled.Attribute msg) -> String -> String -> LevelItem msg

Media Object


type alias Media msg =
Html.Styled.Html msg

media : List (Html.Styled.Attribute msg) -> List (MediaPartition msg) -> Media msg

myMediaObject : Html msg
myMediaObject =
    media []
        [ mediaLeft [] []
        , mediaContent [] []
        , mediaRight [] []
        ]

Media Object Partition


type alias MediaPartition msg =
Html.Styled.Html msg

mediaContent : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MediaPartition msg

mediaLeft : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MediaPartition msg

mediaRight : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MediaPartition msg

Hero


type alias Hero msg =
Html.Styled.Html msg


type alias HeroModifiers =
{ bold : Basics.Bool
, size : Bulma.Styled.Modifiers.Internal.Size
, color : Bulma.Styled.Modifiers.Internal.Color 
}

heroModifiers : HeroModifiers

These are the stylistic defaults for hero containers.

import B.Modifiers
    exposing
        ( Color(Default)
        , Size(Standard)
        )


-- Small    -> "is-small"
-- Standard -> "is-medium"
-- Medium   -> "is-large"
-- Large    -> "is-fullheight"
myHeroModifiers : HeroModifiers
myHeroModifiers =
    { bold = False
    , size = Large
    , color = Default
    }

hero : HeroModifiers -> List (Html.Styled.Attribute msg) -> List (HeroPartition msg) -> Hero msg

An imposing Hero banner to showcase something.

import B.Elements exposing (TitleSize(H1, H2), title)
import B.Layout exposing (container, hero, heroBody)

myHero : Html msg
myHero =
    hero myHeroModifiers
        []
        [ heroBody []
            [ container []
                [ title H1 [] [ text "Hero Title" ]
                , title H2 [] [ text "Hero Subtitle" ]
                ]
            ]
        ]

easyHero : HeroModifiers -> List (Html.Styled.Attribute msg) -> { head : HeroPartition msg, body : HeroPartition msg, foot : HeroPartition msg } -> Hero msg

The hero element with some added guard-rails.

myHero : Html msg
myHero =
    easyHero myHeroModifiers
        []
        { head = heroHead [] []
        , body = heroBody [] []
        , foot = heroFoot [] []
        }

Hero Partition


type alias HeroPartition msg =
Html.Styled.Html msg

heroBody : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> HeroPartition msg

heroFoot : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> HeroPartition msg

heroHead : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> HeroPartition msg

Section


type alias Section msg =
Html.Styled.Html msg


type SectionSpacing

section : SectionSpacing -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Section msg

Use sections as direct children of your top HTML element.

view : Model -> Html msg
view model =
    div []
        [ section NotSpaced
            []
            [ container []
                [ p [] [ text "Containers for your containers!" ]
                ]
            ]
        ]

notSpaced : SectionSpacing

spaced : SectionSpacing

verySpaced : SectionSpacing

Footer


type alias Footer msg =
Html.Styled.Html msg

footer : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Footer msg

A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.

myFooter : Html msg
myFooter =
    footer []
        [ container []
            [ content [ textCentered ]
                [ p []
                    [ text "Ask your doctor if Bulma is right for you."
                    ]
                ]
            ]
        ]

Tile

Learn more about tiled grids in the official docs.

myGrid : Html msg
myGrid =
    tileAncestor Auto
        []
        [ verticalTile Width8
            []
            [ tile Auto
                []
                [ verticalTileParent Auto
                    []
                    [ tileChild Auto
                        []
                        [ text "I'm in the top-left corner!"
                        ]
                    , [ text "I'm on the middle-left edge!"
                      ]
                    ]
                , tileParent Auto
                    []
                    [ text "I'm a tile touching the top-middle edge!"
                    ]
                ]
            , tileParent Auto
                []
                [ tileChild Auto
                    []
                    [ text "I'm taking up the bottom-left half of the grid!"
                    ]
                ]
            ]
        , tileParent Auto
            []
            [ tileChild Auto
                []
                [ text "I'm a tall column taking up the entire right edge!"
                ]
            ]
        ]


type alias Tile msg =
Html.Styled.Html msg

tile : Bulma.Styled.Modifiers.Internal.Width -> List (Html.Styled.Attribute msg) -> List (Tile msg) -> Tile msg

This element is a plain tile container. It's best used as an intermediate tile in a 2D grid. You can also add "is-ancestor", "is-parent", "is-child", and "is-vertical" classes to to make a custom Bulma-grid implementation.

tileAncestor : Bulma.Styled.Modifiers.Internal.Width -> List (Html.Styled.Attribute msg) -> List (Tile msg) -> Html.Styled.Html msg

This should always be your outer-most tile.

myGrid : Html msg
myGrid =
    tileAncestor Auto
        []
        [ tileParent Width8
            []
            [ tileChild Auto [] []
            , tileChild Auto [] []
            ]
        , verticalTileParent Width4
            []
            [ tileChild Auto [] []
            , tileChild Auto [] []
            ]
        ]

tileParent : Bulma.Styled.Modifiers.Internal.Width -> List (Html.Styled.Attribute msg) -> List (Tile msg) -> Tile msg

Your tile-children must always be accompanied by a parent!

tileChild : Bulma.Styled.Modifiers.Internal.Width -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Tile msg

This tile holds your content! Its parent should always be tileParent or verticalTileParent.

verticalTile : Bulma.Styled.Modifiers.Internal.Width -> List (Html.Styled.Attribute msg) -> List (Tile msg) -> Tile msg

If you want to stack tiles vertically, use a vertical tile!

verticalTileParent : Bulma.Styled.Modifiers.Internal.Width -> List (Html.Styled.Attribute msg) -> List (Tile msg) -> Tile msg

Your tile-children must always be accompanied by a parent!