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. |