Helpers
Huro 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).
|
|
| Colors |
Color (color-*)
|
Sets a color on the target element following the color-* pattern, where the first * stands for the color variable name. Check the Huro colors to be able to use this helper properly.
|
background (bg-*)
|
Sets a background color on the target element following the color-* pattern, where the first * stands for the color variable name. Check the Huro colors to be able to use this helper properly.
|
|
| States |
Hidden (is-hidden)
|
Sets the display property to none on the target element.
|
V-Hidden (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.
|
| 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.
|