afidegnum/elm-bulmanizer/1.0.0

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 =
Bool

Color

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

Alignment

= Left
| Centered
| Right
= Top
| Bottom

Direction

= Up
| Down

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 =
{ mobile : a
, tablet : a
, desktop : a
, widescreen : a
, fullHD : a
}
type Display
= Block
| Flex
| Hidden
| Inline
| InlineBlock
| InlineFlex
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
    }