surprisetalk / elm-bulma / Bulma.Modifiers.Typography

This module includes all the modifiers that apply exclusively to text! It's really handy have attributes like textCentered and Text.danger to throw at all your Html elements.

Transformations

capitalize : Html.Attribute msg

Transforms the first character to each word to uppercase.

uppercase : Html.Attribute msg

Transforms all characters to uppercase.

lowercase : Html.Attribute msg

Transforms all characters to lowercase.

italicize : Html.Attribute msg

Italicizes text.

Size


type Size
    = Largest
    | EvenLarger
    | Larger
    | Large
    | Medium
    | Standard
    | Small

textSize : Size -> Html.Attribute msg

There are 7 font sizes to choose from: - textSize Largest: 3.00rem - textSize EvenLarger: 2.50rem - textSize Larger: 2.00rem - textSize Large: 1.50rem - textSize Medium: 1.25rem - textSize Standard: 1.00rem - textSize Small: 0.75rem

textSizeByDevice : Bulma.Modifiers.Devices Size -> Html.Attribute msg

You can choose a font specific size for each viewport width.

Weight


type Weight
    = Light
    | Normal
    | Semibold
    | Bold

textWeight : Weight -> Html.Attribute msg

You can set any text to one of four font-weights.

Colors


type Color
    = Black
    | BlackLight
    | BlackLighter
    | GreyDarker
    | GreyDark
    | Grey
    | GreyLight
    | GreyLighter
    | WhiteDarker
    | WhiteDark
    | White
    | Primary
    | Info
    | Success
    | Warning
    | Danger

textColor : Color -> Html.Attribute msg

You can set any text to one of the 5 colors or 11 shades of grey.

Alignment

textLeft : Html.Attribute msg

Aligns text to the left.

textCentered : Html.Attribute msg

Centers text.

textRight : Html.Attribute msg

Aligns text to the right.

textJustified : Html.Attribute msg

Justifies text.

textAlignment : Bulma.Modifiers.HorizontalAlignment -> Html.Attribute msg

Aligns text.

textAlignmentByDevice : Bulma.Modifiers.Devices Bulma.Modifiers.HorizontalAlignment -> Html.Attribute msg

Aligns text based on a device's viewport width.