Helpers
Vuero provides some CSS helpers that can help you adding some styles without writing any CSS. Helpers have been keep short to avoid bloat and unused CSS.
| Helper | Description | |
|---|---|---|
| Spacing | Margin (m-*-*) | Sets a margin on the target element following the m-*-* pattern, where the first * stands for directon (t, b, l and r) and the second one for pixel amount. Minimum and maximum pixel amounts are 5 and 100. |
Padding (p-*-*) | Sets a padding on the target element following the p-*-* pattern, where the first * stands for directon (t, b, l and r) and the second one for pixel amount. Minimum and maximum pixel amounts are 5 and 100. | |
No Margin (no-margin-*) | Sets a margin on the target element following the no-margin-* pattern, where the first * stands for directon (all, top, bottom, left and right). | |
No Padding (no-padding-*) | Sets a padding on the target element following the no-padding-* pattern, where the first * stands for directon (all, top, bottom, left and right). | |
| States | Hidden (is-hidden) | Sets the display property to none on the target element. |
VHidden (is-vhidden) | Sets the visibility property to hidden on the target element. | |
Disabled (is-disabled) | Sets the pointer-events property to none on the target element and decreases its opacity. | |
| Scroll | Slimscroll (has-slimscroll) | Sets the overflowY property to auto on the target element and tweaks the webkit scrollbar. |
| Scroll | Slimscroll X (has-slimscroll-x) | Sets the overflowX property to auto on the target element and tweaks the webkit scrollbar. |
| Scroll | Slimscroll X and Y (has-slimscroll-all) | Sets the overflow property to auto on the target element and tweaks the webkit scrollbar. |
| Dark Mode | Images | Toggle images between light mode and dark mode using the corresponding classes: light-image and dark-image. Displayed images will be displayed as inline-block. To display images as block use the light-image-block and dark-image-block classes instead. |
Dark Background (is-dark-bg-*) | Sets the background-color property to the specidifed value, where * is a percentage of the dark mode main color. Accepted values: 2, 3, 4, 6. | |
| Responsive | Hidden mobile (h-hidden-mobile) | Sets the display property to none on the target element when on a mobile display. |
Hidden tablet (h-hidden-tablet-p) | Sets the display property to none on the target element when on a tablet display in portrait mode. | |
Hidden tablet (h-hidden-tablet-l) | Sets the display property to none on the target element when on a tablet display in landscape mode. | |
Hidden desktop (h-hidden-desktop) | Sets the display property to none on the target element when on a desktop display. | |
| Typography | Font (.is-font) | Sets the font-family property to the $font variable value. |
Font Alt (.is-font-alt) | Sets the font-family property to the $font-alt variable value. | |
Font Weight (.is-weight-*) | Sets the font-weight property to the specidifed value, where * is a value between 300 and 900. | |
Font Size (.rem-*) | Sets the font-size property to the specidifed value, where * is a value between 70 and 100. Increments by 5. | |
| Stay Focus | Container (.stay-focus-container) | Sets the stay focus container. Will blur all child .stay-focus-element except the hovered one. |
Element (.stay-focus-element) | Element that will be blured when user hover over the container. |