# 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 (opens new window) 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-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. |