MichaelCombs28/elm-css-bulma/1.0.0

Bulma.Styled.Modifiers

Most Bulma elements have alternative styles. These types will come in handy for various modifiers records throughout this library. Also included are a set of helpers for style, layout.

Table of Contents

Types

Size

type alias Size =
Size
small : Size
standard : Size
medium : Size
large : Size
type alias Width =
Width
auto : Width
width1 : Width
width2 : Width
width3 : Width
width4 : Width
width5 : Width
width6 : Width
width7 : Width
width8 : Width
width9 : Width
width10 : Width
width11 : Width

State

type alias State =
State
blur : State
hover : State
focus : State
active : State
loading : State
type alias IsActive =
IsActive

Color

type alias Color =
Color
default : Color
white : Color
light : Color
dark : Color
black : Color
primary : Color
info : Color
success : Color
warning : Color
danger : Color

Alignment

type alias HorizontalAlignment =
HorizontalAlignment
left : HorizontalAlignment
centered : HorizontalAlignment
type alias VerticalAlignment =
VerticalAlignment
top : VerticalAlignment
bottom : VerticalAlignment
verticallyCentered : VerticalAlignment

Direction

type alias VerticalDirection =
VerticalDirection
up : VerticalDirection
down : VerticalDirection

Attributes

General

Float

clearfix : Attribute msg

Fixes an element's floating children.

pulledLeft : Attribute msg

Moves an element to the left.

pulledRight : Attribute msg

Moves an element to the right.

Overlay

overlay : Attribute msg

Completely covers the first-positioned parent.

Size

Sizing

fullWidth : Attribute msg

Takes up the whole width (100%).

Spacing

marginless : Attribute msg

Removes all margins.

paddingless : Attribute msg

Removes all paddings.

Selectability

unselectable : Attribute msg

Prevents text from being selectable.

Overflow

clipped : Attribute msg

Adds overflow:hidden.

Style

radiusless : Attribute msg

Removes any radius.

shadowless : Attribute msg

Removes any shadow.

invisible : Attribute msg

Makes it disappear.

screenReaderOnly : Attribute msg

Hides element visually, but keeps the element available to be announced by a screen reader.

Display

type alias Devices a =
Devices a
type alias Display =
Display
block : Display
flex : Display
hidden : Display
inline : Display
inlineBlock : Display
inlineFlex : Display
display : Display -> Attribute msg

This sets a certain display attributes across all device sizes.

displayByDevice : Devices Display -> Attribute msg

This sets display attributes per-device.

tabletOnly =
    displayByDevice
        { mobile = Hidden
        , tablet = Block
        , desktop = Hidden
        , widescreen = Hidden
        , fullHD = Hidden
        }