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:
navbar
hero
section
footer
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." ]
]
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 [] []
]
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
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
Html.Styled.Html msg
media : List (Html.Styled.Attribute msg) -> List (MediaPartition msg) -> Media msg
myMediaObject : Html msg
myMediaObject =
media []
[ mediaLeft [] []
, mediaContent [] []
, mediaRight [] []
]
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
Html.Styled.Html msg
{ 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 [] []
}
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
Html.Styled.Html msg
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
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."
]
]
]
]
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!"
]
]
]
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!