afidegnum / elm-bulmanizer / Bulma.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 Size
    = Small
    | Standard
    | Medium
    | Large


type Width
    = Auto
    | Width1
    | Width2
    | Width3
    | Width4
    | Width5
    | Width6
    | Width7
    | Width8
    | Width9
    | Width10
    | Width11

State


type State
    = Blur
    | Hover
    | Focus
    | Active
    | Loading


type alias IsActive =
Basics.Bool

Color


type Color
    = Default
    | White
    | Light
    | Dark
    | Black
    | Primary
    | Link
    | Info
    | Success
    | Warning
    | Danger

Alignment


type HorizontalAlignment
    = Left
    | Centered
    | Right


type VerticalAlignment
    = Top
    | Bottom

Direction


type VerticalDirection
    = Up
    | Down

Attributes

General

Float

clearfix : Html.Attribute msg

Fixes an element's floating children.

pulledLeft : Html.Attribute msg

Moves an element to the left.

pulledRight : Html.Attribute msg

Moves an element to the right.

Overlay

overlay : Html.Attribute msg

Completely covers the first-positioned parent.

Size

Sizing

fullWidth : Html.Attribute msg

Takes up the whole width (100%).

Spacing

marginless : Html.Attribute msg

Removes all margins.

paddingless : Html.Attribute msg

Removes all paddings.

Selectability

unselectable : Html.Attribute msg

Prevents text from being selectable.

Overflow

clipped : Html.Attribute msg

Adds overflow:hidden.

Style

radiusless : Html.Attribute msg

Removes any radius.

shadowless : Html.Attribute msg

Removes any shadow.

invisible : Html.Attribute msg

Makes it disappear.

screenReaderOnly : Html.Attribute msg

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

Display


type alias Devices a =
{ mobile : a
, tablet : a
, desktop : a
, widescreen : a
, fullHD : a 
}


type Display
    = Block
    | Flex
    | Hidden
    | Inline
    | InlineBlock
    | InlineFlex

display : Display -> Html.Attribute msg

This sets a certain display attributes across all device sizes.

displayByDevice : Devices Display -> Html.Attribute msg

This sets display attributes per-device.

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

Typography

See Bulma.Modifiiers.Typography.