Modifiers

The single list of all modifiers in Kube.

Alert #

`is-error`	Error status and style for alerts
`is-success`	Success status and style for alerts
`is-focus`	Focus (info) status and style for alerts
`is-inverted`	White background style for alerts (useful for dark themes/backgrounds)

Button #

`is-secondary`	Secondary style and meaning for buttons
`is-tertiary`	Tertiary style and meaning for buttons
`is-disabled`	Disabled style for buttons
`is-inverted`	White background style for buttons (useful for dark themes/backgrounds)
`is-loading`	Loading indicator into buttons
`is-small`	Small size for buttons
`is-big`	Big size for buttons

Form #

Input, select, textarea

`is-error`	Error state of inputs
`is-success`	Success state of inputs
`is-disabled`	Disabled state of inputs
`is-search`	Search icon into inputs

Helpers

`is-checkbox`	Checkbox style for label element
`is-desc`	Description style for span/div elements
`is-req`	Required style for asterisks

Form item

`is-inline`	Allows to make the label of input on the left side
`is-inline-offset`	Adds the left shift for the form item if it is inline
`is-bar`	Makes all form elements in one line
`is-buttons`	Sets the additional spacing between buttons in the form item
`is-append`	Allows to make the input in the form item with an appended element
`is-prepend`	Allows to make the input in the form item with a prepended element

Grid #

`is-row`	Makes the element as a grid row
`is-col`	Makes the element as a grid column
`is-bricks`	Allows to use columns as bricks in one row
`is-gapless`	Removes the gap between grid columns

Helpers #

Position

`is-fixed`	Fixed position for element
`is-relative`	Relative position for element

Display

`is-invisible`	Visibility hidden for element
`is-relative`	Visibility visible for element
`is-hidden`	Hides element
`is-hidden-mobile`	Hides element on the mobile devices
`is-hidden-print`	Hides element on when printing a page
`is-shown-mobile`	Shows element on the mobile devices

Position

`is-shadow-1`	Small shadow on the element
`is-shadow-2`	Medium shadow on the element
`is-shadow-3`	Big shadow on the element

Border

`is-border`	Border around the element
`is-border-top`	Border at the top of the element
`is-border-bottom`	Border at the bottom of the element
`is-border-radius`	Rounded corners of the element

Scroll

`is-scrollable`	Makes the element scrollable if it is overflowed
`is-no-scroll`	Disables scrolling of the element on two sides
`is-no-scroll-x`	Disables the horizontal scroll of the element

Misc

`is-video-container`	Makes video in the iframe responsive
`is-loading`	Adds the loading indicator into the element

Close

`is-big`	Big the close icon
`is-large`	Large the close icon

Label #

`is-secondary`	Secondary style and meaning for labels
`is-tertiary`	Tertiary style and meaning for labels
`is-badge`	Badge style for labels

Layout #

`is-container`	Display flex to the container and the flex-direction column on the mobile devices
`is-container-row`	Display flex and the flex-direction row to the container on all devices
`is-container-column`	Display flex and the flex-direction column to the container on all devices
`is-items-middle`	Makes the items in the container vertically centered and aligns it top left on the mobile devices
`is-center`	Makes the container centered if it has a width
`is-left-mobile`	Moves the centered container to the left on the mobile devices
`is-push-right`	Pushes the element to the right edge of container and moves it to the left on the mobile devices
`is-push-right-mobile`	Pushes the element to the right edge of container on the mobile devices

See the layout section in the Helpers module

is-stacked Makes the pager as left/right navigation stack

Items

`is-prev`	Style for the previous item in the pager
`is-next`	Style for the next item in the pager
`is-disabled`	Disabled state for the item in the pager
`is-current`	Current state for the item in the pager
`is-prev`	Active state for the item in the pager

Spacing #

Set

`is-inset-2 - is-inset-120`	Sets the padding on all sides of the container.
`is-inset-x-2 - is-inset-x-120`	Sets the padding on the left and right side of the container.
`is-inset-y-2 - is-inset-y-120`	Sets the padding on the top and bottom side of the container.
`is-inset-top-2 - is-inset-top-120`	Sets the padding on the top side of the container.
`is-inset-bottom-2 - is-inset-bottom-120`	Sets the padding on the bottom side of the container.
`is-inset-left-2 - is-inset-left-120`	Sets the padding on the left side of the container.
`is-inset-right-2 - is-inset-right-120`	Sets the padding on the right side of the container.
`is-outset-2 - is-outset-120`	Sets the margin around all sides of the container.
`is-outset-x-2 - is-outset-x-120`	Sets the margin from the left edge and from the right edge of the container.
`is-outset-y-2 - is-outset-y-120`	Sets the margin from the top edge and from the bottom edge of the container.
`is-stack-2 - is-stack-120`	Sets the bottom margin of the container.
`is-col-stack-2 - is-col-stack-120`	Sets the bottom margin of each grid column (with `.is-col` class) in the row.

Remove

`is-inset-x-none`	Removes the padding from the left and right side of the container.
`is-inset-none`	Removes the padding from all sides of the container.
`is-inset-y-none`	Removes the padding from the top and bottom side of the container.
`is-inset-top-none`	Removes the padding from the top side of the container.
`is-inset-bottom-none`	Removes the padding from the bottom side of the container.
`is-inset-right-none`	Removes the padding from the right side of the container.
`is-inset-left-none`	Removes the padding from the left side of the container.
`is-outset-none`	Removes the margin from the container.
`is-outset-x-none`	Removes the left and right margin from the container.
`is-outset-y-none`	Removes the top and bottom margin from the container.
`is-stack-none`	Removes the bottom margin from the container.
`is-col-stack-none`	Removes the bottom margin from each grid column (with `.is-col` class) in the row.

Table #

`is-border`	Border on all sides of the cells in the table
`is-striped`	Zebra style for the table rows
`is-middle`	Vertical centering for cells content in the table (uses for tbody, tr or td)
`is-nowrap`	Makes white space nowrap in the table cell
`is-responsive`	Makes the table responsive on the mobile devices
`is-table-container`	Makes the table container (wrapper) responsive on the mobile devices

Tabs #

is-active Makes the tabs item is active

Typography #

Lists

`is-bar`	Makes the list items in one line
`is-unstyled`	Removes the margin and bullets from the list

Size

`is-large`	Large text
`is-big`	Big text
`is-small`	Small text
`is-smaller`	Smaller text

Align

`is-text-center`	Centered text
`is-text-right`	Aligns text to the right
`is-text-left-mobile`	Left text on the mobile devices
`is-text-right-mobile`	Right text on the mobile devices
`is-text-center-mobile`	Center text on the mobile devices

Color

`is-muted`	Makes text or links is muted with 60% opacity
`is-color-black`	Sets the black color for the links

Misc

`is-nowrap`	Adds white space nowrap to the text
`is-highlight`	Highlights text background

Width #

`is-width-large`	Large width for the container
`is-width-medium`	Medium width for the container
`is-width-small`	Small width for the container

`is-10`	10% width
`is-20`	20% width
`is-25`	25% width
`is-30`	30% width
`is-33`	33.3333% width
`is-34`	33.3333% width
`is-35`	35% width
`is-40`	40% width
`is-50`	50% width
`is-60`	60% width
`is-65`	65% width
`is-66`	66.6666% width
`is-67`	66.6666% width
`is-70`	70% width
`is-75`	75% width
`is-80`	80% width
`is-90`	90% width
`is-100`	100% width

See the width section in the Helpers module