# Utilities

HiQ provides numerous custom selectors, mixins and utility classes to make styling your project easier and faster. See below for a complete reference.

# Custom Selectors

Behind-the-scenes, HiQ uses custom selectors, made possible by the postcss-custom-selectors plugin. If you use the HiQ source files with PostCSS, these are also available to you.

Selector Selected Elements
:--semantic-element article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section
:--touch-action-element a, area, button, [role='button'], input:not([type='range']), label, select, summary, textarea
:--heading h1, h2, h3, h4, h5, h6
:--user-selection ::-moz-selection, ::selection
:--list ol, ul
:--button button, [role='button'], [type='button'], [type='submit'], [type='reset']
:--code-element code, kbd, pre, samp
:--media img, embed, object, video
:--table-cell th, td
:--not-writable &:disabled, &[aria-disabled], &[readonly]
:--text-input input[type='text'], input[type='password'], input[type='url'], input[type='email'], input[type='tel'], input[type='search'], input[type='number'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime-local']
:--temporal-input input[type='date'], input[type='time'], input[type='month'], input[type='week'], input[type='datetime-local']
:--spin-button [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button
:--cancel-button [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration

# Mixins

HiQ mixins are available for you to use if you use the source files with PostCSS. Most mixins are also available as classes. Keep in mind that you should typically only use HiQ utility classes if that utility will apply at all breakpoints.

@mixin/.class Description
container
.container
Makes an element a HiQ container.
is-fluid
.is-fluid
Makes a container the full width of its parent.
is-stretched
.is-stretched
Stretches an element to fill its parent.
overflow-touch
.overflow-touch
Applies momentum-based scrolling for overflowing elements on touch devices.
is-resizable
Makes an element resizable.
is-visually-hidden
.is-visually-hidden
Visually hides an element but keeps it accessible to screen readers.
is-size-1
.is-size-1
Makes an element's text the first size in the HiQ type scale.
is-size-2
.is-size-2
Makes an element's text the second size in the HiQ type scale.
is-size-3
.is-size-3
Makes an element's text the third size in the HiQ type scale.
is-size-4
.is-size-4
Makes an element's text the fourth size in the HiQ type scale.
is-size-5
.is-size-5
Makes an element's text the fifth size in the HiQ type scale.
is-size-6
.is-size-6
Makes an element's text the sixth size in the HiQ type scale.
is-large
.is-large
Makes an element's text the 'large' size in the HiQ type scale.
is-small
.is-small
Makes an element's text the 'small' size in the HiQ type scale.
is-unstyled
.is-unstyled
Removes the default browser styling from a list element.
has-text-truncated
.has-text-truncated
Truncates an element's text with an ellipsis if it overflows.
is-clipped
.is-clipped
Hides overflow that overflows element bounds.
is-initial
Resets all properties on an element to their initial values.
is-unset
Resets all properties on an element to inheritable values, or else initial values.
button
Styles an element like a button.
input
Applies HiQ's input styles to an element.
is-controlled
Removes default browser styling from a button or input.
is-unselectable
.is-unselectable
Prevents a user from selecting an element or its text.
Last Updated: 8/29/2019, 2:06:05 AM