{"id":15041308,"url":"https://github.com/stowball/hucssley","last_synced_at":"2025-07-15T04:38:21.322Z","repository":{"id":39750756,"uuid":"182404478","full_name":"stowball/hucssley","owner":"stowball","description":"Hucssley - a full-featured, consistent, atomic utility class library for rapidly building performant UI","archived":false,"fork":false,"pushed_at":"2023-11-12T23:29:10.000Z","size":1041,"stargazers_count":78,"open_issues_count":8,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T20:15:59.747Z","etag":null,"topics":["atomic-design","css","css-framework","design-systems","functional-css","sass-library","utility-classes"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stowball.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-20T12:39:49.000Z","updated_at":"2024-02-27T05:33:27.000Z","dependencies_parsed_at":"2024-10-01T03:20:47.942Z","dependency_job_id":"61e480b4-ceac-494f-8fbf-c30838fc2e26","html_url":"https://github.com/stowball/hucssley","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/stowball/hucssley","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fhucssley","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fhucssley/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fhucssley/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fhucssley/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stowball","download_url":"https://codeload.github.com/stowball/hucssley/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fhucssley/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265402833,"owners_count":23759237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","css","css-framework","design-systems","functional-css","sass-library","utility-classes"],"created_at":"2024-09-24T20:45:56.189Z","updated_at":"2025-07-15T04:38:21.296Z","avatar_url":"https://github.com/stowball.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hucssley\n\nHucssley is very different to traditional frameworks like Bootstrap or Semantic UI, as it contains zero pre-built UI components, instead providing you with the atomic building blocks necessary for **you** to create any UI component.\n\nIt honours the groundwork laid by earlier utility class libraries such as [Tachyons](https://tachyons.io) and [Tailwind](https://tailwindcss.com), while hoping to address some of their deficiencies.\n\nTo that end, Hucssley has a few goals:\n\n1. To be incredibly easy to learn and use, by providing a system of atomic classes that mostly map 1:1 with existing CSS properties.\n2. To allow anyone of any skill to rapidly build for the web without unknowingly causing CSS bloat or fighting against some of CSS’s core, but sometimes difficult to understand principals.\n3. To provide the tools required to build UI for any breakpoint, user interaction or UI state.\n4. To be completely platform agnostic and portable between front-end stacks, with Sass being the only dependency.\n5. To be highly flexible to your needs, with the ability to easily customize existing classes and create new ones.\n\nTo understand the reasoning behind its creation, please read [Rethinking CSS](/rethinking-css.md).\n\n---\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n## Table of Contents\n\n- [What’s in the box?](#whats-in-the-box)\n- [A working example](#a-working-example)\n- [Why Hucssley?](#why-hucssley)\n- [Installation](#installation)\n- [Modules](#modules)\n  - [Base: `base`](#base-base)\n    - [Non-parent modules: `visited`, `focus`, `hocus`, `hover`, `active`, `print`, `reduced-motion`, `responsive`](#non-parent-modules-visited-focus-hocus-hover-active-print-reduced-motion-responsive)\n  - [State modules: `state`](#state-modules-state)\n  - [Group modules: `group-visited`, `group-focus`, `group-hover`, `group-hocus`, `group-state`](#group-modules-group-visited-group-focus-group-hover-group-hocus-group-state)\n  - [Custom parent modules](#custom-parent-modules)\n  - [Combining modules: `responsive` and `visited`, `focus`, `hover`, `hocus`, `active`, `state`, `group-visited`, `group-focus`, `group-hover`, `group-hocus`, `group-state`](#combining-modules-responsive-and-visited-focus-hover-hocus-active-state-group-visited-group-focus-group-hover-group-hocus-group-state)\n- [Scales](#scales)\n- [Configuration](#configuration)\n  - [Configuration helpers](#configuration-helpers)\n    - [`hu-append` and `hu-prepend`](#hu-append-and-hu-prepend)\n    - [`hu-get`](#hu-get)\n    - [`hu-em` and `hu-rem`](#hu-em-and-hu-rem)\n    - [`hu-tint` and `hu-shade`](#hu-tint-and-hu-shade)\n  - [Reset](#reset)\n  - [Global](#global)\n    - [Colors: `$hu-colors`](#colors-hu-colors)\n    - [Media queries: `$hu-media-queries`](#media-queries-hu-media-queries)\n    - [UI states: `$hu-states`](#ui-states-hu-states)\n    - [Spacing scale: `$hu-spacing-scale`](#spacing-scale-hu-spacing-scale)\n    - [Borders: `$hu-border-modules`, `$hu-border-sides` and `$hu-border-types`](#borders-hu-border-modules-hu-border-sides-and-hu-border-types)\n    - [Controlling focus: `$hu-focus-parent` and `$hu-focus-pseudo`](#controlling-focus-hu-focus-parent-and-hu-focus-pseudo)\n    - [Themes: `$hu-themes`](#themes-hu-themes)\n    - [Namespace: `$hu-namespace`](#namespace-hu-namespace)\n    - [Use important: `$hu-use-important`](#use-important-hu-use-important)\n    - [Pseudo prefix: `$hu-pseudo-prefix`](#pseudo-prefix-hu-pseudo-prefix)\n    - [Debug: `$hu-debug`](#debug-hu-debug)\n  - [Classes](#classes)\n- [Creating custom classes](#creating-custom-classes)\n  - [Customizing “placeholder” classes](#customizing-placeholder-classes)\n  - [Creating new, “basic” classes](#creating-new-basic-classes)\n    - [Generic classes: `hu-classes`](#generic-classes-hu-classes)\n      - [Basic](#basic)\n      - [Custom class name](#custom-class-name)\n      - [Unique class with multiple declarations](#unique-class-with-multiple-declarations)\n      - [Pseudo classes](#pseudo-classes)\n      - [Parent classes](#parent-classes)\n    - [Pseudo classes: `hu-pseudo-classes`](#pseudo-classes-hu-pseudo-classes)\n    - [Parent classes: `hu-parent-classes`](#parent-classes-hu-parent-classes)\n  - [Creating new, “more complex” classes](#creating-new-more-complex-classes)\n    - [Helper Functions](#helper-functions)\n      - [`hu-class-name`](#hu-class-name)\n      - [`hu-format-modules`](#hu-format-modules)\n      - [`hu-important`](#hu-important)\n    - [Mixins](#mixins)\n      - [`hu-generic`](#hu-generic)\n      - [`hu-responsive`](#hu-responsive)\n      - [`hu-parent`](#hu-parent)\n      - [`hu-parent-responsive`](#hu-parent-responsive)\n      - [`hu-pseudo`](#hu-pseudo)\n      - [`hu-pseudo-responsive`](#hu-pseudo-responsive)\n    - [Defining the variables](#defining-the-variables)\n    - [Writing the class logic](#writing-the-class-logic)\n      - [Creating custom pseudo classes](#creating-custom-pseudo-classes)\n      - [Creating custom parent classes](#creating-custom-parent-classes)\n- [Creating components](#creating-components)\n  - [Component definition](#component-definition)\n  - [Using the component](#using-the-component)\n- [Increasing specificity](#increasing-specificity)\n  - [Forcing `!important`](#forcing-important)\n  - [Quarantining with a descendent selector](#quarantining-with-a-descendent-selector)\n- [Controlling file size](#controlling-file-size)\n  - [v2](#v2)\n  - [v1](#v1)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n---\n\n## What’s in the box?\n\nCurrently, Hucssley provides utility classes for over 120 CSS properties, of which multiple, sensible default values are generated. Each utility is also created for various “modules”, whether that’s at certain media queries, UI states, user interactions, for print or more.\n\nEach utility is completely customizable; they can be partially renamed, have values changed, have their modules altered or be omitted entirely.\n\nBy default, Hucssley does not output classes for things that don’t map explicitly to specific property types (such as `box-shadow`, background gradients and `transform`), but it does provide placeholder variables for these to make tailored, [custom classes simple to create](#creating-custom-classes).\n\nHucssley also provides utility classes for truncating text and making elements “visually hidden” for accessibility purposes.\n\nFor a complete list of the class names provided and how they can be customized, read [Hucssley classes](/hucssley-classes.md).\n\nHucssley also comes with:\n\n* A sensible, optional CSS reset to make building UI easier and more consistent.\n* Functions for converting `px` values to `em` and `rem` for improved accessibilty.\n* Functions to incrementally darken (`shade`) or lighten (`tint`) colors.\n* The ability to theme elements based off a parent selector.\n* The ability to create classes scoped to custom parent selectors.\n* The ability to create classes that map to pseudo-classes and pseudo-selectors.\n\n---\n\n## A working example\n\nThe following example demonstrates how you can use Hucssley out-of-the-box to easily create a responsive, accessible, interactive component.\n\n```html\n\u003cdiv class=\"\n  background-color:blue-0\n  padding:500\n\"\u003e\n  \u003cdiv class=\"\n    align-items:center\n    background-color:neutral-0\n    border-color:neutral-200\n    border-radius:500\n    border-style:solid\n    border-width:100\n    display:flex\n    flex-direction:column\n    padding:500\n    text-align:center\n    @mq-768--flex-direction:row\n    @mq-768--text-align:left\n  \"\u003e\n   \u003cimg\n      alt=\"\"\n      class=\"\n        background-color:blue-600\n        border-color:neutral-100\n        border-radius:1000\n        border-style:solid\n        border-width:200\n        margin-bottom:400\n        width:50%\n        @mq-600--width:30%\n        @mq-768--margin-bottom:0\n        @mq-768--margin-right:500\n        @mq-768--width:20%\n      \"\n      src=\"https://hireup.cdn.prismic.io/hireup/89e15301c28e6396927d85e38e9c5d5833ebab09_kyle_357-bonnie.png\"\n    /\u003e\n    \u003cdiv\u003e\n      \u003cp class=\"\n        font-size:600\n        font-weight:700\n        line-height:200\n        margin-bottom:400\n      \"\u003e\n        Disability support workers who love what you love\n      \u003c/p\u003e\n      \u003ca\n        class=\"\n          background-color:blue-900\n          border-color:neutral-700\n          color:neutral-0\n          display:inline-block\n          padding-horizontal:400\n          padding-vertical:300\n          transition-duration:200\n          transition-easing:ease\n          transition-property:all\n          :hocus--background-color:blue-600\n          :hocus--scale:105\n          @mq-768--padding-horizontal:500\n          @mq-768--padding-vertical:400\n        \"\n        href=\"#\"\n      \u003e\n        Find your connection\n      \u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**You can see a live version here: https://codepen.io/stowball/full/WBoxOj**\n\n---\n\n## Why Hucssley?\n\nWith [so many CSS utility libraries](https://css-tricks.com/need-css-utility-library/) already in existence, and with Tailwind being an extremely popular, close alternative, why does Hucssley exist and why might you want to use it?\n\nWell, we wanted to [solve a lot of the problems](/rethinking-css.md) developers have with “normal” CSS and the ones Adam Silver poses in [The problem with atomic CSS](https://adamsilver.io/articles/the-problem-with-atomic-css/).\n\nFirstly, most utility libraries are hard to read, and more importantly hard to learn. They often use an obtuse, inconsistent syntax which has you reaching for the docs more often than you should. With Hucssley, the focus has been: “if you know CSS properties, you know Hucssley”.\n\nAlso, by using Sass under the hood, it supports an extremely deep pool of developers who already know the language and its wealth of features, and has great documentation and resources to boot.\n\nWith other libraries, while the initial implementation period is very promising, it’s when you hit the harder, more uncommon issues that you start to struggle. Out-of-the-box, Hucssley wants to provide you with all of the tools to build any UI regardless of the condition. This means we support every type of media query, theming, pseudo selectors, user interaction states (`:hover`, `:focus-visible`), UI states (`is-expanded`, `is-loading`), and any kind of parent selector (for use with things like browser detection libraries, or element query polyfills).\n\nLastly, Hucssley tries to be extremely flexible and easily configurable. While it provides many more classes and features than other libraries OOTB, if it doesn’t provide something you need, it’s hopefully very easy to build what you need in a consistent, Hucssley manner.\n\nSo with you now intrigued, read the rest of the docs, have a play, and fall in love with building UI…\n\n---\n\n## Installation\n\nWhile Hucssley is still in early development, it should be installed via [npm](https://www.npmjs.com/package/hucssley/v/1.0.0-beta.4) using the latest beta tag, for example:\n\n```sh\nnpm install hucssley@1.0.0-beta.4\n```\n\nor\n\n```sh\nyarn add hucssley@1.0.0-beta.4\n```\n\nIf you want to use Hucssley as it comes, then it’s as simple as:\n\n```scss\n@import \"path_to_node_modules/hucssley/src/index\";\n```\n\nHowever, if you want to customize Hucssley, we recommend taking this approach:\n\n```scss\n@import \"path_to_node_modules/hucssley/src/helpers\";\n\n@import \"path_to_node_modules/hucssley/src/variables/global/index\";\n// @import \"custom/variables/global/index\";\n\n@import \"path_to_node_modules/hucssley/src/variables/classes/index\";\n// @import \"custom/variables/classes/index\";\n// set class overrides before if you don’t need access to the defaults \u0026 want changes to flow through referenced vars\n\n@import \"path_to_node_modules/hucssley/src/variables/reset/index\";\n// @import \"custom/variables/reset/index\";\n\n@import \"path_to_node_modules/hucssley/src/styles\";\n// @import \"custom/classes/index\";\n```\n\n\n*Note: If you are using webpack, you can leverage [its advanced mechanism to resolve files](https://github.com/webpack-contrib/sass-loader#imports) by replacing the path to `node_modules` with a `~`, like so:*\n\n```scss\n@import \"~hucssley/src/index\";\n```\n\n## Modules\n\nThe following core modules are available for all classes: `base`, `focus`, `hover`, `hocus`, `state`, `group-hover`, `group-state`, `reduced-motion`, `print` and `responsive`.\n\nYou can also use modules to generate pseudo and custom parent classes. Please read [Understanding class configuration: Modules](/hucssley-classes.md#modules) and [Generic classes: `hu-classes`](#generic-classes-hu-classes) for more information.\n\n### Base: `base`\n\nBase classes in Hucssley roughly equate to a standard version of a CSS property and value:\n\nThis declaration:\n\n```css\nalign-items: flex-end;\n```\n\nwould be available as the following base class:\n\n```css\n.align-items:flex-end\n```\n\nThe property becomes the class name preceding the `:` and the value follows it.\n\nSome classes deviate by default though:\n\n```css\nanimation-count -\u003e animation-iteration-count\nanimation-easing -\u003e animation-timing-function\nanimation-mode -\u003e animation-fill-mode\nanimation-state -\u003e animation-play-state\ncontent -\u003e ::[pseudo]-content\nmomentum-scrolling -\u003e -webkit-overflow-scrolling\npos-[bottom,left,right,top] -\u003e bottom,left,right,top\nrotate -\u003e transform: rotate\nscale -\u003e transform: scale\nsize -\u003e height \u0026 width\nsvg-fill-color -\u003e fill\nsvg-fill-rule -\u003e fill-rule\nsvg-stroke-color -\u003e stroke\ntransition-easing -\u003e transition-timing-function\ntranslate-x -\u003e transform: translateX\ntranslate-y -\u003e transform: translateY\n```\n\nAll of the above aliases – and every other class alias – can be changed to your liking, however. Please read [Understanding class configuration: Aliases](/hucssley-classes.md#aliases) for more details.\n\n*Note: If a global namespace has been configured, it will always precede the base class name.*\n\n#### Non-parent modules: `visited`, `focus`, `hocus`, `hover`, `active`, `print`, `reduced-motion`, `responsive`\n\nWhen you want to use class names scoped to “non-parent” modules, it follows a pattern of `[module-name][-module-variant]?--[base-class]`, for instance:\n\n```css\n.@mq-768--align-items:center\n.:hocus--color:neutral-1000\n.@print--flex-direction:column\n```\n\nIn the above example, `:hocus` is a shortcut module for `:hover, :focus`, and `@mq-768` is for a `(min-width: 768px)` media query.\n\nThe `:active`, `:focus`, `:hover` and `:visited` pseudo-classes are automatically ordered to the [LVHA system](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) to ensure links and buttons are styled predictably.\n\n### State modules: `state`\n\nState modules allow you to change the UI based on a particular state, and follows the pattern `[state-name]--[base-class]`:\n\n```css\n.is-expanded--visibility:visible\n.is-disabled--opacity:30\n```\n\nFor state classes to become active, you need to apply the raw state name as an additional class on the element (often via JavaScript):\n\n```diff\n\u003cdiv class=\"\n  display:none\n  is-open--display:block\n+ is-open\n\"\u003e\u003c/div\u003e\n```\n\n### Group modules: `group-visited`, `group-focus`, `group-hover`, `group-hocus`, `group-state`\n\nWith groups, you can style child elements when interacting with a generic parent element (`:focus` and/or `:hover`), or when it’s in a particular UI state. Their syntax is `group[group-type]__[base-class]`:\n\n```\n.group:visited__color:indigo-800\n.group:focus__scale:110\n.group:hover__scale:110\n.group:hocus__scale:110 // both :focus and :hover\n.group-is-selected__background-color:blue-300\n```\n\nFor `group` classes to take effect, a parent has to be given the raw `.group` class, and raw state class if applicable:\n\n```diff\n\u003chtml\u003e\n  …\n  \u003cdiv class=\"\n    group\n+   is-selected\n  \"\u003e\n    \u003cul class=\"\n      group:hover__scale:110\n      group-is-selected__background-color:blue-300\n    \"\u003e\u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/html\u003e\n```\n\nBe careful when using groups, because they will affect all `.group…__` children. A child `.group` does not reset the actions of a parent `.group`, so you could end up with unexpected behaviour. It’s recommended to use groups on ancestors that are near to leaf nodes.\n\n### Custom parent modules\n\nSimilar to groups, Hucssley allows you to use any kind of parent selector to affect and style children. However, unlike groups, custom parent selectors allow you to explicitly quarantine and contain these styling side effects.\n\nPossible use cases are for a browser detection library that may add `browser-mobile`, `browser-ie` etc to `\u003chtml\u003e`, or an element/container queries alternative like [eqio](https://github.com/stowball/eqio), that adds classes such as `eqio-\u003e400` to a parent element, and would be targetable with `eqio-\u003e400__flex-direction:row` for example.\n\nTheir syntax is `[parent-name]__[base-class]`:\n\n```html\n\u003chtml class=\"browser-mobile\"\u003e\n  …\n  \u003cdiv class=\"browser-mobile__font-size:700\"\u003e\n    …\n  \u003c/div\u003e\n\u003c/html\u003e\n```\n\nIn the above example, we used a `browser-mobile__font-size:700` class name, which, while not included in Hucssley by default, hopefully illustrates how it can be used to style elements by any library or approach that adds a class like `browser-mobile` to a parent element.\n\nFor more information, please read [Parent classes](#parent-classes-hu-parent-classes).\n\n### Combining modules: `responsive` and `visited`, `focus`, `hover`, `hocus`, `active`, `state`, `group-visited`, `group-focus`, `group-hover`, `group-hocus`, `group-state`\n\nWhen a particular class is configured to use the `responsive` module, it will also output `focus`, `hover`, `hocus`, `state`, `group-visited`, `group-focus`, `group-hover`, `group-hocus` and `group-state` classes should they have also been configured.\n\nHere the syntax is:\n\n* `@mq-[responsive-scale]:visited--[base-class]` for `visited`\n* `@mq-[responsive-scale]:focus--[base-class]` for `focus`\n* `@mq-[responsive-scale]:hover--[base-class]` for `hover`\n* `@mq-[responsive-scale]:hocus--[base-class]` for `hocus`\n* `@mq-[responsive-scale]:active--[base-class]` for `active`\n* `@mq-[responsive-scale]-[state-name]--[base-class]` for `state`s\n* `group:visited__@mq-[responsive-scale]--[base-class]` for `group-visited`\n* `group:focus__@mq-[responsive-scale]--[base-class]` for `group-focus`\n* `group:hover__@mq-[responsive-scale]--[base-class]` for `group-hover`\n* `group:hocus__@mq-[responsive-scale]--[base-class]` for `group-hocus`\n* `group-[state-name]__@mq-[responsive-scale]--[base-class]` for `group-state`\n\nWhich results in:\n\n```css\n.@mq-480:active--color:neutral-1000\n.@mq-600-is-expanded--display:flex\n.group:hover__@mq-768--display:block\n.group-is-collapsed__@mq-1024--height:0\n```\n\n## Scales\n\nWhere it makes sense, and compared with other libraries, Hucssley favours a millennial scale (`0` - `1000`) to represent values instead of “names” like `xxl`, `mama-bear` etc. This can of course be completely customized.\n\nBy default, the following classes use a millennial scale:\n\n* `background-color`\n* `border-color`\n* `border-radius`\n* `border-width`\n* `color`\n* `font-size`\n* `letter-spacing`\n* `line-height`\n* `margin`\n* `padding`\n* `transition-delay`\n* `transition-duration`\n\nWhile others, like `opacity` and `scale` use values more relevant to your conceptual model.\n\n## Configuration\n\nTo override the default configuration in Hucssley, you’ll need to understand the basic syntax of Sass [variables](https://sass-lang.com/documentation/variables), [lists](https://sass-lang.com/documentation/values/lists) and [maps](https://sass-lang.com/documentation/values/maps).\n\nHucssley’s configuration is split in to 3 sections: `reset`, `global` and `classes`.\n\n* **Reset** configuration uses plain variables to customize “generic” styles like whether `box-sizing: border-box` should be used by default.\n* **Global** configuration mostly uses maps to handle things like the default media queries, colors, spacings, UI states and themes.\n* **Classes** provides list and map variables to adjust the modules, and values for each class individually. Some classes (like those which deal with color) inherit from the same base variable by default, so only 1 change is required to affect all `border-color`, `background-color` and `color` classes. All classes can be generated at the individual modules described above.\n\nAs detailed in the [Installation](#installation) section, there is a preferred way of organizing any configuration overrides.\n\n### Configuration helpers\n\nHucssley provides several functions that can assist you with modifying the existing configuration or configuring custom classes:\n\n#### `hu-append` and `hu-prepend`\n\n```scss\n@function hu-append($source, $target);\n\nhu-append((a, b), (c));\n// -\u003e (a, b, c)\n```\n\nWill append the `$target` list or map to the `$source` list or map.\n\n```scss\n@function hu-prepend($source, $target);\n\nhu-prepend((a, b), (c));\n// -\u003e (c, a, b)\n```\n\nWill prepend the `$target` list or map to the `$source` list or map.\n\nWith both of the above functions, they have to be of the same type. When used with maps, they actually perform a `map-merge`, so existing keys in `$source` will also be overwritten with `$target`'s, should they exist there.\n\n#### `hu-get`\n\n```scss\n@function hu-get($list-or-map, $path, $stack-trace-name?);\n\nhu-get($hu-colors, neutral 1000);\n// -\u003e #1a1a1a\n\nhu-get($hu-font-weight-types, 700);\n// -\u003e 700\n```\n\nGets the value at a specific path within a map or list.\n\n#### `hu-em` and `hu-rem`\n\n```scss\n@function hu-em($target, $context: 16);\n\nhu-em(20px);\n// -\u003e 1.25em\n```\n\nWill convert a target pixel value to its `em` equivalent.\n\n```scss\n@function hu-rem($target, $context: 16);\n\nhu-rem(24px);\n// -\u003e 1.5rem\n```\n\nWill convert a target pixel value to its `rem` equivalent.\n\n#### `hu-tint` and `hu-shade`\n\n```scss\n@function hu-tint($color, $percentage);\n\nhu-tint(#361110, 40);\n// -\u003e #be3c38;\n```\n\nWill mix the specified `$color` with a `$percentage` of white.\n\n```scss\n@function hu-shade($color, $percentage);\n\nhu-shade(#361110, 40);\n// -\u003e #200a0a;\n```\n\nWill mix the specified `$color` with a `$percentage` of black.\n\n### Reset\n\nHere is a list of variables and default values that are available to customize the CSS reset:\n\n```scss\n$hu-reset: true;\n$hu-reset-box-sizing: border-box;\n$hu-reset-html-background-color: #fff;\n$hu-reset-html-color: null;\n$hu-reset-html-font-family: sans-serif;\n$hu-reset-html-font-size: $hu-f-rem-context;\n$hu-reset-html-font-smoothing: true;\n$hu-reset-html-line-height: 1.25;\n$hu-reset-html-overflow-x: null;\n$hu-reset-html-overflow-y: null;\n$hu-reset-html-text-rendering: null;\n$hu-reset-img-responsive: false;\n$hu-reset-input-placeholder-color: #767676;\n$hu-reset-remove-number-input-spinners: true;\n$hu-reset-text-input-appearance: textfield;\n```\n\nHopefully the variables are self explanatory, but if not, please [review the source code](/src/reset/_index.scss) to see how they affect the reset styles.\n\nIf you wish to disable default values, you can simply set the appropriate variable to `null`.\n\nYou can also use [`hu-get`](#hu-get) to set the variables to values defined in other list and map variables, for example:\n\n```scss\n$hu-reset-html-color: hu-get($hu-colors, \"neutral\" 800);\n```\n\n### Global\n\n#### Colors: `$hu-colors`\n\nTo get you started, Hucssley provides a generous palette of colors in the spectrum at multiple scales, as well as for keywords like `inherit` and `transparent`:\n\n```scss\n$hu-colors: (\n  \"neutral\": (\n    0: #ffffff,\n    …\n    500: #858585,\n    …\n    1000: #131313,\n  ),\n  \"red\": (\n    0: #fdf2f1,\n    …\n    500: #de3f35,\n    …\n    1000: #1f0705,\n  ),\n  \"orange\": (\n    0: #fef7f2,\n    …\n    500: #f58949,\n    …\n    1000: #271002,\n  ),\n  \"yellow\": (\n    0: #fefaeb,\n    …\n    500: #f4cb39,\n    …\n    1000: #251d02,\n  ),\n  \"green\": (\n    0: #f0fcf5,\n    …\n    500: #2dd86c,\n    …\n    1000: #051d0e,\n  ),\n  \"blue\": (\n    0: #f0f7fc,\n    …\n    500: #2d8dd8,\n    …\n    1000: #05121d,\n  ),\n  \"indigo\": (\n    0: #f3f0fc,\n    …\n    500: #5a2dd8,\n    …\n    1000: #0b051d,\n  ),\n  \"violet\": (\n    0: #fcf0fb,\n    …\n    500: #d82dc7,\n    …\n    1000: #1d051a,\n  ),\n);\n```\n\n**You can see the rendered palette here: https://codepen.io/stowball/full/JqbGvK**\n\nTo customize the palette, you can either `hu-append` or `hu-prepend` other maps to complement the existing, or start fresh by re-assigning `$hu-colors` to a new map of colors entirely.\n\nWe recommend also `hu-append`ing `$hu-colors-keywords` to your brand new palette to ensure you can use classes like `background-color:transparent` and `color:inherit`;\n\nHere is an example of setting a completely new palette:\n\n```scss\n$hu-colors: hu-append($hu-colors-keywords, (\n  neutral: (\n    0: #fff,\n    100: #fafbfd,\n    200: #f9fafc,\n    300: #f1f4f8,\n    400: #f1f1f1,\n    500: #e0e1e2,\n    600: #aeaeae,\n    700: #888,\n    800: #626262,\n    900: #495b60,\n    1000: #140a01,\n  ),\n  blue: (\n    100: #f3f9ff,\n    300: #cff5fa,\n    400: #afeff7,\n    600: #00c2da,\n    1000: #003453,\n  ),\n  yellow: (\n    200: #fdf8c2,\n    300: #fbf5ac,\n  ),\n  green: (\n    1000: #17653b,\n  ),\n  red: (\n    100: #fffdfc,\n    1000: #b40b00,\n  ),\n));\n```\n\n#### Media queries: `$hu-media-queries`\n\nOut-of-the-box, Hucssley provides the following 5 breakpoint values, with all being output for every `responsive` class name. It can be modified or replaced entirely to suit your project.\n\n```scss\n$hu-media-queries: (\n  480: hu-em(480),\n  600: hu-em(600),\n  768: hu-em(768),\n  1024: hu-em(1024),\n  1280: hu-em(1280),\n);\n```\n\nIf the value of an `$hu-media-queries` key is a number, it will compile it to a `(min-width: [value])` media query.\n\nIf, however, you provide a map with any of the following keys: `min-height`, `max-height`, `min-width`, `max-width`, and `orientation`, then appropriate `(min-height)`, `(max-height)`, `(min-width)`, `(max-width)` and `(orientation)` media queries will be output.\n\nAnother special `other` key is also supported, which, when supplied with a map of key/value pairs will also output those as media query conditions, which will allow you to target every kind of [feature](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features).\n\nIf multiple keys exist, each media query condition will be combined with the `and` operator.\n\nTo demonstrate:\n\n```scss\n$hu-media-queries: (\n  600: hu-em(600),\n  min-h-200: (min-height: hu-em(200)),\n  max-h-400: (max-height: hu-em(400)),\n  min-w-300: (min-width: hu-em(300)),\n  max-w-500: (max-width: hu-em(500)),\n  min-w-300-max-w-500: (min-width: hu-em(300), max-width: hu-em(500)),\n  landscape: (orientation: landscape),\n  coarse: (other: (pointer: coarse)),\n  min-res-200: (other: (min-resolution: 200dpi)),\n  all: (\n    min-height: hu-em(200),\n    max-height: hu-em(400),\n    min-width: hu-em(300),\n    max-width: hu-em(500),\n    orientation: landscape,\n    other: (pointer: coarse, min-resolution: 200dpi)\n  ),\n);\n```\n\nwould generate the following `@mq-` classes:\n\n```css\n@media (min-width: 37.5em) {\n  .@mq-600--… { … }\n}\n\n@media (min-height: 12.5em) {\n  .@mq-min-h-200--… { … }\n}\n\n@media (max-height: 25em) {\n  .@mq-max-h-400--… { … }\n}\n\n@media (min-width: 18.75em) {\n  .@mq-min-w-300--… { … }\n}\n\n@media (max-width: 31.25em) {\n  .@mq-max-w-500--… { … }\n}\n\n@media (min-width: 18.75em) and (max-width: 31.25em) {\n  .@mq-min-w-300-max-w-500--… { … }\n}\n\n@media (orientation: landscape) {\n  .@mq-landscape--… { … }\n}\n\n@media (pointer: coarse) {\n  .@mq-coarse--… { … }\n}\n\n@media (min-resolution: 200dpi) {\n  .@mq-min-res-200--… { … }\n}\n\n@media (min-height: 12.5em) and (max-height: 25em) and (min-width: 18.75em) and (max-width: 31.25em) and (orientation: landscape) and (pointer: coarse) and (min-resolution: 200dpi) {\n  .@mq-all--… { … }\n}\n```\n\nNotice how, apart from the `@mq-` prefix, Hucssley does not dictate the media query class name format, so, should you wish to use ranges like `small` or `medium`, or device types like `tablet`, or `desktop`, it’s entirely up to you.\n\n#### UI states: `$hu-states`\n\nOut-of-the-box, Hucssley provides the following 10 UI state values, with all being output for every `state` and `group-state` class name. It can be modified or replaced entirely to suit your project.\n\n```scss\n$hu-states: (\n  is-closed,\n  is-collapsed,\n  is-disabled,\n  is-expanded,\n  is-hidden,\n  is-loading,\n  is-open,\n  is-pressed,\n  is-selected,\n  is-visible,\n);\n```\n\n*Note: UI states generated by class names are not sufficient enough to produce fully accessible interfaces, so please ensure you also implement the correct [ARIA states and properties](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties) where necessary.*\n\n#### Spacing scale: `$hu-spacing-scale`\n\nBy default, `margin` and `padding` classes are generated from the spacing scale defined in `$hu-spacing-scale`.\n\n```scss\n$hu-spacing-scale: (\n  0: 0,\n  100: hu-rem(2),\n  200: hu-rem(4),\n  300: hu-rem(8),\n  400: hu-rem(16),\n  500: hu-rem(24),\n  600: hu-rem(32),\n  700: hu-rem(48),\n  800: hu-rem(64),\n  auto: auto,\n);\n```\n\nYou can easily amend or override any of these values to suit your project.\n\n#### Borders: `$hu-border-modules`, `$hu-border-sides` and `$hu-border-types`\n\nBy default, `.border-color`, `.border-style` and `.border-width` classes use 2 or 3 of the global border variables to control which modules, sides and colors they’re output at.\n\n```scss\n$hu-border-modules: (base);\n\n$hu-border-sides: (\n  border: border,\n  border-bottom: border-bottom,\n  border-left: border-left,\n  border-right: border-right,\n  border-top: border-top,\n  border-horizontal: (border-left, border-right),\n  border-vertical: (border-bottom, border-top),\n);\n\n$hu-border-types: $hu-colors;\n```\n\nIn conjunction with variables specific to each class name, classes like the following are generated:\n\n```css\n.border-color:neutral-0\n.border-vertical-color:blue-600\n.border-bottom-style:none\n.border-horizontal-width:200\n```\n\n#### Controlling focus: `$hu-focus-parent` and `$hu-focus-pseudo`\n\nBy default, the `focus`, `group-focus`, `hocus` and `group-hocus` modules generate classes which use a `:focus` pseudo-class. This can be customized, should you wish to use `:focus-visible` or even in conjunction with a polyfill.\n\n```scss\n$hu-focus-pseudo: \":focus-visible\";\n\n/* -\u003e\n.:focus--[class-name]:focus-visible,\n.:hocus--[class-name]:focus-visible {\n  // declarations\n}\n\n.group:focus-visible group:focus__[class-name],\n.group:focus-visible group:hocus__[class-name] {\n  // declarations\n}\n*/\n```\n\nor\n\n```scss\n$hu-focus-parent: \".js-focus-visible\";\n$hu-focus-pseudo: \":focus:not(.focus-visible)\";\n\n/* -\u003e\n.js-focus-visible .:focus--[class-name]:focus:not(.focus-visible),\n.js-focus-visible .:hocus--[class-name]:focus:not(.focus-visible) {\n  // declarations\n}\n\n.js-focus-visible .group:focus:not(.focus-visible) group:focus__[class-name],\n.js-focus-visible .group:focus:not(.focus-visible) group:hocus__[class-name] {\n  // declarations\n}\n*/\n```\n\n#### Themes: `$hu-themes`\n\nAs well as the standard `$hu-colors`, `background-color`, `border-color` and `color` classes can also be generated for theming your application based on the key/vaue pairs in this map.\n\nBy default, no themes are provided, but making your own is easy:\n\n```scss\n$hu-themes: (\n  broncos: (\n    primary: #6c1d45,\n    secondary: #9e2b64,\n    highlight: #f8cc0d,\n  ),\n  knights: (\n    primary: #003b73,\n    secondary: #1d54a6,\n    highlight: #e82c2a,\n  ),\n  sharks: (\n    primary: #1f7eb2,\n    secondary: #27a3e6,\n    highlight: #95d1f2,\n  ),\n);\n```\n\nThis would allow you to theme your entire application simply by changing a single, parent level `theme:[theme-name]` class by utilizing all the generated classes, like:\n\n```css\n.theme:broncos .theme__background-color:primary {\n  background-color: #6c1d45;\n}\n\n.theme:knights .theme__color:highlight {\n  color: #e82c2a;\n}\n\n.theme:sharks .theme__border-color:secondary {\n  border-color: #27a3e6;\n}\n```\n\n#### Namespace: `$hu-namespace`\n\nAs mentioned earlier, Hucssley provides you the opportunity to namespace the class names generated, to help ensure there’s no conflict or pollution with other possible frameworks.\n\n```scss\n$hu-namespace: `hu-`;\n\n/* -\u003e\n.hu-align-content:center {}\n…\n.@mq-480--hu-flex-direction:column {}\n…\n.group-is-open__hu-display:flex {}\n```\n\n#### Use important: `$hu-use-important`\n\nDetermines whether all CSS declarations (including those in the [CSS reset](#reset)) are suffixed with the `!important` rule. Default is `false`.\n\n```scss\n$hu-use-important: true;\n\n/* -\u003e\n.align-content:baseline {\n  align-content: baseline !important;\n}\n\n…\n\n.align-items:auto {\n  align-items: auto !important;\n}\n\n…\n*/\n```\n\n#### Pseudo prefix: `$hu-pseudo-prefix`\n\nTo support [Purgecss](https://purgecss.com) v1, you can choose to add a prefix to any top-level pseudo classes, otherwise unused pseudo classes won’t be purged.\n\n```scss\n\n$hu-pseudo-prefix: \"\u0026\";\n\n/* -\u003e\n\n.\u0026:hover--background-color:inherit:hover {\n  background-color: inherit;\n}\n```\n\n*Note: Pseudo classes which are not top-level, such as `group:hover` are unaffected by this variable.*\n\n#### Debug: `$hu-debug`\n\nWith Hucssley generating every class for you, you may encounter scenarios where you need to debug the output when using [webpack’s style-loader](https://webpack.js.org/loaders/style-loader) which outputs the CSS within a `\u003cstyle\u003e` tag in the `\u003chead\u003e`.\n\nBy setting `$hu-debug: true;` before `@import \"path_to_node_modules/hucssley/src/styles\";` all of the CSS will be printed to the screen, above your UI for you to review and debug.\n\n### Classes\n\nEvery class in Hucssley can be completely customized to individually change the properties, values and modules used.\n\n**For details of all the classes provided by default and their configuration, please read [Hucssley classes](/hucssley-classes.md).**\n\n---\n\n## Creating custom classes\n\nWhile Hucssley provides an abundance of classes out-of-the-box, there will absolutely be times where you need to create your own to achieve your desired UI, which is hopefully straight-forward to achieve.\n\n### Customizing “placeholder” classes\n\nSome of the default classes in Hucssley are merely provided as empty placeholders, because their usage is too specific to be generically useful for all projects. These placeholders help to reduce some of the “ceremony” needed with creating completely custom classes.\n\nA good example of this is for (box) shadows. By overriding the empty `$hu-box-shadow-modules` and `$hu-box-shadow-types` variables, developers can easily output `box-shadow`s appropriate for their project.\n\nThe following snippet also demonstrates how you can use [configuration helper](#configuration-helpers) methods within your definitions:\n\n```scss\n$hu-box-shadow-modules: (base);\n\n$hu-box-shadow-types: (\n  100: 0 hu-rem(2) hu-rem(10) rgba(hu-get($hu-colors, neutral 1000), 0.1),\n  200: 0 hu-rem(4) hu-rem(12) rgba(hu-get($hu-colors, neutral 1000), 0.2),\n);\n```\n\nwill generate:\n\n```css\n.box-shadow:100 {\n  box-shadow: 0 0.125rem 0.625rem rgba(26, 26, 26, 0.1);\n}\n\n.box-shadow:200 {\n  box-shadow: 0 0.25rem 0.75rem rgba(26, 26, 26, 0.2);\n}\n```\n\n### Creating new, “basic” classes\n\nFor the most common needs of creating new classes, Hucssley provides 3 easy ways of creating custom “generic”, pseudo and parent utility classes.\n\nWhile the following examples all use `$-modules` and `$-types` variables that are provided by Hucssley, if creating your own, fully custom classes, we recommend setting them up in a way to cater for any complexity as your project grows, thus define the variables similarly to how the defaults are done. For examples and to learn more, please read [Hucssley classes](/hucssley-classes.md).\n\n#### Generic classes: `hu-classes`\n\nThis mixin generates all of the normal classes for a specific property, modules and types. It’s what Hucssley itself uses for 95% of the provided classes.\n\n```\n@mixin hu-classes($property, $modules, $types?);\n```\n\nIt takes a `$property`, which can be either a CSS property or a map, a list or map of `$modules` and an optional list or map of `$types`. It also accepts `@content` if no `$types` are supplied.\n\n*Note: This mixin is a wrapper around six other mixins, `hu-generic-classes()` and `hu-responsive-classes()`, `hu-pseudo-generic-classes()`, `hu-pseudo-responsive-classes()`, `hu-parent-generic-classes()` and `hu-parent-responsive-classes()\n`.*\n\n##### Basic\n\n```scss\n@include hu-classes(align-content, $hu-align-content-modules, $hu-align-content-types);\n\n/* -\u003e\n.align-content:baseline {\n  align-content: baseline;\n}\n\n.align-content:center {\n  align-content: center;\n}\n\n…\n\n@media (min-width: 22.5em) {\n  .@mq-480--align-content:baseline {\n    align-content: baseline;\n  }\n\n  .@mq-480--align-content:center {\n    align-content: center;\n  }\n}\n\n…\n*/\n```\n\n##### Custom class name\n\nBy passing a map to `$property`, the map’s key becomes the core class name, and the map’s value becomes the CSS property.\n\n```scss\n@include hu-classes((transition-easing: transition-timing-function), $hu-transition-easing-modules, $hu-transition-easing-types);\n\n/* -\u003e\n.transition-easing:ease {\n  transition-timing-function: ease;\n}\n\n.transition-easing:ease-in {\n  transition-timing-function: ease-in;\n}\n\n…\n\n@media (min-width: 22.5em) {\n  .is-selected.is-selected--transition-easing:ease {\n    transition-timing-function: ease;\n  }\n\n  .is-selected.is-selected--transition-easing:ease-in {\n    transition-timing-function: ease-in;\n  }\n}\n\n…\n*/\n```\n\n##### Unique class with multiple declarations\n\nBy not proving a `$type` and passing in a `@content` block, you can create “one off” classes with multiple, static declarations.\n\n```scss\n@include hu-classes(font-smoothing, $hu-font-smoothing-modules) {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n/* -\u003e\n.font-smoothing {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n@media (min-width: 22.5em) {\n  .@mq-480--font-smoothing {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n}\n\n…\n*/\n```\n\nYou could also use this technique to add complex `@supports` feature queries:\n\n```scss\n@include hu-classes(\"@supports-mix-blend-mode:multiply\", (base)) {\n  @supports (mix-blend-mode: multiply) {\n    mix-blend-mode: multiply;\n    opacity: 1;\n  }\n}\n\n/* -\u003e\n@supports (mix-blend-mode: multiply) {\n  .@supports-mix-blend-mode:multiply {\n    mix-blend-mode: multiply;\n    opacity: 1;\n  }\n}\n*/\n```\n\nOf course, just because you can’t provide a `$type` argument to the mixin, it doesn’t mean you’re restricted from creating multiple classes, since you can easily wrap it in its own `@each` loop:\n\n```scss\n// if $types was a map, also extract the $value variable and use that in the mixin's @content\n@each $type in $hu-mix-blend-mode-types {\n  @include hu-classes(\"@supports-mix-blend-mode:#{$type}\", $hu-mix-blend-mode-modules) {\n    @supports (mix-blend-mode: #{$type}) {\n      mix-blend-mode: $type;\n    }\n  }\n}\n\n/* -\u003e\n@supports (mix-blend-mode: color) {\n  .@supports-mix-blend-mode:color {\n    mix-blend-mode: color;\n  }\n}\n\n@supports (mix-blend-mode: color-burn) {\n  .@supports-mix-blend-mode:color-burn {\n    mix-blend-mode: color-burn;\n  }\n}\n\n…\n```\n\nIf your custom utilities also needs to support the `responsive` module, then you won’t be able to use the above method exactly. You can change `@include hu-classes` to `@include hu-generic-classes`, and also manually create the responsive classes using `hu-responsive()` as described in [Writing custom class logic](#writing-the-class-logic).\n\n##### Pseudo classes\n\nOne benefit Hucssley has over other, similar libraries is that there is a defined method for easily creating pseudo classes.\n\nIf, as described in [Understanding class configuration: Advanced modules](/hucssley-classes.md#advanced-modules), you pass `$modules` as a map with a `pseudos` key, pseudo selector classes will also be generated for the complete list of modules.\n\nFor example:\n\n```scss\n$hu-display-modules: (\n  core: $hu-display-modules,\n  pseudos: (\"::before\", \":first-child\"),\n);\n\n@include hu-classes(display, $hu-display-modules, $hu-display-types);\n\n/* -\u003e\n…\n\n.::before--display:block::before {\n  display: block;\n}\n\n.:first-child--display:block:first-child {\n  display: block;\n}\n\n…\n\n@media (min-width: 22.5em) {\n  .@mq-480::before--display:block::before {\n    display: block;\n  }\n\n  .@mq-480:first-child--display:block:first-child {\n    display: block;\n  }\n}\n\n…\n*/\n```\n\n##### Parent classes\n\nAnother benefit of Hucssley is that you can easily create custom parent classes, such as being able to respond to a `has-js` class. It behaves similarly to the above, but you instead provide a `parents` key with a list of one or more parent selectors you want to generate classes for.\n\n```scss\n$hu-display-modules: (\n  core: $hu-display-modules,\n  parents: (\"has-js\"),\n);\n\n@include hu-classes(display, $hu-display-modules, $hu-display-types);\n\n/* -\u003e\n…\n\n.has-js .has-js__display:block {\n  display: block;\n}\n\n.has-js .has-js__display:flex {\n  display: flex;\n}\n\n…\n\n.has-js .is-expanded.has-js__is-expanded--display:block {\n  display: block;\n}\n\n.has-js .is-expanded.has-js__is-expanded--display:flex {\n  display: flex;\n}\n\n…\n*/\n```\n\n#### Pseudo classes: `hu-pseudo-classes`\n\nWhile `hu-classes` will be suitable for most use cases, should you need, you can also explicitly create pseudo classes with the `hu-pseudo-classes()` mixin. It behaves similarly to `hu-classes()`, but you also need to pass in a list of one or more pseudo selectors you want to generate classes for.\n\n```\n@mixin hu-pseudo-classes($property, $pseudos, $modules, $types?);\n```\n\nThis mixin is a wrapper around two other mixins, `hu-pseudo-generic-classes()` and `hu-pseudo-responsive-classes()`, which take exactly the same arguments.\n\n```scss\n@include hu-pseudo-classes(display, (\"::before\", \":first-child\"), $hu-display-modules, $hu-display-types);\n\n/* -\u003e\n.::before--display:block::before {\n  display: block;\n}\n\n.:first-child--display:block:first-child {\n  display: block;\n}\n\n.::before--display:flex::before {\n  display: flex;\n}\n\n.:first-child--display:flex:first-child {\n  display: flex;\n}\n\n…\n\n@media (min-width: 22.5em) {\n  .@mq-480::before--display:block::before {\n    display: block;\n  }\n\n  .@mq-480:first-child--display:block:first-child {\n    display: block;\n  }\n\n  .@mq-480::before--display:flex::before {\n    display: flex;\n  }\n\n  .@mq-480:first-child--display:flex:first-child {\n    display: flex;\n  }\n}\n\n…\n*/\n```\n\nAs with `$hu-classes`, you can customize the class name by passing a map to `$property`, and you can create unique classes with multiple declarations by not proving a `$type` and passing in a `@content` block.\n\n#### Parent classes: `hu-parent-classes`\n\nWhile `hu-classes` will be suitable for most use cases, should you need, you can also explicitly create custom parent classes with the `hu-parent-classes()` mixin. It behaves similarly to `hu-pseudo-classes()`, but you instead pass in a list of one or more parent elements you want to generate classes for.\n\n*Note: `group-visited`, `group-focus`, `group-hover`, `group-hocus`, and `group-state`  modules are not used for custom parents.*\n\n```\n@mixin hu-parent-classes($property, $parents, $modules, $types?);\n```\n\nThis mixin is a wrapper around two other mixins, `hu-parent-generic-classes()` and `hu-parent-responsive-classes()`, which take exactly the same arguments.\n\n```scss\n@include hu-parent-classes(display, (has-js), $hu-display-modules, $hu-display-types);\n\n/* -\u003e\n.has-js .has-js__display:block {\n  display: block;\n}\n\n.has-js .has-js__:focus--display:block:focus {\n  display: flex;\n}\n\n…\n\n@media (min-width: 22.5em) {\n  .has-js .has-js__@mq-480--display:block {\n    display: block;\n  }\n\n  .has-js .is-selected.has-js__@mq-480-is-selected--display:block {\n    display: block;\n  }\n}\n\n…\n*/\n```\n\nAs with `$hu-classes`, you can customize the class name by passing a map to `$property`, and you can create unique classes with multiple declarations by not proving a `$type` and passing in a `@content` block.\n\n### Creating new, “more complex” classes\n\nShould you need to create classes that are more complex than what the 3 basic mixins described above can provide, you can follow a defined pattern for creating your own. However, before you do, it’s worth having a basic understanding of the functions and mixins you’ll use.\n\n#### Helper Functions\n\n##### `hu-class-name`\n\nThis function formats a class name to append `$hu-namespace` (if applicable), convert duplicate final strings (e.g. `color:transparent-transparent` to `color:transparent`) and escape special characters like `:`, `\u003c`, `\u003e` and `@`.\n\n```scss\n@function hu-class-name($class-name);\n\nhu-class-name(\"eqio-\u003c520-color:transparent-transparent\");\n// -\u003e hu-eqio-\\\u003c520-color\\:transparent\n```\n\n*Note: if your class name contains a special character, ensure you pass it as a quoted string.*\n\n##### `hu-format-modules`\n\nThis function removes duplicates and re-orders the list of modules in to the correct specificity order so you needn’t worry about this aspect of your CSS.\n\n```scss\n@function hu-format-modules($list-of-modules);\n\nhu-format-modules((state, print, responsive, state, base));\n// -\u003e (base, state, print, responsive)\n```\n\n##### `hu-important`\n\nOutputs `!important` when `$hu-use-important: true`.\n\n```scss\n@function hu-important();\n\nhu-important();\n// -\u003e !important\n```\n\n#### Mixins\n\n*Note: All of the following examples assume `$hu-namespace: \"hu-\"` has been set.*\n\n##### `hu-generic`\n\nGenerates the `base`, `focus`, `hover`, `hocus`, `state`, `group-visited`, `group-focus`, `group-hover`, `group-hocus`, `group-state`, `reduced-motion` and `print` module styles for a class (in that order) while also adding the correct specificity.\n\n```scss\n@mixin hu-generic($class-name, $one-or-multiple-modules);\n\n@include hu-generic(hu-class-name(\"display:block\"), (base, group-hover, print)) {\n  display: block #{hu-important()};\n}\n\n/* -\u003e\n.hu-display:block {\n  display: block;\n}\n\n.group:hover .group:hover__hu-display:block {\n  display: block;\n}\n\n@media print {\n  .@print--hu-display:block.print--hu-display:block.print--hu-display:block {\n    display: block;\n  }\n}\n*/\n```\n\n##### `hu-responsive`\n\nGenerates the responsive `base`, `state` and `group-state` module styles for a class (in that order).\n\n*Note: it does not generate the required media queries, as they need to be [created in a specific manner as described below](#writing-the-class-logic).*\n\n```scss\n@mixin hu-responsive($class-name, $one-or-multiple-modules, $media-query-scale);\n\n@include hu-responsive(hu-class-name(\"display:block\"), (base, responsive, state), medium) {\n  display: block #{hu-important()};\n}\n\n/* -\u003e\n.@mq-medium--hu-display:block {\n  display: block;\n}\n\n.is-selected.@mq-medium-is-selected--hu-display:block {\n  display: block;\n}\n*/\n```\n\n##### `hu-parent`\n\nGenerates the `base`, `focus`, `hover`, `hocus`, `state`, `reduced-motion` and `print` module styles for a parent selector class (in that order) while also adding the correct specificity.\n\n```scss\n@mixin hu-parent($class-name, $parent-selectors, $one-or-multiple-modules, $child-string-to-strip?);\n\n@include hu-parent(hu-class-name(\"display:block\"), (browser-edge, browser-ie), (base, hover)) {\n  display: block #{hu-important()};\n}\n\n/* -\u003e\n.browser-edge .browser-edge__hu-display:block {\n  display: block;\n}\n\n.browser-ie .browser-ie__hu-display:block {\n  display: block;\n}\n\n.browser-edge .browser-edge__:hover--hu-display:block:hover {\n  display: block;\n}\n\n.browser-ie .browser-ie__:hover--hu-display:block:hover {\n  display: block;\n}\n*/\n```\n\nThe optional `$child-string-to-strip` argument is to remove characters before the `__`, and can be useful if you create a generic child class that can respond to any parent selector, such as is used when generating themes.\n\n##### `hu-parent-responsive`\n\nGenerates the responsive `base` and `state` module styles for a parent selector class (in that order).\n\n*Note: it does not generate the required media queries, as they need to be [created in a specific manner as described below](#writing-the-class-logic).*\n\n```scss\n@mixin hu-parent-responsive($class-name, $parent-selectors, $one-or-multiple-modules, $media-query-scale, $child-string-to-strip?);\n\n@include hu-parent-responsive(hu-class-name(\"display:block\"), (browser-edge, browser-ie), (base, responsive), medium) {\n  display: block #{hu-important()};\n}\n\n/* -\u003e\n.browser-edge .browser-edge__@mq-medium--hu-display:block {\n  display: block;\n}\n\n.browser-ie .browser-ie__@mq-medium--hu-display:block {\n  display: block;\n}\n*/\n```\n\n##### `hu-pseudo`\n\nGenerates the `base`, `focus`, `hover`, `hocus`, `state`, `reduced-motion` and `print` module styles for a pseudo selector class (in that order) while also adding the correct specificity.\n\n```scss\n@mixin hu-pseudo($class-name, $pseudo-selectors, $one-or-multiple-modules);\n\n@include hu-pseudo(hu-class-name(\"display:block\"), (\"::before\", \":first-child\"), (base, reduced-motion)) {\n  display: block #{hu-important()};\n}\n\n/* -\u003e\n.::before--hu-display:block::before {\n  display: block;\n}\n\n.:first-child--hu-display:block:first-child {\n  display: block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .@reduced-motion::before--hu-display:block::before.@reduced-motion::before--hu-display:block::before.@reduced-motion::before--hu-display:block::before {\n    display: block;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .reduced-motion:first-child--hu-display:block:first-child.reduced-motion:first-child--hu-display:block:first-child.reduced-motion:first-child--hu-display:block:first-child {\n    display: block;\n  }\n}\n*/\n```\n\n##### `hu-pseudo-responsive`\n\nGenerates the responsive `base` and `state` module styles for a pseudo selector class (in that order).\n\n*Note: it does not generate the required media queries, as they need to be [created in a specific manner as described below](#writing-the-class-logic).*\n\n```scss\n@mixin hu-pseudo-responsive($class-name, $pseudo-selectors, $one-or-multiple-modules, $media-query-scale);\n\n@include hu-pseudo-responsive(hu-class-name(\"display:block\"), (\"::before\", \":first-child\"), (base, responsive), medium) {\n  display: block #{hu-important()};\n}\n\n/* -\u003e\n.@mq-medium::before--display:block::before {\n  display: block;\n}\n\n.@mq-medium:first-child--display:block:first-child {\n  display: block;\n}\n*/\n```\n\nNow we have a basic understanding of the functions and mixins used to create classes, we can follow Hucssley’s approach to create our own.\n\nLet’s write some classes to size icons with both `height` and `width` declarations…\n\n#### Defining the variables\n\nAs with the OOTB classes, each custom class needs to know which modules it will be created for, and the types and values to use, so let’s create the variables for that.\n\n```scss\n$icon-size-modules: (base, responsive);\n\n$icon-size-types: (\n  100: hu-rem(16),\n  200: hu-rem(24),\n);\n```\n\n*Note: Don’t prefix custom variables with `hu-` to ensure you don’t accidentally overwrite future updates to Hucssley.*\n\n#### Writing the class logic\n\nAlthough the mixins described above can take a list of modules, to ensure the correct class name order is produced for multiple types, it is recommended to manually loop over the modules externally by following this pattern:\n\n```scss\n// loop through the formatted modules in order\n@each $module in hu-format-modules($icon-size-modules) {\n  // loop through and extract $type \u0026 $value variables from each item in $types\n  @each $type, $value in $icon-size-types {\n    // define the class name you want, including the $type\n    $class-name: hu-class-name(\"icon-size:#{$type}\");\n    // ensure $value supports $types that are both lists and maps\n    $value: if($value, $value, $type);\n\n    // call hu-generic with the $class-name and $module\n    @include hu-generic($class-name, $module) {\n      // write your declarations, using $value as the CSS value\n      height: $value #{hu-important()};\n      width: $value #{hu-important()};\n    }\n  }\n}\n```\n\nThe above loop doesn’t generate the responsive classes. If we generated them within that `$types` loop, you’d quickly encounter that higher scale base classes would override lower scale responsive classes. By moving them in to a separate loop and block, we can improve build time performance and run-time performance by batching up the media queries to produce smaller output.\n\n```scss\n// only try this if responsive is a module\n@if index($icon-size-modules, responsive) {\n  // extract $mq-scale and $mq-value variables for each media query\n  @each $mq-scale, $mq-value in $hu-media-queries {\n    // call the media-query mixin with $mq-value, which supports media query values as min-height/max-width maps\n    @include hu-media-query($mq-value) {\n      // loop through and extract $type \u0026 $value variables from each item in $types\n      @each $type, $value in $icon-size-types {\n        // define the class name you want, including the $type\n        $class-name: hu-class-name(\"icon-size:#{$type}\");\n        // ensure $value supports $types that are both lists and maps\n        $value: if($value, $value, $type);\n\n        // call hu-responsive with the $class-name, *all* modules and $mq-scale\n        @include hu-responsive($class-name, $icon-size-modules, $mq-scale) {\n          // write your declarations, using $value as the CSS value\n          height: $value #{hu-important()};\n          width: $value #{hu-important()};\n        }\n      }\n    }\n  }\n}\n```\n\nThe output from these 2 blocks is:\n\n```css\n.icon-size:100 {\n  height: 1rem;\n  width: 1rem;\n}\n\n.icon-size:200 {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\n@media (min-width: 30em) {\n  .@mq-480--icon-size:100 {\n    height: 1rem;\n    width: 1rem;\n  }\n\n  .@mq-480--icon-size:200 {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n}\n\n// and all other media queries defined…\n```\n\nTo see a fully-fledged example, take a look at how [`rotate`](/src/classes/_hu-rotate.scss) is written.\n\n##### Creating custom pseudo classes\n\nOne benefit Hucssley has over other, similar libraries is that there is a defined method for easily creating pseudo classes. As with “generic” classes, you’ll need 2 code blocks, but instead of calling `hu-generic` and `hu-responsive`, you call `hu-pseudo` and `hu-pseudo-responsive` with the appropriate, documented arguments.\n\n```scss\n// loop through the formatted modules in order\n@each $module in hu-format-modules($icon-size-modules) {\n  // loop through and extract $type \u0026 $value variables from each item in $types\n  @each $type, $value in $icon-size-types {\n    // define the class name you want, including the $type\n    $class-name: hu-class-name(\"icon-size:#{$type}\");\n    // ensure $value supports $types that are both lists and maps\n    $value: if($value, $value, $type);\n\n    // call hu-pseudo with the $class-name, pseudo selectors and $module\n    @include hu-pseudo($class-name, (\"::before\"), $module) {\n      // write your declarations, using $value as the CSS value\n      height: $value #{hu-important()};\n      width: $value #{hu-important()};\n    }\n  }\n}\n\n// only try this if responsive is a module\n@if index($icon-size-modules, responsive) {\n  // extract $mq-scale and $mq-value variables for each media query\n  @each $mq-scale, $mq-value in $hu-media-queries {\n    // call the media-query mixin with $mq-value, which supports media query values as min-height/max-width maps\n    @include hu-media-query($mq-value) {\n      // loop through and extract $type \u0026 $value variables from each item in $types\n      @each $type, $value in $icon-size-types {\n        // define the class name you want, including the $type\n        $class-name: hu-class-name(\"icon-size:#{$type}\");\n        // ensure $value supports $types that are both lists and maps\n        $value: if($value, $value, $type);\n\n        // call hu-pseudo responsive with the $class-name, pseudo selectors, *all* modules and $mq-scale\n        @include hu-pseudo-responsive($class-name, (\"::before\"), $icon-size-modules, $mq-scale) {\n          // write your declarations, using $value as the CSS value\n          height: $value #{hu-important()};\n          width: $value #{hu-important()};\n        }\n      }\n    }\n  }\n}\n```\n\nGenerates the following:\n\n```css\n.::before--icon-size:100::before {\n  height: 1rem;\n  width: 1rem;\n}\n\n.::before--icon-size:200::before {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\n@media (min-width: 30em) {\n  .@mq-480::before--icon-size:100::before {\n    height: 1rem;\n    width: 1rem;\n  }\n\n  .@mq-480::before--icon-size:200::before {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n}\n\n// and all other media queries defined…\n```\n\n##### Creating custom parent classes\n\nSimilarly, custom parent classes can also easily be generated with the `hu-parent` and `hu-parent-responsive` mixins:\n\n```scss\n// loop through the formatted modules in order\n@each $module in hu-format-modules($icon-size-modules) {\n  // loop through and extract $type \u0026 $value variables from each item in $types\n  @each $type, $value in $icon-size-types {\n    // define the class name you want, including the $type\n    $class-name: hu-class-name(\"icon-size:#{$type}\");\n    // ensure $value supports $types that are both lists and maps\n    $value: if($value, $value, $type);\n\n    // call hu-parent with the $class-name, parent selectors and $module\n    @include hu-parent($class-name, (browser-mobile), $module) {\n      // write your declarations, using $value as the CSS value\n      height: $value #{hu-important()};\n      width: $value #{hu-important()};\n    }\n  }\n}\n\n// only try this if responsive is a module\n@if index($icon-size-modules, responsive) {\n  // extract $mq-scale and $mq-value variables for each media query\n  @each $mq-scale, $mq-value in $hu-media-queries {\n    // call the media-query mixin with $mq-value, which supports media query values as min-height/max-width maps\n    @include hu-media-query($mq-value) {\n      // loop through and extract $type \u0026 $value variables from each item in $types\n      @each $type, $value in $icon-size-types {\n        // define the class name you want, including the $type\n        $class-name: hu-class-name(\"icon-size:#{$type}\");\n        // ensure $value supports $types that are both lists and maps\n        $value: if($value, $value, $type);\n\n        // call hu-parent-responsive with the $class-name, parent selectors, *all* modules and $mq-scale\n        @include hu-parent-responsive($class-name, (browser-mobile), $icon-size-modules, $mq-scale) {\n          // write your declarations, using $value as the CSS value\n          height: $value #{hu-important()};\n          width: $value #{hu-important()};\n        }\n      }\n    }\n  }\n}\n```\n\nwill generate the following:\n\n```css\n.browser-mobile .browser-mobile__icon-size:100 {\n  height: 1rem;\n  width: 1rem;\n}\n\n.browser-mobile .browser-mobile__icon-size:200 {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\n@media (min-width: 30em) {\n  .browser-mobile .browser-mobile__@mq-480--icon-size:100 {\n    height: 1rem;\n    width: 1rem;\n  }\n  .browser-mobile .browser-mobile__@mq-480--icon-size:200 {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n}\n\n// and all other media queries defined…\n```\n\n---\n\n## Creating components\n\nSince Hucssley outputs raw HTML class names, it’s incredibly easy to integrate with any front-end “view” framework, to create custom components with small and simple styling APIs.\n\nBy using raw class name strings, you are also able to annotate browser-specifc fixes alongside them in the HTML, which helps with understanding why “unnecessary” properties are there.\n\nLet’s create a button in Vue:\n\n### Component definition\n\nWe create a basic component with 3 props that change the appearance, and create a styles object that simply has strings of Hucssley class names that will be applied by default, and in the different forms.\n\n```js\nexport default {\n  name: 'ButtonHu',\n  props: {\n    shape: {\n      default: 'square',\n      type: String,\n    },\n    size: {\n      default: 'medium',\n      type: String,\n    },\n    type: {\n      default: 'primary',\n      type: String,\n    },\n  },\n  data() {\n    return {\n      isSelected: false,\n    };\n  },\n  methods: {\n    toggleSelected() {\n      this.isSelected = !this.isSelected;\n    },\n  },\n  created() {\n    this.styles = {\n      base: `\n        font-weight:700\n        min-width:0 // fixes IE\n        transition-duration:100\n        transition-easing:ease\n        transition-property:all\n        :hocus--scale:105\n        is-selected--background-color:neutral-700\n        is-selected--color:neutral-0\n      `,\n      type: {\n        primary: `\n          background-color:blue-900\n          color:neutral-0\n          hocus--background-color:blue-600\n        `,\n        secondary: `\n          background-color:blue-200\n          hocus--background-color:blue-400\n        `,\n      },\n      shape: {\n        rounded: 'border-radius:1000',\n        square: 'border-radius:300',\n      },\n      size: {\n        medium: `\n          padding-horizontal:400\n          padding-vertical:300\n        `,\n        large: `\n          font-size:600\n          padding-horizontal:500\n          padding-vertical:400\n        `,\n      },\n    };\n  },\n};\n```\n\nWhich means our `template` is as simple as creating an array of the various `styles` properties, which are determined by the props passed in.\n\n```html\n\u003ctemplate\u003e\n  \u003cbutton\n    v-bind:class=\"[\n      styles.base,\n      styles.shape[shape],\n      styles.size[size],\n      styles.type[type],\n      isSelected \u0026\u0026 'is-selected',\n    ]\"\n    v-on:click=\"toggleSelected\"\n  \u003e\n    \u003cslot\u003e\u003c/slot\u003e\n  \u003c/button\u003e\n\u003c/template\u003e\n```\n\nThe `template` itself is ridiculously simple. You can tell at a glance exactly which class names will be added under any UI condition, and, in the generated HTML you’ll even be able to see an IE-specific hack!\n\nUnlike alternative frameworks, Hucssley encourages a utility-only, not utility-first mentality, so it’s highly recommended that all components be created with a template partial or JavaScript component to keep your code DRY and reduce the opportunity for copy-paste errors.\n\nComponents with meaningful, semantic props that map to UI variations also reduce the learning curve and implementation for developers less experienced with CSS.\n\n### Using the component\n\nThe following shows how we can quickly use and customize a component’s appearance by setting the appropriate props, **and** that we can customize the component on a per-instance basis by merging the passed in `class` attribute with the root component `class` (which happens automagically in Vue).\n\n```html\n\u003cbutton-hu\n  class=\"margin:400\"\n\u003e\n  Primary\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  type=\"secondary\"\n\u003e\n  Secondary\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  shape=\"rounded\"\n\u003e\n  Primary Rounded\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  shape=\"rounded\"\n  type=\"secondary\"\n\u003e\n  Secondary Rounded\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  size=\"large\"\n  type=\"primary\"\n\u003e\n  Primary Large\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  size=\"large\"\n  type=\"secondary\"\n\u003e\n  Secondary Large\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  shape=\"rounded\"\n  size=\"large\"\n  type=\"primary\"\n\u003e\n  Primary Large Rounded\n\u003c/button-hu\u003e\n\n\u003cbutton-hu\n  class=\"margin:400\"\n  shape=\"rounded\"\n  size=\"large\"\n  type=\"secondary\"\n\u003e\n  Secondary Large Rounded\n\u003c/button-hu\u003e\n```\n\n**A working demo can be seen here: https://codepen.io/stowball/full/NVdbyZ**\n\n---\n\n## Increasing specificity\n\nWhile all of Hucssley’s classes have an intentionally low specificity count, this could present issues if you’re integrating it in to an existing project.\n\nLuckily, Hucssley provides two methods to increase the specificity:\n\n### Forcing `!important`\n\nOption one is to set `$hu-use-important: true;` anywhere before you `@import` the reset and class styles:\n\n```scss\n$hu-use-important: true;\n\n@import \"path_to_node_modules/hucssley/src/styles\";\n// @import \"custom/classes/index\";\n```\n\nAs [described earlier](#use-important-hu-use-important), this will add the `!important` rule to every declaration.\n\n### Quarantining with a descendent selector\n\nSince Hucssley is written in Sass, you can easily wrap your imports in a new selector to convert every class to use a descendent selector.\n\n```scss\n.hucssley {\n  @import \"path_to_node_modules/hucssley/src/styles\";\n  // @import \"custom/classes/index\";\n}\n```\n\nwhich will produce:\n\n```css\n.hucssley .align-content:baseline {\n  align-content: baseline;\n}\n\n.hucssley .align-content:center {\n  align-content: center;\n}\n\n…\n```\n\nYou could then add the `hucssley` class to a direct ancestor of your newly integrated component, or add it globally to the `\u003chtml\u003e` element (although this could have unexpected side-effects if using the reset).\n\nIf this still doesn’t produce a high enough specificity bump, you can also use the `hu-bump-specificity($increase-to-specificity)` mixin to arbitrarily increase it further:\n\n```scss\n.hucssley {\n  @include hu-bump-specificity(1) {\n    @import \"path_to_node_modules/hucssley/src/styles\";\n    // @import \"custom/classes/index\";\n  }\n}\n```\n\nwhich produces:\n\n```css\n.hucssley.hucssley .align-content:baseline {\n  align-content: baseline;\n}\n\n.hucssley.hucssley .align-content:center {\n  align-content: center;\n}\n\n…\n```\n\n---\n\n## Controlling file size\n\nWhile Hucssley creates almost every possible class you’d ever want to make building UI simple, this comes at a file size cost with the OOTB CSS coming in at a massive 1.3 MB uncompressed. Of course, the nature of Hucssley lends itself very well to gzipping, which brings the OOTB CSS down to 94 KB, which ironically, is still a lot smaller than lots of other “production” CSS in the wild.\n\nBut, Hucssley is infinitely customizable, so you can set the variables of modules you’ll never use to `()` so they won’t output, and of course, limiting the amount of colors, media queries, and spacing scales will also help.\n\nHowever, we can do better… and we can do it automatically by utilizing [Purgecss](https://purgecss.com) to reduce your CSS output to only the classes that are used in your views. Hucssley comes with a pre-configured  Purgecss `extractor`, which you can import into your projects, like so:\n\n### v2\n\n```js\nconst { extractor } = require('hucssley/src/purgecss/');\n\n{\n  defaultExtractor: extractor,\n}\n```\n\n### v1\n\n```js\nconst { extractor } = require('hucssley/src/purgecss/');\n\nextractor: class {\n  static extract(content) {\n    return extractor(content);\n  }\n}\n```\n\nIf you wish to change which characters are escaped, you can customize the [global `$hu-escape-class-name-types` variable](/src/variables/global/_hu-escape-class-name-types.scss).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Fhucssley","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstowball%2Fhucssley","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Fhucssley/lists"}