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:

• navbar
• hero
• section
• footer

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."
      ]
    ]

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." ]
    ]

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." ]
    ]

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

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

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

These are the stylistic defaults for hero containers.

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


-- Small    -> "is-small"
-- Standard -> "is-medium"
-- Medium   -> "is-large"
-- Large    -> "is-fullheight"


myHeroModifiers : HeroModifiers
myHeroModifiers
  = { bold  = False
    , size  = Large
    , color = Default
    }

An imposing Hero banner to showcase something.

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


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

The hero element with some added guard-rails.

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

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!" ]
        ]
      ]
    ]

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."
          ]
        ]
      ]
    ]

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.

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 [] []
      ]
    ]

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

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

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

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