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 NameDescription
non-selectableUser won’t be able to select DOM node along with its text
scrollApplies CSS tweaks to make scroll work at its best on ALL platforms
no-scrollHides scrollbars on the DOM node
no-pointer-eventsDOM element does not become a target of mouse events - clicks, hover and so on
all-pointer-eventsThe opposite of no-pointer-events
cursor-pointerChange mouse pointer on DOM element to look as if on a clickable link
cursor-not-allowedChange mouse pointer on DOM element to look as if action will not be carried out
cursor-inheritChange mouse pointer on DOM element to look as the same as parent option
cursor-noneNo mouse cursor is rendered
Class NameDescription
fitWidth and Height is set to 100%
full-heightHeight is set to 100%
full-widthWidth is set to 100%
window-heightHeight is set to 100vh with top and bottom margins 0
window-widthWidth is set to 100vw with left and right margins 0
blockSets display property set to block
Class NameDescription
rotate-45Rotate by 45 degrees
rotate-90Rotate by 90 degrees
rotate-135Rotate by 135 degrees
rotate-180Rotate by 180 degrees
rotate-205Rotate by 205 degrees
rotate-270Rotate by 270 degrees
rotate-315Rotate by 315 degrees
flip-horizontalFlip DOM element horizontally
flip-verticalFlip DOM element vertically
Class NameDescription
no-borderRemoves any border
no-border-radiusRemoves any radius the border might have
rounded-bordersApplies a generic border radius