CSS Reference

This is the CSS reference section. You will find here the most important classes, related modifiers and hints about styles distribution.

Layout

Grid system

Columns

Main class	Modifier	Effects
`.columns`	`is-vcentered`	Centers nested `column` elements vertically using flexbox
	`is-multiline`	Makes the nested columns wrap into a new row when the end of the current row is reached
	`is-mobile`	Prevents columns from stacking on mobile devices
	`is-gapless`	Removes padding from children columns

Column

Main class	Modifier	Effects
`.column`	`is-half`	Makes the column take half of the available space
	`is-one-third`	Makes the column take 1/3 of the available space
	`is-two-thirds`	Makes the column take 2/3 of the available space
	`is-one-quarter`	Makes the column take 1/4 of the available space
	`is-*1-12`	Makes the column take an amount of space corresponding to the specified number between 1 and 12

Responsive helpers

Display helpers

Main class	Modifier	Effects
`.*`	`is-flex-mobile`	Sets display to flex for the target element when device width is < 768px
	`is-flex-tablet-only`	Sets display to flex for the target element when device width is between 769px and 1023px
	`is-flex-desktop-only`	Sets display to flex for the target element when device width is between 1024px and 1215px
	`is-flex-widescreen-only`	Sets display to flex for the target element when device width is between 1216px and 1407px
	`is-flex-touch`	Sets display to flex for the target element when device width is > 1408px
	`is-flex-tablet`	Sets display to flex for the target element when device width is > 768px
	`is-flex-desktop`	Sets display to flex for the target element when device width is > 1024px
	`is-flex-widescreen`	Sets display to flex for the target element when device width is > 1216px
	`is-flex-fullhd`	Sets display to flex for the target element when device width is > 1216px

You can replace the keyword flex with the following parameters

block
inline
inline-block
inline-flex

Hide helpers

Main class	Modifier	Effects
`.*`	`is-hidden-mobile`	Hides the target element when device width is < 768px
	`is-hidden-tablet-only`	Hides the target element when device width is between 769px and 1023px
	`is-hidden-desktop-only`	Hides the target element when device width is between 1024px and 1215px
	`is-hidden-widescreen-only`	Hides the target element when device width is between 1216px and 1407px
	`is-hidden-touch`	Hides the target element when device width is > 1408px
	`is-hidden-tablet`	Hides the target element when device width is > 768px
	`is-hidden-desktop`	Hides the target element when device width is > 1024px
	`is-hidden-widescreen`	Hides the target element when device width is > 1216px
	`is-hidden-fullhd`	Hides the target element when device width is > 1216px

General helpers

Heading helpers

Main class	Modifier	Effects
`.title`	`is-*1-6`	Sets the title size on a scale of 1 to 6
`.subtitle`	`is-*1-6`	Sets the subtitle size on a scale of 1 to 6

States helpers

Main class	Modifier	Effects
`*`	`is-hidden`	Sets the target element to`display: none`
	`is-vhidden`	Sets the target element to`visibility: hidden`
	`is-disabled`	Disables pointer events on target element

Components

Buttons

Main Class	Modifier	Effects
`.button`	`big-button`	Transforms a normal button into a big button. Can have additional classes like `is-bold` and `is-outlined`
	`raised`	Raises the button when hovered
	`upper-button`	Sets the button text to uppercase
	`rounded`	Gives rounded corners to a button element
	`is-loading`	Gives a loading state to a button element
	`feather-button`	Transforms a normal button into a bigger uppercase button. Can have additional classes like `is-small`, to lower its size, and `is-bold` to make it bolder.
	`primary-button`	Changes the button background color to `$primary`
	`secondary-button`	Changes the button background color to `$secondary`
	`accent-button`	Changes the button background color to `$accent`
	`grey-button`	Changes the button background color to `$accent-grey`

Cards

Main Class	Modifier	Effects
`.flat-card`	`is-auto`	Flat cards have a fixed height by default. This modifier removes fixed height and changes its value to auto
	`is-long`	Adjusts the card layout for long product cards
	`is-list-item`	Transforms a list item into a flat card.