http://bulma.io/documentation/modifiers/syntax/
Simple headings to add depth to your page.
Text styling classes:
bulma.heading.title --> "title"
bulma.heading.subtitle --> "subtitle"
Size modifiers:
bulma.heading.size.is1 --> "is-1"
bulma.heading.size.is2 --> "is-2"
bulma.heading.size.is3 --> "is-3"
bulma.heading.size.is4 --> "is-4"
bulma.heading.size.is5 --> "is-5"
bulma.heading.size.is6 --> "is-6"
Maintain normal spacing between title and subtitle:
bulma.heading.spacing.isNormal --> "is-spaced"
Docs: http://bulma.io/documentation/elements/title/
A single class to handle WYSIWYG generated content, where only HTML tags are available.
Content wrapper:
bulma.content.container --> "content"
Size modifiers:
bulma.content.size.isSmall --> "is-small"
bulma.content.size.isMedium --> "is-medium"
bulma.content.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/content/
A container for responsive images.
Image wrapper:
bulma.image.container --> "image"
Size modifiers:
bulma.image.size.is16x16 --> "is-16x16"
bulma.image.size.is24x24 --> "is-24x24"
bulma.image.size.is32x32 --> "is-32x32"
bulma.image.size.is48x48 --> "is-48x48"
bulma.image.size.is64x64 --> "is-64x64"
bulma.image.size.is96x96 --> "is-96x96"
bulma.image.size.is128x128 --> "is-128x128"
bulma.image.size.isSquare --> "is-square"
bulma.image.size.is1by1 --> "is-1by1"
bulma.image.size.is4by3 --> "is-4by3"
bulma.image.size.is3by2 --> "is-3by2"
bulma.image.size.is16by9 --> "is-16by9"
bulma.image.size.is2by1 --> "is-2by1"
Docs: http://bulma.io/documentation/elements/image/
The classic button, in different colors, sizes, and states.
Button UI element:
bulma.button.ui --> "button"
Style modifiers:
bulma.button.style.isLink --> "is-link"
bulma.button.style.isOutlined --> "is-outlined"
bulma.button.style.isInverted --> "is-inverted"
bulma.button.style.isStatic --> "is-static"
Size modifiers:
bulma.button.size.isSmall --> "is-small"
bulma.button.size.isMedium --> "is-medium"
bulma.button.size.isLarge --> "is-large"
State modifiers:
bulma.button.state.isHovered --> "is-hovered"
bulma.button.state.isFocused --> "is-focused"
bulma.button.state.isActive --> "is-active"
bulma.button.state.isLoading --> "is-loading"
Color modifiers:
bulma.button.color.isPrimary --> "is-primary"
bulma.button.color.isInfo --> "is-info"
bulma.button.color.isSuccess --> "is-success"
bulma.button.color.isWarning --> "is-warning"
bulma.button.color.isDanger --> "is-danger"
bulma.button.color.isWhite --> "is-white"
bulma.button.color.isLight --> "is-light"
bulma.button.color.isDark --> "is-dark"
bulma.button.color.isBlack --> "is-black"
Addon button modifier:
bulma.button.addon.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/button/
A versatile delete cross.
Delete UI element:
bulma.delete.ui --> "delete"
Size modifiers:
bulma.delete.size.isSmall --> "is-small"
bulma.delete.size.isMedium --> "is-medium"
bulma.delete.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/delete/
Input UI element:
bulma.input.ui --> "input"
Display modifier:
bulma.input.display.isInline --> "is-inline"
Size modifiers:
bulma.input.size.isSmall --> "is-small"
bulma.input.size.isMedium --> "is-medium"
bulma.input.size.isLarge --> "is-large"
State modifiers:
bulma.input.state.isHovered --> "is-hovered"
bulma.input.state.isFocused --> "is-focused"
bulma.input.state.isActive --> "is-active"
bulma.input.state.isLoading --> "is-loading"
Color modifiers:
bulma.input.color.isPrimary --> "is-primary"
bulma.input.color.isInfo --> "is-info"
bulma.input.color.isSuccess --> "is-success"
bulma.input.color.isWarning --> "is-warning"
bulma.input.color.isDanger --> "is-danger"
bulma.input.color.isWhite --> "is-white"
bulma.input.color.isLight --> "is-light"
bulma.input.color.isDark --> "is-dark"
bulma.input.color.isBlack --> "is-black"
Addon input modifier:
bulma.input.addon.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/form/
Textarea UI element:
bulma.textarea.ui --> "textarea"
Display modifier:
bulma.textarea.display.isInline --> "is-inline"
Size modifiers:
bulma.textarea.size.isSmall --> "is-small"
bulma.textarea.size.isMedium --> "is-medium"
bulma.textarea.size.isLarge --> "is-large"
State modifiers:
bulma.textarea.state.isHovered --> "is-hovered"
bulma.textarea.state.isFocused --> "is-focused"
bulma.textarea.state.isActive --> "is-active"
bulma.textarea.state.isLoading --> "is-loading"
Color modifiers:
bulma.textarea.color.isPrimary --> "is-primary"
bulma.textarea.color.isInfo --> "is-info"
bulma.textarea.color.isSuccess --> "is-success"
bulma.textarea.color.isWarning --> "is-warning"
bulma.textarea.color.isDanger --> "is-danger"
bulma.textarea.color.isWhite --> "is-white"
bulma.textarea.color.isLight --> "is-light"
bulma.textarea.color.isDark --> "is-dark"
bulma.textarea.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/form/
Checkbox UI element:
bulma.checkbox.ui --> "checkbox"
Docs: http://bulma.io/documentation/elements/form/
Radio UI element:
bulma.radio.ui --> "radio"
Docs: http://bulma.io/documentation/elements/form/
Select UI element:
bulma.select.ui --> "select"
Size modifiers:
bulma.select.size.isSmall --> "is-small"
bulma.select.size.isMedium --> "is-medium"
bulma.select.size.isLarge --> "is-large"
State modifiers:
bulma.select.state.isHovered --> "is-hovered"
bulma.select.state.isFocused --> "is-focused"
bulma.select.state.isActive --> "is-active"
bulma.select.state.isLoading --> "is-loading"
bulma.select.state.isDisabled --> "is-disabled"
Addon select modifier:
bulma.select.addon.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/form/
A wrapper for a control and its label, or for a control group.
Field wrapper:
bulma.field.container --> "field"
Field label:
bulma.field.label --> "field-label"
Grouping buttons or form elements:
bulma.field.isGrouped.left --> "is-grouped"
bulma.field.isGrouped.centered --> "is-grouped is-grouped-centered"
bulma.field.isGrouped.right --> "is-grouped is-grouped-right"
Attaching buttons or form elements inline:
bulma.field.hasAddons.left --> "has-addons"
bulma.field.hasAddons.centered --> "has-addons has-addons-centered"
bulma.field.hasAddons.right --> "has-addons has-addons-right"
Layout modifier:
bulma.field.layout.isHorizontal --> "is-horizontal"
Docs: http://bulma.io/documentation/elements/form/
A wrapper for input, select, and textarea elements to maintain consistent spacing. Supports use of icons as visual cues in input fields.
Control wrapper:
bulma.control.container --> "control"
Displaying an icon inside a child input field:
bulma.control.hasIcons.left --> "has-icons-left"
bulma.control.hasIcons.right --> "has-icons-right"
State modifier:
bulma.control.state.isLoading --> "is-loading"
Sizing modifier for a grouped control:
bulma.control.sizing.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/form/
UI element label:
bulma.label.ui --> "label"
Size modifiers:
bulma.label.size.isSmall --> "is-small"
bulma.label.size.isMedium --> "is-medium"
bulma.label.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/form/
UI element help text:
bulma.help.ui --> "help"
Color modifiers:
bulma.help.color.isPrimary --> "is-primary"
bulma.help.color.isInfo --> "is-info"
bulma.help.color.isSuccess --> "is-success"
bulma.help.color.isWarning --> "is-warning"
bulma.help.color.isDanger --> "is-danger"
bulma.help.color.isWhite --> "is-white"
bulma.help.color.isLight --> "is-light"
bulma.help.color.isDark --> "is-dark"
bulma.help.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/form/
A wrapper for Font Awesome icons.
Icon wrapper:
bulma.icon.container --> "icon"
Size modifiers:
bulma.icon.size.isSmall --> "is-small"
bulma.icon.size.isMedium --> "is-medium"
bulma.icon.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/icon/
Special formatting for numerical output
Number UI element:
bulma.number.ui --> "number"
Small tag labels to insert anywhere.
Tag UI element:
bulma.tag.ui --> "tag"
Size modifiers:
bulma.tag.size.isMedium --> "is-medium"
bulma.tag.size.isLarge --> "is-large"
Color modifiers:
bulma.tag.color.isPrimary --> "is-primary"
bulma.tag.color.isInfo --> "is-info"
bulma.tag.color.isSuccess --> "is-success"
bulma.tag.color.isWarning --> "is-warning"
bulma.tag.color.isDanger --> "is-danger"
bulma.tag.color.isWhite --> "is-white"
bulma.tag.color.isLight --> "is-light"
bulma.tag.color.isDark --> "is-dark"
bulma.tag.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/tag/
Bold notification blocks, to alert your users of something.
Notification UI element:
bulma.notification.ui --> "notification"
Color modifiers:
bulma.notification.color.isPrimary --> "is-primary"
bulma.notification.color.isInfo --> "is-info"
bulma.notification.color.isSuccess --> "is-success"
bulma.notification.color.isWarning --> "is-warning"
bulma.notification.color.isDanger --> "is-danger"
bulma.notification.color.isWhite --> "is-white"
bulma.notification.color.isLight --> "is-light"
bulma.notification.color.isDark --> "is-dark"
bulma.notification.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/notification/
Native HTML progress bars.
Progress UI element:
bulma.progress.ui --> "progress"
Size modifiers:
bulma.progress.size.isSmall --> "is-small"
bulma.progress.size.isMedium --> "is-medium"
bulma.progress.size.isLarge --> "is-large"
Color modifiers:
bulma.progress.color.isPrimary --> "is-primary"
bulma.progress.color.isInfo --> "is-info"
bulma.progress.color.isSuccess --> "is-success"
bulma.progress.color.isWarning --> "is-warning"
bulma.progress.color.isDanger --> "is-danger"
bulma.progress.color.isWhite --> "is-white"
bulma.progress.color.isLight --> "is-light"
bulma.progress.color.isDark --> "is-dark"
bulma.progress.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/progress/
A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo.
Nav container:
bulma.nav.container --> "nav"
Nav partitions:
bulma.nav.left --> "nav-left"
bulma.nav.center --> "nav-center"
bulma.nav.right --> "nav-right"
Nav responsive components:
bulma.nav.toggle.ui --> "nav-toggle"
-- State modifier (toggle)
bulma.nav.toggle.state.isActive --> "is-active"
bulma.nav.menu.container --> "nav-menu"
-- State modifier (menu)
bulma.nav.menu.state.isActive --> "is-active"
Nav items:
bulma.nav.item.container --> "nav-item"
-- Style modifier
bulma.nav.item.style.isTab --> "is-tab"
-- State modifier
bulma.nav.item.state.isActive --> "is-active"
Style modifier (container):
bulma.nav.style.hasShadow --> "hasShadow"
Docs: http://bulma.io/documentation/components/nav/
A multi-purpose horizontal level, which can contain almost any other element.*
Level container:
bulma.level.container --> "level"
Level partitions:
bulma.level.left --> "level-left"
bulma.level.right --> "level-right"
Level items:
bulma.level.item --> "level-item"
Responsive modifier (level container):
bulma.level.mobile.isHorizontal --> "is-mobile"
Docs: http://bulma.io/documentation/components/level/
A simple menu, for any type of vertical navigation.
Menu container:
bulma.menu.container --> "menu"
Element class for menu labels:
bulma.menu.label --> "menu-label"
Element class for list of menu options (apply to ul
element):
bulma.menu.list --> "menu-list"
Docs: http://bulma.io/documentation/components/menu/
Simple responsive horizontal navigation tabs, with different styles.
Tabs container:
bulma.tabs.container --> "tabs"
Tab state modifier:
bulma.tabs.tab.state.isActive --> "is-active"
Style modifiers:
bulma.tabs.style.isBoxed --> "is-boxed"
bulma.tabs.style.isToggle --> "is-toggle"
Alignment modifier:
bulma.tabs.alignment.isCentered --> "is-centered"
bulma.tabs.alignment.isRight --> "is-right"
Size modifiers:
bulma.tabs.size.isSmall --> "is-small"
bulma.tabs.size.isMedium --> "is-medium"
bulma.tabs.size.isLarge --> "is-large"
bulma.tabs.size.isFullWidth --> "is-fullwidth"
Docs: http://bulma.io/documentation/components/tabs/
A composable panel, for compact controls.
Panel container:
bulma.panel.container --> "panel"
Panel subcomponents:
bulma.panel.heading --> "panel-heading"
--Tab subcomponent
bulma.panel.tabs.container --> "panel-tabs"
bulma.panel.tabs.tab.state.isActive --> "is-active"
--Block subcomponent
bulma.panel.block.container --> "panel-block"
bulma.panel.block.icon --> "panel-icon"
bulma.panel.block.list --> "panel-list"
bulma.panel.block.state.isActive --> "is-active"
Docs: http://bulma.io/documentation/components/panel/
A responsive, usable, and flexible pagination.
Pagination container:
bulma.pagination.container --> "pagination"
Element classes for navigation buttons:
bulma.pagination.previous --> "pagination-previous"
bulma.pagination.next --> "pagination-next"
Element classes and modifiers for pagination list:
bulma.pagination.list.container --> "pagination-list"
bulma.pagination.list.link.ui --> "pagination-link"
bulma.pagination.list.link.state.isCurrent --> "is-current"
bulma.pagination.list.ellipsis --> "pagination-ellipsis"
Position modifiers for pagination list (pagination container):
bulma.pagination.position.isCentered --> "is-centered"
bulma.pagination.position.isRight --> "is-right"
Docs: http://bulma.io/documentation/components/pagination/
The box element is simply a container with a shadow, a border, a radius, and some padding.
Box container:
bulma.box.container --> "box"
Docs: http://bulma.io/documentation/bulma.propertiess/box/
An all-around flexible and composable component.
Card container:
bulma.card.container --> "card"
Card subcomponents:
bulma.card.image --> "card-image"
bulma.card.content --> "card-content"
--Header subcomponent
bulma.card.header.container --> "card-header"
bulma.card.header.title --> "card-header-title"
bulma.card.header.icon --> "card-header-icon"
--Footer subcomponent
bulma.card.footer.container --> "card-footer"
bulma.card.footer.item --> "card-footer-item"
Docs: http://bulma.io/documentation/components/card/
The famous media object prevalent in social media interfaces, but useful in any context.
Media object container:
bulma.media.container --> "media"
Media object partitions:
bulma.media.left --> "media-left"
bulma.media.right --> "media-right"
bulma.media.content --> "media-content"
Size modifier (media container):
bulma.media.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/components/media-object/
Colored message blocks, to emphasize part of your page.*
Message container:
bulma.message.container --> "message"
Message subcomponents:
bulma.message.header --> "message-header"
bulma.message.body --> "message-body"
Color modifiers (message container):
bulma.message.color.isPrimary --> "is-primary"
bulma.message.color.isInfo --> "is-info"
bulma.message.color.isSuccess --> "is-success"
bulma.message.color.isWarning --> "is-warning"
bulma.message.color.isDanger --> "is-danger"
bulma.message.color.isWhite --> "is-white"
bulma.message.color.isLight --> "is-light"
bulma.message.color.isDark --> "is-dark"
bulma.message.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/components/message/
A classic modal overlay, in which you can include any content you want.
Modal container:
bulma.modal.container --> "modal"
Modal subcomponents:
bulma.modal.background --> "modal-background"
bulma.modal.content --> "modal-content"
--Close UI element
bulma.modal.close.ui --> "modal.close"
bulma.modal.close.size.isSmall --> "is-small"
bulma.modal.close.size.isMedium --> "is-medium"
bulma.modal.close.size.isLarge --> "is-large"
--Card subcomponent
bulma.modal.card.container --> "modal-card"
bulma.modal.card.head --> "modal-card-head"
bulma.modal.card.title --> "modal-card-title"
bulma.modal.card.body --> "modal-card-body"
bulma.modal.card.foot --> "modal-card-foot"
State modifier (modal container):
bulma.modal.state.isActive --> "is-active"
Docs: http://bulma.io/documentation/components/modal/
An imposing hero banner to showcase something.
Hero banner:
bulma.hero.container --> "hero"
Hero partitions:
bulma.hero.head --> "hero-head"
bulma.hero.body --> "hero-body"
bulma.hero.foot --> "hero-foot"
Hero UI components:
--Background video
bulma.hero.video.container --> "hero-video"
bulma.hero.video.opacity.isTransparent --> "is-transparent"
--Button panel
bulma.hero.buttons.container --> "hero-buttons"
Style modifier (container):
bulma.hero.style.isBold --> "is-bold"
Size modifiers (container):
bulma.hero.size.isMedium --> "is-medium"
bulma.hero.size.isLarge --> "is-large"
bulma.hero.size.isFullheight --> "is-fullheight"
Color modifiers (container):
bulma.hero.color.isPrimary --> "is-primary"
bulma.hero.color.isInfo --> "is-info"
bulma.hero.color.isSuccess --> "is-success"
bulma.hero.color.isWarning --> "is-warning"
bulma.hero.color.isDanger --> "is-danger"
bulma.hero.color.isWhite --> "is-white"
bulma.hero.color.isLight --> "is-light"
bulma.hero.color.isDark --> "is-dark"
bulma.hero.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/layout/hero/
A simple container to divide your page into sections.
Page section:
bulma.section.container --> "section"
Spacing modifiers:
bulma.section.spacing.isMedium --> "is-medium"
bulma.section.spacing.isLarge --> "is-large"
Docs: http://bulma.io/documentation/layout/section/
A simple responsive footer which can include anything: lists, headings, columns, icons, buttons...
Page footer:
bulma.footer.container --> "footer"
Docs: http://bulma.io/documentation/layout/footer/
A horizontally centered container for featured content. [Note: Bulma calls this
layout component a "container", but to avoid bulma.container.container
in my
naming scheme, I call it a "feature" instead.]
Featured content container:
bulma.feature.container --> "container"
Sizing modifier (removes max-width
):
bulma.feature.sizing.isFluid --> "is-fluid"
Docs: http://bulma.io/documentation/layout/container/
A simple way to build responsive columns.
Columns need to be inside a container:
bulma.columns.container --> "columns"
Each column also needs its own container:
bulma.columns.column.container --> "column"
--Column width modifiers
bulma.columns.column.width.isOneQuarter --> "is-one-quarter"
bulma.columns.column.width.isOneThird --> "is-one-third"
bulma.columns.column.width.isHalf --> "is-half"
bulma.columns.column.width.isTwoThirds --> "is-two-thirds"
bulma.columns.column.width.isThreeQuarters --> "is-three-quarters"
bulma.columns.column.width.is1 --> "is-1"
bulma.columns.column.width.is2 --> "is-2"
bulma.columns.column.width.is3 --> "is-3"
bulma.columns.column.width.is4 --> "is-4"
bulma.columns.column.width.is5 --> "is-5"
bulma.columns.column.width.is6 --> "is-6"
bulma.columns.column.width.is7 --> "is-7"
bulma.columns.column.width.is8 --> "is-8"
bulma.columns.column.width.is9 --> "is-9"
bulma.columns.column.width.is10 --> "is-10"
bulma.columns.column.width.is11 --> "is-11"
bulma.columns.column.width.isNarrow --> "is-narrow"
--Column offset modifiers
bulma.columns.column.offset.isOneQuarter --> "is-offset-one-quarter"
bulma.columns.column.offset.isOneThird --> "is-offset-one-third"
bulma.columns.column.offset.isHalf --> "is-offset-half"
bulma.columns.column.offset.isTwoThirds --> "is-offset-two-thirds"
bulma.columns.column.offset.isThreeQuarters --> "is-offset-three-quarters"
bulma.columns.column.offset.is1 --> "is-offset-1"
bulma.columns.column.offset.is2 --> "is-offset-2"
bulma.columns.column.offset.is3 --> "is-offset-3"
bulma.columns.column.offset.is4 --> "is-offset-4"
bulma.columns.column.offset.is5 --> "is-offset-5"
bulma.columns.column.offset.is6 --> "is-offset-6"
bulma.columns.column.offset.is7 --> "is-offset-7"
bulma.columns.column.offset.is8 --> "is-offset-8"
bulma.columns.column.offset.is9 --> "is-offset-9"
bulma.columns.column.offset.is10 --> "is-offset-10"
bulma.columns.column.offset.is11 --> "is-offset-11"
Alignment modifiers (columns container):
bulma.columns.alignment.isCentered --> "is-centered"
bulma.columns.alignment.isVCentered --> "is-vcentered"
Spacing modifiers (columns container):
bulma.columns.spacing.isMultiline --> "is-multiline"
bulma.columns.spacing.isGapless --> "is-gapless"
bulma.columns.spacing.isGrid --> "is-grid"
Display modifiers (columns container):
bulma.columns.display.onMobile = "is-mobile"
bulma.columns.display.onlyDesktop = "is-desktop"
Docs: http://bulma.io/documentation/grid/columns/
A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids.
Nestable container for tile grids:
bulma.tile.container --> "tile"
Tile level designators:
bulma.tile.level.isAncestor --> "is-ancestor"
bulma.tile.level.isParent --> "is-parent"
bulma.tile.level.isChild --> "is-child"
Tile orientation designator:
bulma.tile.orientation.isVertical --> "is-vertical"
Tile width modifiers:
bulma.tile.width.is1 --> "is-1"
bulma.tile.width.is2 --> "is-2"
bulma.tile.width.is3 --> "is-3"
bulma.tile.width.is4 --> "is-4"
bulma.tile.width.is5 --> "is-5"
bulma.tile.width.is6 --> "is-6"
bulma.tile.width.is7 --> "is-7"
bulma.tile.width.is8 --> "is-8"
bulma.tile.width.is9 --> "is-9"
bulma.tile.width.is10 --> "is-10"
bulma.tile.width.is11 --> "is-11"
Docs: http://bulma.io/documentation/grid/tiles/
The inevitable HTML table, with special case cells.
Table element class:
bulma.table.container --> "table"
State modifier (table row):
bulma.table.row.state.isSelected --> "is-selected"
Style modifiers:
bulma.table.style.isBordered --> "is-bordered"
bulma.table.style.isStriped --> "is-striped"
Spacing modifier:
bulma.table.spacing.isNarrow --> "is-narrow"
Docs: http://bulma.io/documentation/elements/table/
Float modifiers (docs):
bulma.properties.float.isClearfix --> "is-clearfix"
bulma.properties.float.isPulledLeft --> "is-pulled-left"
bulma.properties.float.isPulledRight --> "is-pulled-right"
Text alignment modifiers (docs):
bulma.properties.alignment.hasTextCentered --> "has-text-centered"
bulma.properties.alignment.hasTextLeft --> "has-text-left"
bulma.properties.alignment.hasTextRight --> "has-text-right"
Element sizing modifiers (docs):
bulma.properties.sizing.isOverlay --> "is-overlay"
bulma.properties.sizing.isFullwidth --> "is-fullwidth"
bulma.properties.sizing.isMarginless --> "is-marginless"
bulma.properties.sizing.isPaddingless --> "is-paddingless"
Display modifiers with responsive classes (docs):
bulma.properties.display.isBlock.always --> "is-block-touch is-block-desktop"
bulma.properties.display.isBlock.mobile --> "is-block-mobile"
bulma.properties.display.isBlock.tablet --> "is-block-tablet"
bulma.properties.display.isBlock.tabletOnly --> "is-block-tablet-only"
bulma.properties.display.isBlock.touch --> "is-block-touch"
bulma.properties.display.isBlock.desktop --> "is-block-desktop"
bulma.properties.display.isBlock.desktopOnly --> "is-block-desktop-only"
bulma.properties.display.isBlock.widescreen -->"is-block-widescreen"
bulma.properties.display.isFlex.always --> "is-flex-touch is-flex-desktop"
bulma.properties.display.isFlex.mobile --> "is-flex-mobile"
bulma.properties.display.isFlex.tablet --> "is-flex-tablet"
bulma.properties.display.isFlex.tabletOnly --> "is-flex-tablet-only"
bulma.properties.display.isFlex.touch --> "is-flex-touch"
bulma.properties.display.isFlex.desktop --> "is-flex-desktop"
bulma.properties.display.isFlex.desktopOnly --> "is-flex-desktop-only"
bulma.properties.display.isFlex.widescreen -->"is-flex-widescreen"
bulma.properties.display.isInline.always --> "is-inline-touch is-inline-desktop"
bulma.properties.display.isInline.mobile --> "is-inline-mobile"
bulma.properties.display.isInline.tablet --> "is-inline-tablet"
bulma.properties.display.isInline.tabletOnly --> "is-inline-tablet-only"
bulma.properties.display.isInline.touch --> "is-inline-touch"
bulma.properties.display.isInline.desktop --> "is-inline-desktop"
bulma.properties.display.isInline.desktopOnly --> "is-inline-desktop-only"
bulma.properties.display.isInline.widescreen -->"is-inline-widescreen"
bulma.properties.display.isInlineBlock.always --> ""is-inline-block-touch is-inline-block-desktop"
bulma.properties.display.isInlineBlock.mobile --> "is-inline-block-mobile"
bulma.properties.display.isInlineBlock.tablet --> "is-inline-block-tablet"
bulma.properties.display.isInlineBlock.tabletOnly --> "is-inline-block-tablet-only"
bulma.properties.display.isInlineBlock.touch --> "is-inline-block-touch"
bulma.properties.display.isInlineBlock.desktop --> "is-inline-block-desktop"
bulma.properties.display.isInlineBlock.desktopOnly --> "is-inline-block-desktop-only"
bulma.properties.display.isInlineBlock.widescreen -->"is-inline-block-widescreen"
bulma.properties.display.isInlineFlex.always --> "is-inline-flex-touch is-inline-flex-desktop"
bulma.properties.display.isInlineFlex.mobile --> "is-inline-flex-mobile"
bulma.properties.display.isInlineFlex.tablet --> "is-inline-flex-tablet"
bulma.properties.display.isInlineFlex.tabletOnly --> "is-inline-flex-tablet-only"
bulma.properties.display.isInlineFlex.touch --> "is-inline-flex-touch"
bulma.properties.display.isInlineFlex.desktop --> "is-inline-flex-desktop"
bulma.properties.display.isInlineFlex.desktopOnly --> "is-inline-flex-desktop-only"
bulma.properties.display.isInlineFlex.widescreen --> "is-inline-flex-widescreen"
Visibility modifier with responsive classes (docs):
bulma.properties.visability.isHidden.always --> "is-hidden"
bulma.properties.visability.isHidden.mobile --> "is-hidden-mobile"
bulma.properties.visability.isHidden.tablet --> "is-hidden-tablet"
bulma.properties.visability.isHidden.tabletOnly -->"is-hidden-tablet-only"
bulma.properties.visability.isHidden.touch --> "is-hidden-touch"
bulma.properties.visability.isHidden.desktop --> "is-hidden-desktop"
bulma.properties.visability.isHidden.desktopOnly --> "is-hidden-desktop-only"
bulma.properties.visability.isHidden.widescreen --> "is-hidden-widescreen"
Interaction modifier (docs):
bulma.properties.interaction.isUnselectable --> "is-unselectable"
module BulmaClasses exposing (bulma)
{-|
## Bulma CSS classes organized into one big nested record set
### __Package documentation:__
- [Text/Images](#__text-images__) : [*heading*](#__heading__), [*content*](#__content__), [*image*](#__image__)
- [UI Elements](#__ui-elements__)
+ [Buttons](#-buttons-) : [*button*](#__button__), [*delete*](#__delete__)
+ [User Input](#-user-input-) : [*input*](#__input__), [*textarea*](#__textarea__), [*checkbox*](#__checkbox__), [*radio*](#__radio__), [*select*](#__select__)
+ [Form Layout](#-form-layout-) : [*field*](#__field__), [*control*](#__control__), [*label*](#__label__), [*help*](#__help__)
+ [Indicators](#-indicators-) : [*icon*](#__icon__), [*number*](#__number__), [*tag*](#__tag__), [*notification*](#__notification__), [*progress*](#__progress__)
- [UI Components](#__ui-components__)
+ [Navigation/Controls](#-navigation-controls-) : [*nav*](#__nav__), [*level*](#__level__), [*menu*](#__menu__), [*tabs*](#__tabs__), [*panel*](#__panel__), [*pagination*](#__pagination__)
+ [Content/Media](#-content-media-) : [*box*](#__box__), [*card*](#__card__), [*media*](#__media__), [*message*](#__message__), [*modal*](#__modal__)
- [Layout Components](#__layout-components__)
+ [Page Layout](#-page-layout-) : [*hero*](#__hero__), [*section*](#__section__), [*footer*](#__footer__)
+ [Section Layout](#-section-layout-) : [*feature*](#__feature__), [*columns*](#__columns__), [*tile*](#__tile__), [*table*](#__table__)
- [Modifiers for Generic Properties](#__modifiers-for-generic-properties__) : [*properties*](#__properties__)
### __Bulma documentation:__
http://bulma.io/documentation/modifiers/syntax/
@docs bulma
-}
import Internal.Types exposing (Bulma)
import Internal.Classes as Classes
{-|
---
# __Text/Images__
---
---
## __Heading__
*Simple headings to add depth to your page.*
__Text styling classes:__
bulma.heading.title --> "title"
bulma.heading.subtitle --> "subtitle"
__Size modifiers:__
bulma.heading.size.is1 --> "is-1"
bulma.heading.size.is2 --> "is-2"
bulma.heading.size.is3 --> "is-3"
bulma.heading.size.is4 --> "is-4"
bulma.heading.size.is5 --> "is-5"
bulma.heading.size.is6 --> "is-6"
__Maintain normal spacing between title and subtitle:__
bulma.heading.spacing.isNormal --> "is-spaced"
Docs: http://bulma.io/documentation/elements/title/
---
## __Content__
*A single class to handle WYSIWYG generated content, where only HTML tags are
available.*
__Content wrapper:__
bulma.content.container --> "content"
__Size modifiers:__
bulma.content.size.isSmall --> "is-small"
bulma.content.size.isMedium --> "is-medium"
bulma.content.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/content/
---
## __Image__
*A container for responsive images.*
__Image wrapper:__
bulma.image.container --> "image"
__Size modifiers:__
bulma.image.size.is16x16 --> "is-16x16"
bulma.image.size.is24x24 --> "is-24x24"
bulma.image.size.is32x32 --> "is-32x32"
bulma.image.size.is48x48 --> "is-48x48"
bulma.image.size.is64x64 --> "is-64x64"
bulma.image.size.is96x96 --> "is-96x96"
bulma.image.size.is128x128 --> "is-128x128"
bulma.image.size.isSquare --> "is-square"
bulma.image.size.is1by1 --> "is-1by1"
bulma.image.size.is4by3 --> "is-4by3"
bulma.image.size.is3by2 --> "is-3by2"
bulma.image.size.is16by9 --> "is-16by9"
bulma.image.size.is2by1 --> "is-2by1"
Docs: http://bulma.io/documentation/elements/image/
---
# __UI Elements__
---
---
# *Buttons*
---
## __Button__
*The classic button, in different colors, sizes, and states.*
__Button UI element:__
bulma.button.ui --> "button"
__Style modifiers:__
bulma.button.style.isLink --> "is-link"
bulma.button.style.isOutlined --> "is-outlined"
bulma.button.style.isInverted --> "is-inverted"
bulma.button.style.isStatic --> "is-static"
__Size modifiers:__
bulma.button.size.isSmall --> "is-small"
bulma.button.size.isMedium --> "is-medium"
bulma.button.size.isLarge --> "is-large"
__State modifiers:__
bulma.button.state.isHovered --> "is-hovered"
bulma.button.state.isFocused --> "is-focused"
bulma.button.state.isActive --> "is-active"
bulma.button.state.isLoading --> "is-loading"
__Color modifiers:__
bulma.button.color.isPrimary --> "is-primary"
bulma.button.color.isInfo --> "is-info"
bulma.button.color.isSuccess --> "is-success"
bulma.button.color.isWarning --> "is-warning"
bulma.button.color.isDanger --> "is-danger"
bulma.button.color.isWhite --> "is-white"
bulma.button.color.isLight --> "is-light"
bulma.button.color.isDark --> "is-dark"
bulma.button.color.isBlack --> "is-black"
__Addon button modifier:__
bulma.button.addon.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/button/
---
## __Delete__
*A versatile delete cross.*
__Delete UI element:__
bulma.delete.ui --> "delete"
__Size modifiers:__
bulma.delete.size.isSmall --> "is-small"
bulma.delete.size.isMedium --> "is-medium"
bulma.delete.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/delete/
---
# *User Input*
---
## __Input__
__Input UI element:__
bulma.input.ui --> "input"
__Display modifier:__
bulma.input.display.isInline --> "is-inline"
__Size modifiers:__
bulma.input.size.isSmall --> "is-small"
bulma.input.size.isMedium --> "is-medium"
bulma.input.size.isLarge --> "is-large"
__State modifiers:__
bulma.input.state.isHovered --> "is-hovered"
bulma.input.state.isFocused --> "is-focused"
bulma.input.state.isActive --> "is-active"
bulma.input.state.isLoading --> "is-loading"
__Color modifiers:__
bulma.input.color.isPrimary --> "is-primary"
bulma.input.color.isInfo --> "is-info"
bulma.input.color.isSuccess --> "is-success"
bulma.input.color.isWarning --> "is-warning"
bulma.input.color.isDanger --> "is-danger"
bulma.input.color.isWhite --> "is-white"
bulma.input.color.isLight --> "is-light"
bulma.input.color.isDark --> "is-dark"
bulma.input.color.isBlack --> "is-black"
__Addon input modifier:__
bulma.input.addon.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/form/
---
## __Textarea__
__Textarea UI element:__
bulma.textarea.ui --> "textarea"
__Display modifier:__
bulma.textarea.display.isInline --> "is-inline"
__Size modifiers:__
bulma.textarea.size.isSmall --> "is-small"
bulma.textarea.size.isMedium --> "is-medium"
bulma.textarea.size.isLarge --> "is-large"
__State modifiers:__
bulma.textarea.state.isHovered --> "is-hovered"
bulma.textarea.state.isFocused --> "is-focused"
bulma.textarea.state.isActive --> "is-active"
bulma.textarea.state.isLoading --> "is-loading"
__Color modifiers:__
bulma.textarea.color.isPrimary --> "is-primary"
bulma.textarea.color.isInfo --> "is-info"
bulma.textarea.color.isSuccess --> "is-success"
bulma.textarea.color.isWarning --> "is-warning"
bulma.textarea.color.isDanger --> "is-danger"
bulma.textarea.color.isWhite --> "is-white"
bulma.textarea.color.isLight --> "is-light"
bulma.textarea.color.isDark --> "is-dark"
bulma.textarea.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/form/
---
## __Checkbox__
__Checkbox UI element:__
bulma.checkbox.ui --> "checkbox"
Docs: http://bulma.io/documentation/elements/form/
---
## __Radio__
__Radio UI element:__
bulma.radio.ui --> "radio"
Docs: http://bulma.io/documentation/elements/form/
---
## __Select__
__Select UI element:__
bulma.select.ui --> "select"
__Size modifiers:__
bulma.select.size.isSmall --> "is-small"
bulma.select.size.isMedium --> "is-medium"
bulma.select.size.isLarge --> "is-large"
__State modifiers:__
bulma.select.state.isHovered --> "is-hovered"
bulma.select.state.isFocused --> "is-focused"
bulma.select.state.isActive --> "is-active"
bulma.select.state.isLoading --> "is-loading"
bulma.select.state.isDisabled --> "is-disabled"
__Addon select modifier:__
bulma.select.addon.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/form/
---
# *Form Layout*
---
## __Field__
A wrapper for a control and its label, or for a control group.
__Field wrapper:__
bulma.field.container --> "field"
__Field label:__
bulma.field.label --> "field-label"
__Grouping buttons or form elements:__
bulma.field.isGrouped.left --> "is-grouped"
bulma.field.isGrouped.centered --> "is-grouped is-grouped-centered"
bulma.field.isGrouped.right --> "is-grouped is-grouped-right"
__Attaching buttons or form elements inline:__
bulma.field.hasAddons.left --> "has-addons"
bulma.field.hasAddons.centered --> "has-addons has-addons-centered"
bulma.field.hasAddons.right --> "has-addons has-addons-right"
__Layout modifier:__
bulma.field.layout.isHorizontal --> "is-horizontal"
Docs: http://bulma.io/documentation/elements/form/
---
## __Control__
A wrapper for input, select, and textarea elements to maintain consistent
spacing. Supports use of icons as visual cues in input fields.
__Control wrapper:__
bulma.control.container --> "control"
__Displaying an icon inside a child input field:__
bulma.control.hasIcons.left --> "has-icons-left"
bulma.control.hasIcons.right --> "has-icons-right"
__State modifier:__
bulma.control.state.isLoading --> "is-loading"
__Sizing modifier for a grouped control:__
bulma.control.sizing.isExpanded --> "is-expanded"
Docs: http://bulma.io/documentation/elements/form/
---
## __Label__
__UI element label:__
bulma.label.ui --> "label"
__Size modifiers:__
bulma.label.size.isSmall --> "is-small"
bulma.label.size.isMedium --> "is-medium"
bulma.label.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/form/
---
## __Help__
__UI element help text:__
bulma.help.ui --> "help"
__Color modifiers:__
bulma.help.color.isPrimary --> "is-primary"
bulma.help.color.isInfo --> "is-info"
bulma.help.color.isSuccess --> "is-success"
bulma.help.color.isWarning --> "is-warning"
bulma.help.color.isDanger --> "is-danger"
bulma.help.color.isWhite --> "is-white"
bulma.help.color.isLight --> "is-light"
bulma.help.color.isDark --> "is-dark"
bulma.help.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/form/
---
# *Indicators*
---
## __Icon__
A wrapper for Font Awesome icons.
__Icon wrapper:__
bulma.icon.container --> "icon"
__Size modifiers:__
bulma.icon.size.isSmall --> "is-small"
bulma.icon.size.isMedium --> "is-medium"
bulma.icon.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/elements/icon/
---
## __Number__
Special formatting for numerical output
__Number UI element:__
bulma.number.ui --> "number"
---
## __Tag__
*Small tag labels to insert anywhere.*
__Tag UI element:__
bulma.tag.ui --> "tag"
__Size modifiers:__
bulma.tag.size.isMedium --> "is-medium"
bulma.tag.size.isLarge --> "is-large"
__Color modifiers:__
bulma.tag.color.isPrimary --> "is-primary"
bulma.tag.color.isInfo --> "is-info"
bulma.tag.color.isSuccess --> "is-success"
bulma.tag.color.isWarning --> "is-warning"
bulma.tag.color.isDanger --> "is-danger"
bulma.tag.color.isWhite --> "is-white"
bulma.tag.color.isLight --> "is-light"
bulma.tag.color.isDark --> "is-dark"
bulma.tag.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/tag/
---
## __Notification__
*Bold notification blocks, to alert your users of something.*
__Notification UI element:__
bulma.notification.ui --> "notification"
__Color modifiers:__
bulma.notification.color.isPrimary --> "is-primary"
bulma.notification.color.isInfo --> "is-info"
bulma.notification.color.isSuccess --> "is-success"
bulma.notification.color.isWarning --> "is-warning"
bulma.notification.color.isDanger --> "is-danger"
bulma.notification.color.isWhite --> "is-white"
bulma.notification.color.isLight --> "is-light"
bulma.notification.color.isDark --> "is-dark"
bulma.notification.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/notification/
---
## __Progress__
*Native HTML progress bars.*
__Progress UI element:__
bulma.progress.ui --> "progress"
__Size modifiers:__
bulma.progress.size.isSmall --> "is-small"
bulma.progress.size.isMedium --> "is-medium"
bulma.progress.size.isLarge --> "is-large"
__Color modifiers:__
bulma.progress.color.isPrimary --> "is-primary"
bulma.progress.color.isInfo --> "is-info"
bulma.progress.color.isSuccess --> "is-success"
bulma.progress.color.isWarning --> "is-warning"
bulma.progress.color.isDanger --> "is-danger"
bulma.progress.color.isWhite --> "is-white"
bulma.progress.color.isLight --> "is-light"
bulma.progress.color.isDark --> "is-dark"
bulma.progress.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/elements/progress/
---
# __UI Components__
---
---
# *Navigation/Controls*
---
## __Nav__
*A responsive horizontal nav bar that can contain links, tabs, buttons,
icons, and a logo.*
__Nav container:__
bulma.nav.container --> "nav"
__Nav partitions:__
bulma.nav.left --> "nav-left"
bulma.nav.center --> "nav-center"
bulma.nav.right --> "nav-right"
__Nav responsive components:__
bulma.nav.toggle.ui --> "nav-toggle"
-- State modifier (toggle)
bulma.nav.toggle.state.isActive --> "is-active"
bulma.nav.menu.container --> "nav-menu"
-- State modifier (menu)
bulma.nav.menu.state.isActive --> "is-active"
__Nav items:__
bulma.nav.item.container --> "nav-item"
-- Style modifier
bulma.nav.item.style.isTab --> "is-tab"
-- State modifier
bulma.nav.item.state.isActive --> "is-active"
__Style modifier (container):__
bulma.nav.style.hasShadow --> "hasShadow"
Docs: http://bulma.io/documentation/components/nav/
---
## __Level__
A multi-purpose horizontal level, which can contain almost any other element.*
__Level container:__
bulma.level.container --> "level"
__Level partitions:__
bulma.level.left --> "level-left"
bulma.level.right --> "level-right"
__Level items:__
bulma.level.item --> "level-item"
__Responsive modifier (level container):__
bulma.level.mobile.isHorizontal --> "is-mobile"
Docs: http://bulma.io/documentation/components/level/
---
## __Menu__
*A simple menu, for any type of vertical navigation.*
__Menu container:__
bulma.menu.container --> "menu"
__Element class for menu labels:__
bulma.menu.label --> "menu-label"
__Element class for list of menu options (apply to `ul` element):__
bulma.menu.list --> "menu-list"
Docs: http://bulma.io/documentation/components/menu/
---
## __Tabs__
*Simple responsive horizontal navigation tabs, with different styles.*
__Tabs container:__
bulma.tabs.container --> "tabs"
__Tab state modifier:__
bulma.tabs.tab.state.isActive --> "is-active"
__Style modifiers:__
bulma.tabs.style.isBoxed --> "is-boxed"
bulma.tabs.style.isToggle --> "is-toggle"
__Alignment modifier:__
bulma.tabs.alignment.isCentered --> "is-centered"
bulma.tabs.alignment.isRight --> "is-right"
__Size modifiers:__
bulma.tabs.size.isSmall --> "is-small"
bulma.tabs.size.isMedium --> "is-medium"
bulma.tabs.size.isLarge --> "is-large"
bulma.tabs.size.isFullWidth --> "is-fullwidth"
Docs: http://bulma.io/documentation/components/tabs/
---
## __Panel__
*A composable panel, for compact controls.*
__Panel container:__
bulma.panel.container --> "panel"
__Panel subcomponents:__
bulma.panel.heading --> "panel-heading"
--Tab subcomponent
bulma.panel.tabs.container --> "panel-tabs"
bulma.panel.tabs.tab.state.isActive --> "is-active"
--Block subcomponent
bulma.panel.block.container --> "panel-block"
bulma.panel.block.icon --> "panel-icon"
bulma.panel.block.list --> "panel-list"
bulma.panel.block.state.isActive --> "is-active"
Docs: http://bulma.io/documentation/components/panel/
---
## __Pagination__
*A responsive, usable, and flexible pagination.*
__Pagination container:__
bulma.pagination.container --> "pagination"
__Element classes for navigation buttons:__
bulma.pagination.previous --> "pagination-previous"
bulma.pagination.next --> "pagination-next"
__Element classes and modifiers for pagination list:__
bulma.pagination.list.container --> "pagination-list"
bulma.pagination.list.link.ui --> "pagination-link"
bulma.pagination.list.link.state.isCurrent --> "is-current"
bulma.pagination.list.ellipsis --> "pagination-ellipsis"
__Position modifiers for pagination list (pagination container):__
bulma.pagination.position.isCentered --> "is-centered"
bulma.pagination.position.isRight --> "is-right"
Docs: http://bulma.io/documentation/components/pagination/
---
# *Content/Media*
---
## __Box__
*The box element is simply a container with a shadow, a border, a radius,
and some padding.*
__Box container:__
bulma.box.container --> "box"
Docs: http://bulma.io/documentation/bulma.propertiess/box/
___
## __Card__
*An all-around flexible and composable component.*
__Card container:__
bulma.card.container --> "card"
__Card subcomponents:__
bulma.card.image --> "card-image"
bulma.card.content --> "card-content"
--Header subcomponent
bulma.card.header.container --> "card-header"
bulma.card.header.title --> "card-header-title"
bulma.card.header.icon --> "card-header-icon"
--Footer subcomponent
bulma.card.footer.container --> "card-footer"
bulma.card.footer.item --> "card-footer-item"
Docs: http://bulma.io/documentation/components/card/
---
## __Media__
*The famous media object prevalent in social media interfaces, but useful in
any context.*
__Media object container:__
bulma.media.container --> "media"
__Media object partitions:__
bulma.media.left --> "media-left"
bulma.media.right --> "media-right"
bulma.media.content --> "media-content"
__Size modifier (media container):__
bulma.media.size.isLarge --> "is-large"
Docs: http://bulma.io/documentation/components/media-object/
---
## __Message__
Colored message blocks, to emphasize part of your page.*
__Message container:__
bulma.message.container --> "message"
__Message subcomponents:__
bulma.message.header --> "message-header"
bulma.message.body --> "message-body"
__Color modifiers (message container):__
bulma.message.color.isPrimary --> "is-primary"
bulma.message.color.isInfo --> "is-info"
bulma.message.color.isSuccess --> "is-success"
bulma.message.color.isWarning --> "is-warning"
bulma.message.color.isDanger --> "is-danger"
bulma.message.color.isWhite --> "is-white"
bulma.message.color.isLight --> "is-light"
bulma.message.color.isDark --> "is-dark"
bulma.message.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/components/message/
---
## __Modal__
*A classic modal overlay, in which you can include any content you want.*
__Modal container:__
bulma.modal.container --> "modal"
__Modal subcomponents:__
bulma.modal.background --> "modal-background"
bulma.modal.content --> "modal-content"
--Close UI element
bulma.modal.close.ui --> "modal.close"
bulma.modal.close.size.isSmall --> "is-small"
bulma.modal.close.size.isMedium --> "is-medium"
bulma.modal.close.size.isLarge --> "is-large"
--Card subcomponent
bulma.modal.card.container --> "modal-card"
bulma.modal.card.head --> "modal-card-head"
bulma.modal.card.title --> "modal-card-title"
bulma.modal.card.body --> "modal-card-body"
bulma.modal.card.foot --> "modal-card-foot"
__State modifier (modal container):__
bulma.modal.state.isActive --> "is-active"
Docs: http://bulma.io/documentation/components/modal/
---
# __Layout Components__
---
---
# *Page Layout*
---
## __Hero__
*An imposing hero banner to showcase something.*
__Hero banner:__
bulma.hero.container --> "hero"
__Hero partitions:__
bulma.hero.head --> "hero-head"
bulma.hero.body --> "hero-body"
bulma.hero.foot --> "hero-foot"
__Hero UI components:__
--Background video
bulma.hero.video.container --> "hero-video"
bulma.hero.video.opacity.isTransparent --> "is-transparent"
--Button panel
bulma.hero.buttons.container --> "hero-buttons"
__Style modifier (container):__
bulma.hero.style.isBold --> "is-bold"
__Size modifiers (container):__
bulma.hero.size.isMedium --> "is-medium"
bulma.hero.size.isLarge --> "is-large"
bulma.hero.size.isFullheight --> "is-fullheight"
__Color modifiers (container):__
bulma.hero.color.isPrimary --> "is-primary"
bulma.hero.color.isInfo --> "is-info"
bulma.hero.color.isSuccess --> "is-success"
bulma.hero.color.isWarning --> "is-warning"
bulma.hero.color.isDanger --> "is-danger"
bulma.hero.color.isWhite --> "is-white"
bulma.hero.color.isLight --> "is-light"
bulma.hero.color.isDark --> "is-dark"
bulma.hero.color.isBlack --> "is-black"
Docs: http://bulma.io/documentation/layout/hero/
---
## __Section__
*A simple container to divide your page into sections.*
__Page section:__
bulma.section.container --> "section"
__Spacing modifiers:__
bulma.section.spacing.isMedium --> "is-medium"
bulma.section.spacing.isLarge --> "is-large"
Docs: http://bulma.io/documentation/layout/section/
---
## __Footer__
*A simple responsive footer which can include anything: lists, headings,
columns, icons, buttons...*
__Page footer:__
bulma.footer.container --> "footer"
Docs: http://bulma.io/documentation/layout/footer/
---
# *Section Layout*
---
## __Feature__
A horizontally centered container for featured content. [Note: Bulma calls this
layout component a "container", but to avoid `bulma.container.container` in my
naming scheme, I call it a "feature" instead.]
__Featured content container:__
bulma.feature.container --> "container"
__Sizing modifier (removes `max-width`):__
bulma.feature.sizing.isFluid --> "is-fluid"
Docs: http://bulma.io/documentation/layout/container/
---
## __Columns__
*A simple way to build responsive columns.*
__Columns need to be inside a container:__
bulma.columns.container --> "columns"
__Each column also needs its own container:__
bulma.columns.column.container --> "column"
--Column width modifiers
bulma.columns.column.width.isOneQuarter --> "is-one-quarter"
bulma.columns.column.width.isOneThird --> "is-one-third"
bulma.columns.column.width.isHalf --> "is-half"
bulma.columns.column.width.isTwoThirds --> "is-two-thirds"
bulma.columns.column.width.isThreeQuarters --> "is-three-quarters"
bulma.columns.column.width.is1 --> "is-1"
bulma.columns.column.width.is2 --> "is-2"
bulma.columns.column.width.is3 --> "is-3"
bulma.columns.column.width.is4 --> "is-4"
bulma.columns.column.width.is5 --> "is-5"
bulma.columns.column.width.is6 --> "is-6"
bulma.columns.column.width.is7 --> "is-7"
bulma.columns.column.width.is8 --> "is-8"
bulma.columns.column.width.is9 --> "is-9"
bulma.columns.column.width.is10 --> "is-10"
bulma.columns.column.width.is11 --> "is-11"
bulma.columns.column.width.isNarrow --> "is-narrow"
--Column offset modifiers
bulma.columns.column.offset.isOneQuarter --> "is-offset-one-quarter"
bulma.columns.column.offset.isOneThird --> "is-offset-one-third"
bulma.columns.column.offset.isHalf --> "is-offset-half"
bulma.columns.column.offset.isTwoThirds --> "is-offset-two-thirds"
bulma.columns.column.offset.isThreeQuarters --> "is-offset-three-quarters"
bulma.columns.column.offset.is1 --> "is-offset-1"
bulma.columns.column.offset.is2 --> "is-offset-2"
bulma.columns.column.offset.is3 --> "is-offset-3"
bulma.columns.column.offset.is4 --> "is-offset-4"
bulma.columns.column.offset.is5 --> "is-offset-5"
bulma.columns.column.offset.is6 --> "is-offset-6"
bulma.columns.column.offset.is7 --> "is-offset-7"
bulma.columns.column.offset.is8 --> "is-offset-8"
bulma.columns.column.offset.is9 --> "is-offset-9"
bulma.columns.column.offset.is10 --> "is-offset-10"
bulma.columns.column.offset.is11 --> "is-offset-11"
__Alignment modifiers (columns container):__
bulma.columns.alignment.isCentered --> "is-centered"
bulma.columns.alignment.isVCentered --> "is-vcentered"
__Spacing modifiers (columns container):__
bulma.columns.spacing.isMultiline --> "is-multiline"
bulma.columns.spacing.isGapless --> "is-gapless"
bulma.columns.spacing.isGrid --> "is-grid"
__Display modifiers (columns container):__
bulma.columns.display.onMobile = "is-mobile"
bulma.columns.display.onlyDesktop = "is-desktop"
Docs: http://bulma.io/documentation/grid/columns/
---
## __Tile__
*A single tile element to build 2-dimensional Metro-like, Pinterest-like, or
whatever-you-like grids.*
__Nestable container for tile grids:__
bulma.tile.container --> "tile"
__Tile level designators:__
bulma.tile.level.isAncestor --> "is-ancestor"
bulma.tile.level.isParent --> "is-parent"
bulma.tile.level.isChild --> "is-child"
__Tile orientation designator:__
bulma.tile.orientation.isVertical --> "is-vertical"
__Tile width modifiers:__
bulma.tile.width.is1 --> "is-1"
bulma.tile.width.is2 --> "is-2"
bulma.tile.width.is3 --> "is-3"
bulma.tile.width.is4 --> "is-4"
bulma.tile.width.is5 --> "is-5"
bulma.tile.width.is6 --> "is-6"
bulma.tile.width.is7 --> "is-7"
bulma.tile.width.is8 --> "is-8"
bulma.tile.width.is9 --> "is-9"
bulma.tile.width.is10 --> "is-10"
bulma.tile.width.is11 --> "is-11"
Docs: http://bulma.io/documentation/grid/tiles/
---
## __Table__
*The inevitable HTML table, with special case cells.*
__Table element class:__
bulma.table.container --> "table"
__State modifier (table row):__
bulma.table.row.state.isSelected --> "is-selected"
__Style modifiers:__
bulma.table.style.isBordered --> "is-bordered"
bulma.table.style.isStriped --> "is-striped"
__Spacing modifier:__
bulma.table.spacing.isNarrow --> "is-narrow"
Docs: http://bulma.io/documentation/elements/table/
---
# __Modifiers for Generic Properties__
---
---
## __Properties__
__Float modifiers ([docs](http://bulma.io/documentation/modifiers/helpers/)):__
bulma.properties.float.isClearfix --> "is-clearfix"
bulma.properties.float.isPulledLeft --> "is-pulled-left"
bulma.properties.float.isPulledRight --> "is-pulled-right"
__Text alignment modifiers ([docs](http://bulma.io/documentation/modifiers/helpers/)):__
bulma.properties.alignment.hasTextCentered --> "has-text-centered"
bulma.properties.alignment.hasTextLeft --> "has-text-left"
bulma.properties.alignment.hasTextRight --> "has-text-right"
__Element sizing modifiers ([docs](http://bulma.io/documentation/modifiers/helpers/)):__
bulma.properties.sizing.isOverlay --> "is-overlay"
bulma.properties.sizing.isFullwidth --> "is-fullwidth"
bulma.properties.sizing.isMarginless --> "is-marginless"
bulma.properties.sizing.isPaddingless --> "is-paddingless"
__Display modifiers with responsive classes ([docs](http://bulma.io/documentation/modifiers/responsive-helpers/)):__
bulma.properties.display.isBlock.always --> "is-block-touch is-block-desktop"
bulma.properties.display.isBlock.mobile --> "is-block-mobile"
bulma.properties.display.isBlock.tablet --> "is-block-tablet"
bulma.properties.display.isBlock.tabletOnly --> "is-block-tablet-only"
bulma.properties.display.isBlock.touch --> "is-block-touch"
bulma.properties.display.isBlock.desktop --> "is-block-desktop"
bulma.properties.display.isBlock.desktopOnly --> "is-block-desktop-only"
bulma.properties.display.isBlock.widescreen -->"is-block-widescreen"
bulma.properties.display.isFlex.always --> "is-flex-touch is-flex-desktop"
bulma.properties.display.isFlex.mobile --> "is-flex-mobile"
bulma.properties.display.isFlex.tablet --> "is-flex-tablet"
bulma.properties.display.isFlex.tabletOnly --> "is-flex-tablet-only"
bulma.properties.display.isFlex.touch --> "is-flex-touch"
bulma.properties.display.isFlex.desktop --> "is-flex-desktop"
bulma.properties.display.isFlex.desktopOnly --> "is-flex-desktop-only"
bulma.properties.display.isFlex.widescreen -->"is-flex-widescreen"
bulma.properties.display.isInline.always --> "is-inline-touch is-inline-desktop"
bulma.properties.display.isInline.mobile --> "is-inline-mobile"
bulma.properties.display.isInline.tablet --> "is-inline-tablet"
bulma.properties.display.isInline.tabletOnly --> "is-inline-tablet-only"
bulma.properties.display.isInline.touch --> "is-inline-touch"
bulma.properties.display.isInline.desktop --> "is-inline-desktop"
bulma.properties.display.isInline.desktopOnly --> "is-inline-desktop-only"
bulma.properties.display.isInline.widescreen -->"is-inline-widescreen"
bulma.properties.display.isInlineBlock.always --> ""is-inline-block-touch is-inline-block-desktop"
bulma.properties.display.isInlineBlock.mobile --> "is-inline-block-mobile"
bulma.properties.display.isInlineBlock.tablet --> "is-inline-block-tablet"
bulma.properties.display.isInlineBlock.tabletOnly --> "is-inline-block-tablet-only"
bulma.properties.display.isInlineBlock.touch --> "is-inline-block-touch"
bulma.properties.display.isInlineBlock.desktop --> "is-inline-block-desktop"
bulma.properties.display.isInlineBlock.desktopOnly --> "is-inline-block-desktop-only"
bulma.properties.display.isInlineBlock.widescreen -->"is-inline-block-widescreen"
bulma.properties.display.isInlineFlex.always --> "is-inline-flex-touch is-inline-flex-desktop"
bulma.properties.display.isInlineFlex.mobile --> "is-inline-flex-mobile"
bulma.properties.display.isInlineFlex.tablet --> "is-inline-flex-tablet"
bulma.properties.display.isInlineFlex.tabletOnly --> "is-inline-flex-tablet-only"
bulma.properties.display.isInlineFlex.touch --> "is-inline-flex-touch"
bulma.properties.display.isInlineFlex.desktop --> "is-inline-flex-desktop"
bulma.properties.display.isInlineFlex.desktopOnly --> "is-inline-flex-desktop-only"
bulma.properties.display.isInlineFlex.widescreen --> "is-inline-flex-widescreen"
__Visibility modifier with responsive classes ([docs](http://bulma.io/documentation/modifiers/responsive-helpers/)):__
bulma.properties.visability.isHidden.always --> "is-hidden"
bulma.properties.visability.isHidden.mobile --> "is-hidden-mobile"
bulma.properties.visability.isHidden.tablet --> "is-hidden-tablet"
bulma.properties.visability.isHidden.tabletOnly -->"is-hidden-tablet-only"
bulma.properties.visability.isHidden.touch --> "is-hidden-touch"
bulma.properties.visability.isHidden.desktop --> "is-hidden-desktop"
bulma.properties.visability.isHidden.desktopOnly --> "is-hidden-desktop-only"
bulma.properties.visability.isHidden.widescreen --> "is-hidden-widescreen"
__Interaction modifier ([docs](http://bulma.io/documentation/modifiers/helpers/)):__
bulma.properties.interaction.isUnselectable --> "is-unselectable"
-}
bulma : Bulma
bulma =
{ properties = Classes.properties
, content = Classes.content
, image = Classes.image
, heading = Classes.heading
, icon = Classes.icon
, field = Classes.field
, control = Classes.control
, button = Classes.button
, delete = Classes.delete
, input = Classes.input
, textarea = Classes.textarea
, checkbox = Classes.checkbox
, radio = Classes.radio
, select = Classes.select
, label = Classes.label
, help = Classes.help
, notification = Classes.notification
, progress = Classes.progress
, tag = Classes.tag
, number = Classes.number
, section = Classes.section
, footer = Classes.footer
, nav = Classes.nav
, hero = Classes.hero
, level = Classes.level
, feature = Classes.feature
, columns = Classes.columns
, tile = Classes.tile
, table = Classes.table
, menu = Classes.menu
, tabs = Classes.tabs
, panel = Classes.panel
, pagination = Classes.pagination
, box = Classes.box
, card = Classes.card
, media = Classes.media
, message = Classes.message
, modal = Classes.modal
}