Skip to content

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 classModifierEffects
.columnsis-vcenteredCenters nested column elements vertically using flexbox
is-multilineMakes the nested columns wrap into a new row when the end of the current row is reached
is-mobilePrevents columns from stacking on mobile devices
is-gaplessRemoves padding from children columns

Column

Main classModifierEffects
.columnis-halfMakes the column take half of the available space
is-one-thirdMakes the column take 1/3 of the available space
is-two-thirdsMakes the column take 2/3 of the available space
is-one-quarterMakes the column take 1/4 of the available space
is-*1-12Makes the column take an amount of space corresponding to the specified number between 1 and 12

Responsive helpers

Display helpers

Main classModifierEffects
.*is-flex-mobileSets display to flex for the target element when device width is < 768px
is-flex-tablet-onlySets display to flex for the target element when device width is between 769px and 1023px
is-flex-desktop-onlySets display to flex for the target element when device width is between 1024px and 1215px
is-flex-widescreen-onlySets display to flex for the target element when device width is between 1216px and 1407px
is-flex-touchSets display to flex for the target element when device width is > 1408px
is-flex-tabletSets display to flex for the target element when device width is > 768px
is-flex-desktopSets display to flex for the target element when device width is > 1024px
is-flex-widescreenSets display to flex for the target element when device width is > 1216px
is-flex-fullhdSets 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 classModifierEffects
.*is-hidden-mobileHides the target element when device width is < 768px
is-hidden-tablet-onlyHides the target element when device width is between 769px and 1023px
is-hidden-desktop-onlyHides the target element when device width is between 1024px and 1215px
is-hidden-widescreen-onlyHides the target element when device width is between 1216px and 1407px
is-hidden-touchHides the target element when device width is > 1408px
is-hidden-tabletHides the target element when device width is > 768px
is-hidden-desktopHides the target element when device width is > 1024px
is-hidden-widescreenHides the target element when device width is > 1216px
is-hidden-fullhdHides the target element when device width is > 1216px

General helpers

Heading helpers

Main classModifierEffects
.titleis-*1-6Sets the title size on a scale of 1 to 6
.subtitleis-*1-6Sets the subtitle size on a scale of 1 to 6

States helpers

Main classModifierEffects
*is-hiddenSets the target element todisplay: none
is-vhiddenSets the target element tovisibility: hidden
is-disabledDisables pointer events on target element

Components

Buttons

Main ClassModifierEffects
.buttonbig-buttonTransforms a normal button into a big button. Can have additional classes like is-bold and is-outlined
raisedRaises the button when hovered
upper-buttonSets the button text to uppercase
roundedGives rounded corners to a button element
is-loadingGives a loading state to a button element
feather-buttonTransforms 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-buttonChanges the button background color to $primary
secondary-buttonChanges the button background color to $secondary
accent-buttonChanges the button background color to $accent
grey-buttonChanges the button background color to $accent-grey

Cards

Main ClassModifierEffects
.flat-cardis-autoFlat cards have a fixed height by default. This modifier removes fixed height and changes its value to auto
is-longAdjusts the card layout for long product cards
is-list-itemTransforms a list item into a flat card.

All Rights Reserved