### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

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