MichaelCombs28 / elm-css-bulma / Bulma.Styled.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.Styled.Attribute msg

Transforms the first character to each word to uppercase.

uppercase : Html.Styled.Attribute msg

Transforms all characters to uppercase.

lowercase : Html.Styled.Attribute msg

Transforms all characters to lowercase.

italicize : Html.Styled.Attribute msg

Italicizes text.

Size


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

largest : Size

evenLarger : Size

larger : Size

large : Size

medium : Size

standard : Size

small : Size

textSize : Size -> Html.Styled.Attribute msg

There are 7 font sizes to choose from:

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

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

Weight


type Weight
    = Light
    | Normal
    | Semibold
    | Bold

light : Weight

normal : Weight

semibold : Weight

bold : Weight

textWeight : Weight -> Html.Styled.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

black : Color

blackLight : Color

blackLighter : Color

greyDarker : Color

greyDark : Color

grey : Color

greyLight : Color

greyLighter : Color

whiteDarker : Color

whiteDark : Color

white : Color

primary : Color

info : Color

success : Color

warning : Color

danger : Color

textColor : Color -> Html.Styled.Attribute msg

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

Alignment

textLeft : Html.Styled.Attribute msg

Aligns text to the left.

textCentered : Html.Styled.Attribute msg

Centers text.

textRight : Html.Styled.Attribute msg

Aligns text to the right.

textJustified : Html.Styled.Attribute msg

Justifies text.

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

Aligns text.

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

Aligns text based on a device's viewport width.