Hucssley provides over 120 classes out-of-the-box, which have been sensibly pre-configured to get up and running, fast. Some are placeholders with empty variables for more complex things, like box-shadow, grid and transform that either don’t map 1:1 to a property/value pair, and/or are more likely unable to be standardised to suit your project.
Each class will have an appropriately named $hu-[class-name]-modules variable, which determines what module types (if any), it is generated for.
The variable accepts either a list or map. If it is a list, it will accept the following values: (base, visited, focus, hover, hocus, active, state, group-visited, group-focus, group-hover, group-hocus, group-state, reduced-motion, print) or empty (). The order of the modules is not important, as Hucssley will intelligently order them for you to produce the desired output.
If the variable is a map, it requires a property called core whose value is a list of modules as above. You can also provide keys of parents and pseudos, whose values will be a list of parent and pseudo selectors that will be generated for all of the core modules.
For instance you could override the display classes like this:
$hu-display-modules: (
core: $hu-display-modules, // Use the existing list of modules as the `core` property
pseudos: ("::before", ":first-child"),
parents: (eqio-<400),
);
Each class will have an appropriately name $hu-[class-name]-types variable, which determines what class name suffixes and values that will be used.
$hu-[class-name]-types can either accept a list or a map.
If using a list, the suffix and value will be identical, for example:
$hu-justify-items-types: (
auto,
baseline,
center,
);
Will generate:
.justify-items:auto {
justify-items: auto;
}
.justify-items:baseline {
justify-items: baseline;
}
.justify-items:center {
justify-items: center;
}
If using a map, the majority of class names will use the map keys as the class name suffix, and the map values as the CSS value. This allows you to customize the class names to suit your workflow, or fix mistakes in CSS.
The following variable:
$hu-flex-wrap-types: (
no-wrap: nowrap,
wrap: wrap,
wrap-reverse: wrap-reverse,
);
Will generate:
.flex-wrap:no-wrap {
flex-wrap: nowrap;
}
.flex-wrap:wrap {
flex-wrap: wrap;
}
.flex-wrap:wrap-reverse {
flex-wrap: wrap-reverse;
}
Some classes, also have a $hu-[class-name]-scale variable, in which case, they use both $hu-[class-name]-types and $hu-[class-name]-scale to determine the class name suffix, values and CSS properties generated.
As with the simple types, both variables could be either a list or a map, but would generally both be maps.
A good example is border-radius:
$hu-border-radius-scale: (
0: 0,
100: hu-rem(1),
200: hu-rem(2),
300: hu-rem(3),
1000: hu-rem(1000),
);
$hu-border-radius-types: (
border-radius: border-radius,
border-bottom-radius: (border-bottom-left-radius, border-bottom-right-radius),
border-left-radius: (border-bottom-left-radius, border-top-left-radius),
border-right-radius: (border-bottom-right-radius, border-top-right-radius),
border-top-radius: (border-top-left-radius, border-top-right-radius),
);
which would generate the following classes:
.border-radius:100 {
border-radius: 0.0625rem;
}
.border-bottom-radius:100 {
border-bottom-left-radius: 0.0625rem;
border-bottom-right-radius: 0.0625rem;
}
.border-left-radius:100 {
border-bottom-left-radius: 0.0625rem;
border-top-left-radius: 0.0625rem;
}
.border-right-radius:100 {
border-bottom-right-radius: 0.0625rem;
border-top-right-radius: 0.0625rem;
}
.border-top-radius:100 {
border-top-left-radius: 0.0625rem;
border-top-right-radius: 0.0625rem;
}
.border-radius:200 {
border-radius: 0.125rem;
}
.border-bottom-radius:200 {
border-bottom-left-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
}
.border-left-radius:200 {
border-bottom-left-radius: 0.125rem;
border-top-left-radius: 0.125rem;
}
.border-right-radius:200 {
border-bottom-right-radius: 0.125rem;
border-top-right-radius: 0.125rem;
}
.border-top-radius:200 {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
}
Hopefully you can see how the maps controlled the resultant class name format, properties and values.
Every class provided by Hucssley can have the “property” part of its class name customized through its $hu-[class-name]-alias variable (where applicable). While the majority of classes use the same value for the class name and CSS property, the following deviate slightly for improved comprehension and legibility:
animation-count -> animation-iteration-count
animation-easing -> animation-timing-function
animation-mode -> animation-fill-mode
animation-state -> animation-play-state
border-radius-[side] -> border-[side]-radius
content -> ::[pseudo]-content
momentum-scrolling -> -webkit-overflow-scrolling
pos-[bottom,left,right,top] -> bottom,left,right,top
rotate -> transform: rotate
scale -> transform: scale
size -> height & width
svg-fill-color -> fill
svg-fill-rule -> fill-rule
svg-stroke-color -> stroke
transition-easing -> transition-timing-function
translate-x -> transform: translateX
translate-y -> transform: translateY
Should you wish to change the class name, you can pass a string to the $hu-[class-name]-alias variable, like so:
$hu-background-color-alias: bg-color;
// ->
.bg-color:blue-1000 {
background-color: #172e3a;
}
// instead of ->
.background-color:blue-1000 {
background-color: #172e3a;
}
$hu-visually-hidden-alias: screenreader-only;
// ->
.screenreader-only {
… existing .visually-hidden declarations
}
// instead of ->
.visually-hidden {
… existing .visually-hidden declarations
}
Some classes, like border-, margin, padding and pos are too complex so don’t use an $-alias variable, but can be customized through their $-sides or $-type variables instead.
Note: when passing an empty string "" to an $-alias variable, the class name will use the CSS property value.
To customize the modules, types and scales used, you simply need to re-assign the relevant variable in a custom Sass stylesheet.
When importing and using Hucssley, we recommend taking this approach to customize and override existing classes and variables.
@import "hucssley/helpers";
@import "hucssley/variables/global/index";
@import "custom/variables/global/index";
@import "hucssley/variables/classes/index";
@import "custom/variables/classes/index";
// set class overrides before if you don't need access to the defaults & want changes to flow through referenced vars
@import "hucssley/variables/reset/index";
@import "custom/variables/reset/index";
@import "hucssley/styles";
@import "custom/classes/index";
Below is a complete list of all the classes in Hucssley by default, and their individual configurations. You’ll see that some classes reference the same variables, to make customizing them to your specific project easier.
Note: Classes map 1:1 to with CSS properties unless otherwise specified.
$hu-align-content-alias: "";
$hu-align-content-modules: (base, responsive);
$hu-align-content-types: (
baseline,
center,
end,
flex-end,
flex-start,
normal,
space-around,
space-between,
space-evenly,
start,
stretch,
);
$hu-align-items-alias: "";
$hu-align-items-modules: (base, responsive);
$hu-align-items-types: (
auto,
baseline,
center,
end,
flex-end,
flex-start,
normal,
self-end,
self-start,
start,
stretch,
);
$hu-align-self-alias: "";
$hu-align-self-modules: (base, responsive);
$hu-align-self-types: $hu-align-items-types;
$hu-animation-alias: "";
$hu-animation-modules: ();
$hu-animation-types: ();
animation-count -> animation-iteration-count
$hu-animation-count-alias: animation-count;
$hu-animation-count-modules: (base);
$hu-animation-count-types: (
infinite,
);
$hu-animation-delay-alias: "";
$hu-animation-delay-modules: ();
$hu-animation-delay-types: ();
$hu-animation-direction-alias: "";
$hu-animation-direction-modules: ();
$hu-animation-direction-types: (
alternate,
alternate-reverse,
normal,
reverse,
);
$hu-animation-duration-alias: "";
$hu-animation-duration-modules: ();
$hu-animation-duration-types: ();
animation-easing -> animation-timing-function
$hu-animation-easing-alias: animation-easing;
$hu-animation-easing-modules: (base);
$hu-animation-easing-types: (
ease: ease,
ease-in: ease-in,
ease-in-out: ease-in-out,
ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045),
ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335),
ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190),
ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035),
ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530),
ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220),
ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060),
ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715),
ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550),
ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860),
ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000),
ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000),
ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955),
ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000),
ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000),
ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950),
ease-out: ease-out,
ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275),
ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000),
ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000),
ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000),
ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940),
ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000),
ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000),
ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000),
linear: linear,
step-start: step-start,
step-end: step-end,
);
animation-mode -> animation-fill-mode
$hu-animation-mode-alias: animation-mode;
$hu-animation-mode-modules: ();
$hu-animation-mode-types: (
backwards,
both,
forwards,
none,
);
$hu-animation-name-alias: "";
$hu-animation-name-modules: ();
$hu-animation-name-types: ();
animation-state -> animation-play-state
$hu-animation-state-alias: animation-state;
$hu-animation-state-modules: ();
$hu-animation-state-types: (
paused,
running,
);
$hu-appearance-alias: "";
$hu-appearance-modules: (base);
$hu-appearance-types: (
none,
textfield,
);
$hu-backdrop-filter-alias: "";
$hu-backdrop-filter-modules: ();
$hu-backdrop-filter-types: ();
$hu-backface-visibility-alias: "";
$hu-backface-visibility-modules: (base);
$hu-backface-visibility-types: (
hidden,
visible,
);
$hu-background-blend-mode-alias: "";
$hu-background-blend-mode-modules: ();
$hu-background-blend-mode-types: (
color,
color-burn,
color-dodge,
darken,
difference,
exclusion,
hard-light,
hue,
lighten,
luminosity,
multiply,
normal,
overlay,
saturation,
screen,
soft-light,
);
$hu-background-color-alias: "";
$hu-background-color-modules: (base, visited, hocus, active, group-hocus, group-state, state);
$hu-background-color-types: $hu-colors;
$hu-background-image-alias: "";
$hu-background-image-modules: ();
$hu-background-image-types: ();
$hu-background-position-x-alias: "";
$hu-background-position-x-modules: (base);
$hu-background-position-x-types: (
left,
center,
right,
);
$hu-background-position-y-alias: "";
$hu-background-position-y-modules: (base);
$hu-background-position-y-types: (
bottom,
center,
top,
);
$hu-background-repeat-alias: "";
$hu-background-repeat-modules: (base);
$hu-background-repeat-types: (
repeat: repeat,
repeat-no: no-repeat,
repeat-space: space,
repeat-round: round,
repeat-x: repeat-x,
repeat-y: repeat-y,
);
$hu-background-size-alias: "";
$hu-background-size-modules: (base);
$hu-background-size-types: (
auto,
contain,
cover,
);
$hu-border-collapse-alias: "";
$hu-border-collapse-modules: (base);
$hu-border-collapse-types: (
collapse,
separate,
);
$hu-border-color-modules: $hu-border-modules;
$hu-border-color-sides: $hu-border-sides;
$hu-border-color-types: $hu-colors;
$hu-border-radius-modules: (base, responsive);
$hu-border-radius-scale: (
0: 0,
100: hu-rem(1),
200: hu-rem(2),
300: hu-rem(3),
400: hu-rem(4),
500: hu-rem(5),
1000: hu-rem(1000),
);
$hu-border-radius-types: (
border-radius: border-radius,
border-bottom-radius: (border-bottom-left-radius, border-bottom-right-radius),
border-bottom-left-radius: border-bottom-left-radius,
border-bottom-right-radius: border-bottom-right-radius,
border-left-radius: (border-bottom-left-radius, border-top-left-radius),
border-right-radius: (border-bottom-right-radius, border-top-right-radius),
border-top-radius: (border-top-left-radius, border-top-right-radius),
border-top-left-radius: border-top-left-radius,
border-top-right-radius: border-top-right-radius,
);
$hu-border-style-modules: $hu-border-modules;
$hu-border-style-sides: $hu-border-sides;
$hu-border-style-types: (
none,
dashed,
double,
dotted,
solid,
);
$hu-border-width-modules: $hu-border-modules;
$hu-border-width-sides: $hu-border-sides;
$hu-border-width-types: (
0: 0,
100: hu-rem(1),
200: hu-rem(2),
);
$hu-box-shadow-alias: "";
$hu-box-shadow-modules: ();
$hu-box-shadow-types: ();
$hu-box-sizing-alias: "";
$hu-box-sizing-modules: (base);
$hu-box-sizing-types: (
border-box,
content-box,
);
$hu-color-alias: "";
$hu-color-modules: $hu-background-color-modules;
$hu-color-types: $hu-colors;
$hu-columns-alias: "";
$hu-columns-modules: ();
$hu-columns-types: ();
content -> ::[pseudo]-content
$hu-content-alias: "";
$hu-content-modules: (base);
$hu-content-pseudos: (
"::after",
"::before"
);
$hu-content-types: (
"",
);
$hu-cursor-alias: "";
$hu-cursor-modules: (base, state);
$hu-cursor-types: (
auto,
default,
not-allowed,
pointer,
progress,
text,
wait,
);
$hu-display-alias: "";
$hu-display-modules: (base, focus, hover, hocus, group-hocus, group-state, print, responsive, state);
$hu-display-types: (
block,
flex,
flow-root,
grid,
inline,
inline-block,
inline-flex,
inline-grid,
none,
table,
table-cell,
table-row,
);
$hu-flex-alias: "";
$hu-flex-modules: ();
$hu-flex-types: ();
$hu-flex-basis-alias: "";
$hu-flex-basis-modules: (base);
$hu-flex-basis-types: (
0
);
$hu-flex-direction-alias: "";
$hu-flex-direction-modules: (base, responsive);
$hu-flex-direction-types: (
column,
column-reverse,
row,
row-reverse,
);
$hu-flex-flow-alias: "";
$hu-flex-flow-modules: ();
$hu-flex-flow-types: ();
$hu-flex-grow-alias: "";
$hu-flex-grow-modules: (base, responsive);
$hu-flex-grow-types: (
0,
1,
2,
3,
4,
5,
auto,
);
$hu-flex-shrink-alias: "";
$hu-flex-shrink-modules: (base, responsive);
$hu-flex-shrink-types: $hu-flex-grow-types;
$hu-flex-wrap-alias: "";
$hu-flex-wrap-modules: (base, responsive);
$hu-flex-wrap-types: (
no-wrap: nowrap,
wrap: wrap,
wrap-reverse: wrap-reverse,
);
$hu-float-alias: "";
$hu-float-modules: (base);
$hu-float-types: (
left,
none,
right,
);
$hu-font-family-alias: "";
$hu-font-family-modules: (base);
$hu-font-family-types: (
mono: (Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
sans: (system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif),
serif: (Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif),
);
$hu-font-size-alias: "";
$hu-font-size-modules: (base, responsive);
$hu-font-size-types: (
100: hu-rem(10),
200: hu-rem(12),
300: hu-rem(14),
400: hu-rem(16),
500: hu-rem(18),
600: hu-rem(20),
700: hu-rem(22),
800: hu-rem(24),
900: hu-rem(26),
1000: hu-rem(28),
);
$hu-font-smoothing-alias: font-smoothing;
$hu-font-smoothing-modules: (base);
.font-smoothing {
-moz-osx-font-smoothing: grayscale #{hu-important()};
-webkit-font-smoothing: antialiased #{hu-important()};
}
$hu-font-style-alias: "";
$hu-font-style-modules: (base);
$hu-font-style-types: (
italic,
normal,
oblique,
);
$hu-font-weight-alias: "";
$hu-font-weight-modules: (base);
$hu-font-weight-types: (
400,
700,
);
$hu-grid-alias: "";
$hu-grid-modules: ();
$hu-grid-types: ();
$hu-grid-area-alias: "";
$hu-grid-area-modules: ();
$hu-grid-area-types: ();
$hu-grid-auto-columns-alias: "";
$hu-grid-auto-columns-modules: ();
$hu-grid-auto-columns-types: ();
$hu-grid-auto-flow-alias: "";
$hu-grid-auto-flow-modules: ();
$hu-grid-auto-flow-types: (
column,
dense,
row,
);
$hu-grid-auto-rows-alias: "";
$hu-grid-auto-rows-modules: ();
$hu-grid-auto-rows-types: ();
$hu-grid-column-alias: "";
$hu-grid-column-modules: ();
$hu-grid-column-types: ();
$hu-grid-column-end-alias: "";
$hu-grid-column-end-modules: ();
$hu-grid-column-end-types: ();
$hu-grid-column-gap-alias: "";
$hu-grid-column-gap-modules: ();
$hu-grid-column-gap-types: $hu-spacing-scale;
$hu-grid-column-start-alias: "";
$hu-grid-column-start-modules: ();
$hu-grid-column-start-types: ();
$hu-grid-gap-alias: "";
$hu-grid-gap-modules: ();
$hu-grid-gap-types: $hu-spacing-scale;
$hu-grid-row-alias: "";
$hu-grid-row-modules: ();
$hu-grid-row-types: ();
$hu-grid-row-end-alias: "";
$hu-grid-row-end-modules: ();
$hu-grid-row-end-types: ();
$hu-grid-row-gap-alias: "";
$hu-grid-row-gap-modules: ();
$hu-grid-row-gap-types: $hu-spacing-scale;
$hu-grid-row-start-alias: "";
$hu-grid-row-start-modules: ();
$hu-grid-row-start-types: ();
$hu-grid-template-alias: "";
$hu-grid-template-modules: ();
$hu-grid-template-types: ();
$hu-grid-template-areas-alias: "";
$hu-grid-template-areas-modules: ();
$hu-grid-template-areas-types: ();
$hu-grid-template-columns-alias: "";
$hu-grid-template-columns-modules: ();
$hu-grid-template-columns-types: ();
$hu-grid-template-rows-alias: "";
$hu-grid-template-rows-modules: ();
$hu-grid-template-rows-types: ();
$hu-height-alias: "";
$hu-height-modules: (base, print, responsive);
$hu-height-types: (
0,
100%,
100vh,
auto,
);
$hu-hyphens-alias: "";
$hu-hyphens-modules: (base);
$hu-hyphens-types: (
auto,
manual,
none,
);
$hu-justify-content-alias: "";
$hu-justify-content-modules: (base, responsive);
$hu-justify-content-types: (
center,
end,
flex-end,
flex-start,
left,
normal,
right,
space-around,
space-between,
space-evenly,
start,
stretch,
);
$hu-justify-items-alias: "";
$hu-justify-items-modules: (base, responsive);
$hu-justify-items-types: (
auto,
baseline,
center,
end,
flex-end,
flex-start,
left,
normal,
right,
self-end,
self-start,
start,
stretch,
);
$hu-justify-self-alias: "";
$hu-justify-self-modules: ();
$hu-justify-self-types: $hu-justify-items-types;
$hu-letter-spacing-alias: "";
$hu-letter-spacing-modules: (base, responsive);
$hu-letter-spacing-types: (
-200: -0.2em,
-100: -0.1em,
0: 0,
100: 0.1em,
200: 0.2em,
normal: normal,
);
$hu-line-clamp-alias: "";
$hu-line-clamp-modules: (base);
$hu-line-clamp-types: (
2,
3,
);
$hu-line-height-alias: "";
$hu-line-height-modules: (base, responsive);
$hu-line-height-types: (
0: 0,
100: 1,
200: 1.2,
300: 1.4,
400: 1.6,
500: 1.8,
600: 2,
700: 2.2,
800: 2.4,
900: 2.6,
1000: 2.8,
);
$hu-list-style-alias: "";
$hu-list-style-modules: (base);
$hu-list-style-types: (
circle,
decimal,
decimal-leading-zero,
disc,
lower-alpha,
lower-roman,
none,
square,
upper-alpha,
upper-roman,
);
$hu-margin-modules: (base, responsive);
$hu-margin-scale: $hu-spacing-scale;
$hu-margin-types: (
margin: margin,
margin-bottom: margin-bottom,
margin-left: margin-left,
margin-right: margin-right,
margin-top: margin-top,
margin-horizontal: (margin-left, margin-right),
margin-vertical: (margin-bottom, margin-top),
);
For every numeric $hu-margin-scale value, negative -[value] classes are also created.
$hu-max-height-alias: "";
$hu-max-height-modules: (base, print);
$hu-max-height-types: $hu-height-types;
$hu-max-width-alias: "";
$hu-max-width-modules: (base, responsive);
$hu-max-width-types: (
100%,
);
$hu-min-height-alias: "";
$hu-min-height-modules: (base);
$hu-min-height-types: (
0,
100%,
100vh,
none,
);
$hu-min-width-alias: "";
$hu-min-width-modules: (base, responsive);
$hu-min-width-types: (
0,
100%,
100vw,
none,
);
$hu-mix-blend-mode-alias: "";
$hu-mix-blend-mode-modules: ();
$hu-mix-blend-mode-types: (
color,
color-burn,
color-dodge,
darken,
difference,
exclusion,
hard-light,
hue,
lighten,
luminosity,
multiply,
normal,
overlay,
saturation,
screen,
soft-light,
);
momentum-scrolling -> -webkit-overflow-scrolling
$hu-momentum-scrolling-alias: momentum-scrolling;
$hu-momentum-scrolling-modules: (base);
.momentum-scrolling {
-webkit-overflow-scrolling: touch;
}
$hu-object-fit-alias: "";
$hu-object-fit-modules: ();
$hu-object-fit-types: (
contain,
cover,
fill,
none,
scale-down,
);
$hu-opacity-alias: "";
$hu-opacity-modules: (base, focus, hover, hocus, group-hocus, group-state, state);
$hu-opacity-types: (
0: 0,
10: 0.1,
20: 0.2,
25: 0.25,
30: 0.3,
40: 0.4,
50: 0.5,
60: 0.6,
70: 0.7,
75: 0.75,
80: 0.8,
90: 0.9,
100: 1,
);
$hu-order-alias: "";
$hu-order-modules: (base, responsive);
$hu-order-types: (
0,
1,
2,
3,
4,
5,
);
$hu-outline-alias: "";
$hu-outline-modules: (base, focus, hocus);
$hu-outline-types: (
none,
);
$hu-overflow-alias: "";
$hu-overflow-modules: (base, print, responsive);
$hu-overflow-types: (
auto,
hidden,
visible,
);
$hu-overflow-wrap-alias: "";
$hu-overflow-wrap-modules: (base);
$hu-overflow-wrap-types: (
anywhere,
break-word,
normal,
);
$hu-overflow-x-alias: "";
$hu-overflow-x-modules: $hu-overflow-modules;
$hu-overflow-x-types: $hu-overflow-types;
$hu-overflow-y-alias: "";
$hu-overflow-y-modules: $hu-overflow-modules;
$hu-overflow-y-types: $hu-overflow-types;
$hu-overscroll-behavior-alias: "";
$hu-overscroll-behavior-modules: (base);
$hu-overscroll-behavior-types: (
auto,
contain,
none,
);
$hu-padding-modules: $hu-margin-modules;
$hu-padding-scale: $hu-spacing-scale;
$hu-padding-types: (
padding: padding,
padding-bottom: padding-bottom,
padding-left: padding-left,
padding-right: padding-right,
padding-top: padding-top,
padding-horizontal: (padding-left, padding-right),
padding-vertical: (padding-bottom, padding-top),
);
$hu-pointer-events-modules: (base, group-state, state);
$hu-pointer-events-types: (
auto,
none,
);
pos -> bottom, left, right, top
$hu-pos-modules: (base, group-state, responsive, state);
$hu-pos-scale: (
0,
50%,
100%,
auto,
);
$hu-pos-types: (
pos-bottom: bottom,
pos-bottom-left: (bottom, left),
pos-bottom-right: (bottom, right),
pos-left: left,
pos-right: right,
pos-top: top,
pos-top-left: (left, top),
pos-top-left-bottom-right: (bottom, left, right, top),
pos-top-right: (right, top),
);
$hu-position-alias: "";
$hu-position-modules: (base, hocus, group-hocus, group-state, responsive, state);
$hu-position-types: (
absolute,
fixed,
relative,
static,
sticky,
);
$hu-resize-alias: "";
$hu-resize-modules: (base);
$hu-resize-types: (
both,
horizontal,
none,
vertical,
);
rotate -> transform: rotate
$hu-rotate-alias: rotate;
$hu-rotate-modules: ();
$hu-rotate-types: (
-360: -360deg,
-270: -270deg,
-180: -180deg,
-90: -90deg,
-45: -45deg,
0: 0,
45: 45deg,
90: 90deg,
180: 180deg,
270: 270deg,
360: 360deg,
);
scale -> transform: scale
$hu-scale-alias: scale;
$hu-scale-modules: (hocus);
$hu-scale-types: (
0: 0,
50: 0.5,
80: 0.8,
85: 0.85,
90: 0.9,
95: 0.95,
100: 1,
105: 1.05,
110: 1.1,
115: 1.15,
120: 1.2,
150: 1.5,
);
$hu-scroll-behavior-alias: "";
$hu-scroll-behavior-modules: (base);
$hu-scroll-behavior-types: (
auto,
smooth,
);
size -> height & width
$hu-size-alias: "";
$hu-size-modules: ();
$hu-size-types: ();
Example:
$hu-size-types: (
100: hu-rem(16)
video: (hu-rem(960), hu-rem(540)),
);
->
.size:100 {
height: 1rem;
width: 1rem;
}
.size:video {
height: 33.75rem;
width: 60rem;
}
svg-fill-color -> fill
$hu-svg-fill-color-alias: svg-fill-color;
$hu-svg-fill-color-modules: (base, group-hocus);
$hu-svg-fill-color-types: hu-append((current: (current: currentColor)), $hu-colors)
svg-fill-rule -> fill-rule
$hu-svg-fill-rule-alias: svg-fill-rule;
$hu-svg-fill-rule-modules: (base);
$hu-svg-fill-rule-types: (
even-odd: evenodd,
);
svg-stroke-color -> stroke
$hu-svg-stroke-color-alias: svg-stroke-color;
$hu-svg-stroke-color-modules: $hu-svg-fill-color-modules;
$hu-svg-stroke-color-types: $hu-svg-fill-color-types;
$hu-table-layout-alias: "";
$hu-table-layout-modules: (base);
$hu-table-layout-types: (
auto,
fixed,
);
$hu-text-align-alias: "";
$hu-text-align-modules: (base, responsive);
$hu-text-align-types: (
center,
justify,
left,
right,
);
$hu-text-decoration-alias: "";
$hu-text-decoration-modules: (base, visited, hocus, active);
$hu-text-decoration-types: (
line-through,
none,
underline,
);
$hu-text-shadow-alias: "";
$hu-text-shadow-modules: ();
$hu-text-shadow-types: ();
$hu-text-transform-alias: "";
$hu-text-transform-modules: (base);
$hu-text-transform-types: (
capitalize,
lowercase,
none,
uppercase,
);
theme__[$hu-background-color-alias] -> background-color
Inherits all of hu-background-color’s alias, modules and types variables.
theme__border-color -> border-color
Inherits all of hu-border-color’s modules, sides and types variables.
theme__[$hu-color-alias] -> color
Inherits all of hu-color’s alias, modules and types variables.
$hu-transform-alias: "";
$hu-transform-modules: ();
$hu-transform-types: ();
$hu-transition-alias: "";
$hu-transition-modules: (base, group-hocus, group-state, reduced-motion, state);
$hu-transition-types: ();
$hu-transition-delay-alias: "";
$hu-transition-delay-modules: $hu-transition-modules;
$hu-transition-delay-types: (
0: 0s,
100: 0.1s,
200: 0.2s,
300: 0.3s,
400: 0.4s,
500: 0.5s,
1000: 1s,
);
$hu-transition-duration-alias: "";
$hu-transition-duration-modules: $hu-transition-modules;
$hu-transition-duration-types: (
0: 0s,
100: 0.1s,
200: 0.2s,
300: 0.3s,
400: 0.4s,
500: 0.5s,
1000: 1s,
);
transition-easing -> transition-timing-function
$hu-transition-easing-alias: transition-easing;
$hu-transition-easing-modules: $hu-transition-modules;
$hu-transition-easing-types: $hu-animation-easing-types;
$hu-transition-property-alias: "";
$hu-transition-property-modules: $hu-transition-modules;
$hu-transition-property-types: (
all,
background-color,
color,
height,
max-height,
max-width,
opacity,
transform,
visibility,
width,
none,
);
translate-x -> transform: translateX
$hu-translate-x-alias: translate-x;
$hu-translate-x-modules: (base);
$hu-translate-x-types: (
-100%,
-50%,
0,
50%,
100%,
);
translate-y -> transform: translateY
$hu-translate-y-alias: translate-y;
$hu-translate-y-modules: $hu-translate-x-modules;
$hu-translate-y-types: $hu-translate-x-types;
$hu-truncate-text-alias: "";
$hu-truncate-text-modules: (base);
.truncate-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
$hu-vertical-align-alias: "";
$hu-vertical-align-modules: (base);
$hu-vertical-align-types: (
baseline,
bottom,
middle,
text-bottom,
text-top,
top,
);
$hu-visibility-alias: "";
$hu-visibility-modules: (base, hocus, group-hocus, group-state, print, responsive, state);
$hu-visibility-types: (
hidden,
visible,
);
$hu-visually-hidden-alias: visually-hidden;
$hu-visually-hidden-modules: (base);
.visually-hidden {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
$hu-white-space-alias: "";
$hu-white-space-modules: (base);
$hu-white-space-types: (
no-wrap: nowrap,
normal: normal,
pre: pre,
pre-line: pre-line,
pre-wrap: pre-wrap,
);
$hu-width-alias: "";
$hu-width-modules: (base, print, responsive);
$hu-width-types: (
0: 0,
5%: 5%,
10%: 10%,
16.6%: 16.66667%,
20%: 20%,
25%: 25%,
30%: 30%,
33.3%: 33.33333%,
40%: 40%,
50%: 50%,
60%: 60%,
66.6%: 66.66666%,
70%: 70%,
75%: 75%,
80%: 80%,
83.3%: 83.33333%,
90%: 90%,
100%: 100%,
100vw: 100vw,
auto: auto,
);
$hu-word-break-alias: "";
$hu-word-break-modules: (base);
$hu-word-break-types: (
break-all,
break-word,
keep-all,
normal,
);
$hu-word-wrap-alias: "";
$hu-word-wrap-modules: (base);
$hu-word-wrap-types: (
break-word,
normal,
);
$hu-z-index-alias: "";
$hu-z-index-modules: (base, hocus, group-hocus, group-state, state);
$hu-z-index-types: (
auto,
inherit,
-1,
0,
100,
200,
300,
400,
500,
600,
700,
800,
900,
1000,
9999,
);