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