Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

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.