Other CSS Helper Classes     

There are a lot of CSS classes that you can use while writing your Vue templates. Very handy to ease the complexity of your VueModels and templates.

The list below is not complete. Also check the other CSS documentation pages like Typography, Visibility, Shadows, Positioning.

Class Name Description
non-selectable User won’t be able to select DOM node along with its text
scroll Applies CSS tweaks to make scroll work at its best on ALL platforms
no-scroll Hides scrollbars on the DOM node
no-pointer-events DOM element does not become a target of mouse events - clicks, hover and so on
all-pointer-events The opposite of no-pointer-events
cursor-pointer Change mouse pointer on DOM element to look as if on a clickable link
Class Name Description
fit Width and Height is set to 100%
full-height Height is set to 100%
full-width Width is set to 100%
window-height Height is set to 100vh with top and bottom margins 0
window-width Width is set to 100vw with left and right margins 0
block Sets display property set to block
Class Name Description
rotate-45 Rotate by 45 degrees
rotate-90 Rotate by 90 degrees
rotate-135 Rotate by 135 degrees
rotate-180 Rotate by 180 degrees
rotate-205 Rotate by 205 degrees
rotate-270 Rotate by 270 degrees
rotate-315 Rotate by 315 degrees
flip-horizontal Flip DOM element horizontally
flip-vertical Flip DOM element vertically
Class Name Description
no-border Removes any border
round-borders Applies a generic border radius based on theme


There are two special CSS class named group and generic-margin.

group applies a small margin to all children DOM elements, while generic-margin applies same margin to the respective DOM element (this varies with each theme).

The recommended way to go is by using CSS Flex Gutter though.