Hucssley classes

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.

Understanding class configuration

Modules

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.

Advanced modules

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),
);

Simple types

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.

Lists

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;
}

Maps

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;
}

Advanced types

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.

Aliases

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.

Configuring classes

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";

What's in the box?

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

$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

$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

$hu-align-self-alias: "";

$hu-align-self-modules: (base, responsive);

$hu-align-self-types: $hu-align-items-types;

hu-animation

$hu-animation-alias: "";

$hu-animation-modules: ();

$hu-animation-types: ();

hu-animation-count

animation-count -> animation-iteration-count

$hu-animation-count-alias: animation-count;

$hu-animation-count-modules: (base);

$hu-animation-count-types: (
  infinite,
);

hu-animation-delay

$hu-animation-delay-alias: "";

$hu-animation-delay-modules: ();

$hu-animation-delay-types: ();

hu-animation-direction

$hu-animation-direction-alias: "";

$hu-animation-direction-modules: ();

$hu-animation-direction-types: (
  alternate,
  alternate-reverse,
  normal,
  reverse,
);

hu-animation-duration

$hu-animation-duration-alias: "";

$hu-animation-duration-modules: ();

$hu-animation-duration-types: ();

hu-animation-easing

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,
);

hu-animation-mode

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

$hu-animation-name-alias: "";

$hu-animation-name-modules: ();

$hu-animation-name-types: ();

hu-animation-state

animation-state -> animation-play-state

$hu-animation-state-alias: animation-state;

$hu-animation-state-modules: ();

$hu-animation-state-types: (
  paused,
  running,
);

hu-appearance

$hu-appearance-alias: "";

$hu-appearance-modules: (base);

$hu-appearance-types: (
  none,
  textfield,
);

hu-backdrop-filter

$hu-backdrop-filter-alias: "";

$hu-backdrop-filter-modules: ();

$hu-backdrop-filter-types: ();

hu-backface-visibility

$hu-backface-visibility-alias: "";

$hu-backface-visibility-modules: (base);

$hu-backface-visibility-types: (
  hidden,
  visible,
);

hu-background-blend-mode

$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

$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

$hu-background-image-alias: "";

$hu-background-image-modules: ();

$hu-background-image-types: ();

hu-background-position-x

$hu-background-position-x-alias: "";

$hu-background-position-x-modules: (base);

$hu-background-position-x-types: (
  left,
  center,
  right,
);

hu-background-position-y

$hu-background-position-y-alias: "";

$hu-background-position-y-modules: (base);

$hu-background-position-y-types: (
  bottom,
  center,
  top,
);

hu-background-repeat

$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

$hu-background-size-alias: "";

$hu-background-size-modules: (base);

$hu-background-size-types: (
  auto,
  contain,
  cover,
);

hu-border-collapse

$hu-border-collapse-alias: "";

$hu-border-collapse-modules: (base);

$hu-border-collapse-types: (
  collapse,
  separate,
);

hu-border-color

$hu-border-color-modules: $hu-border-modules;

$hu-border-color-sides: $hu-border-sides;

$hu-border-color-types: $hu-colors;

hu-border-radius

$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

$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

$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

$hu-box-shadow-alias: "";

$hu-box-shadow-modules: ();

$hu-box-shadow-types: ();

hu-box-sizing

$hu-box-sizing-alias: "";

$hu-box-sizing-modules: (base);

$hu-box-sizing-types: (
  border-box,
  content-box,
);

hu-color

$hu-color-alias: "";

$hu-color-modules: $hu-background-color-modules;

$hu-color-types: $hu-colors;

hu-columns

$hu-columns-alias: "";

$hu-columns-modules: ();

$hu-columns-types: ();

hu-content

content -> ::[pseudo]-content

$hu-content-alias: "";

$hu-content-modules: (base);

$hu-content-pseudos: (
  "::after",
  "::before"
);

$hu-content-types: (
  "",
);

hu-cursor

$hu-cursor-alias: "";

$hu-cursor-modules: (base, state);

$hu-cursor-types: (
  auto,
  default,
  not-allowed,
  pointer,
  progress,
  text,
  wait,
);

hu-display

$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

$hu-flex-alias: "";

$hu-flex-modules: ();

$hu-flex-types: ();

hu-flex-basis

$hu-flex-basis-alias: "";

$hu-flex-basis-modules: (base);

$hu-flex-basis-types: (
  0
);

hu-flex-direction

$hu-flex-direction-alias: "";

$hu-flex-direction-modules: (base, responsive);

$hu-flex-direction-types: (
  column,
  column-reverse,
  row,
  row-reverse,
);

hu-flex-flow

$hu-flex-flow-alias: "";

$hu-flex-flow-modules: ();

$hu-flex-flow-types: ();

hu-flex-grow

$hu-flex-grow-alias: "";

$hu-flex-grow-modules: (base, responsive);

$hu-flex-grow-types: (
  0,
  1,
  2,
  3,
  4,
  5,
  auto,
);

hu-flex-shrink

$hu-flex-shrink-alias: "";

$hu-flex-shrink-modules: (base, responsive);

$hu-flex-shrink-types: $hu-flex-grow-types;

hu-flex-wrap

$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

$hu-float-alias: "";

$hu-float-modules: (base);

$hu-float-types: (
  left,
  none,
  right,
);

hu-font-family

$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

$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

$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

$hu-font-style-alias: "";

$hu-font-style-modules: (base);

$hu-font-style-types: (
  italic,
  normal,
  oblique,
);

hu-font-weight

$hu-font-weight-alias: "";

$hu-font-weight-modules: (base);

$hu-font-weight-types: (
  400,
  700,
);

hu-grid

$hu-grid-alias: "";

$hu-grid-modules: ();

$hu-grid-types: ();

hu-grid-area

$hu-grid-area-alias: "";

$hu-grid-area-modules: ();

$hu-grid-area-types: ();

hu-grid-auto-columns

$hu-grid-auto-columns-alias: "";

$hu-grid-auto-columns-modules: ();

$hu-grid-auto-columns-types: ();

hu-grid-auto-flow

$hu-grid-auto-flow-alias: "";

$hu-grid-auto-flow-modules: ();

$hu-grid-auto-flow-types: (
  column,
  dense,
  row,
);

hu-grid-auto-rows

$hu-grid-auto-rows-alias: "";

$hu-grid-auto-rows-modules: ();

$hu-grid-auto-rows-types: ();

hu-grid-column

$hu-grid-column-alias: "";

$hu-grid-column-modules: ();

$hu-grid-column-types: ();

hu-grid-column-end

$hu-grid-column-end-alias: "";

$hu-grid-column-end-modules: ();

$hu-grid-column-end-types: ();

hu-grid-column-gap

$hu-grid-column-gap-alias: "";

$hu-grid-column-gap-modules: ();

$hu-grid-column-gap-types: $hu-spacing-scale;

hu-grid-column-start

$hu-grid-column-start-alias: "";

$hu-grid-column-start-modules: ();

$hu-grid-column-start-types: ();

hu-grid-gap

$hu-grid-gap-alias: "";

$hu-grid-gap-modules: ();

$hu-grid-gap-types: $hu-spacing-scale;

hu-grid-row

$hu-grid-row-alias: "";

$hu-grid-row-modules: ();

$hu-grid-row-types: ();

hu-grid-row-end

$hu-grid-row-end-alias: "";

$hu-grid-row-end-modules: ();

$hu-grid-row-end-types: ();

hu-grid-row-gap

$hu-grid-row-gap-alias: "";

$hu-grid-row-gap-modules: ();

$hu-grid-row-gap-types: $hu-spacing-scale;

hu-grid-row-start

$hu-grid-row-start-alias: "";

$hu-grid-row-start-modules: ();

$hu-grid-row-start-types: ();

hu-grid-template

$hu-grid-template-alias: "";

$hu-grid-template-modules: ();

$hu-grid-template-types: ();

hu-grid-template-areas

$hu-grid-template-areas-alias: "";

$hu-grid-template-areas-modules: ();

$hu-grid-template-areas-types: ();

hu-grid-template-columns

$hu-grid-template-columns-alias: "";

$hu-grid-template-columns-modules: ();

$hu-grid-template-columns-types: ();

hu-grid-template-rows

$hu-grid-template-rows-alias: "";

$hu-grid-template-rows-modules: ();

$hu-grid-template-rows-types: ();

hu-height

$hu-height-alias: "";

$hu-height-modules: (base, print, responsive);

$hu-height-types: (
  0,
  100%,
  100vh,
  auto,
);

hu-hyphens

$hu-hyphens-alias: "";

$hu-hyphens-modules: (base);

$hu-hyphens-types: (
  auto,
  manual,
  none,
);

hu-justify-content

$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

$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

$hu-justify-self-alias: "";

$hu-justify-self-modules: ();

$hu-justify-self-types: $hu-justify-items-types;

hu-letter-spacing

$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

$hu-line-clamp-alias: "";

$hu-line-clamp-modules: (base);

$hu-line-clamp-types: (
  2,
  3,
);

hu-line-height

$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

$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

$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

$hu-max-height-alias: "";

$hu-max-height-modules: (base, print);

$hu-max-height-types: $hu-height-types;

hu-max-width

$hu-max-width-alias: "";

$hu-max-width-modules: (base, responsive);

$hu-max-width-types: (
  100%,
);

hu-min-height

$hu-min-height-alias: "";

$hu-min-height-modules: (base);

$hu-min-height-types: (
  0,
  100%,
  100vh,
  none,
);

hu-min-width

$hu-min-width-alias: "";

$hu-min-width-modules: (base, responsive);

$hu-min-width-types: (
  0,
  100%,
  100vw,
  none,
);

hu-mix-blend-mode

$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,
);

hu-momentum-scrolling

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

$hu-object-fit-alias: "";

$hu-object-fit-modules: ();

$hu-object-fit-types: (
  contain,
  cover,
  fill,
  none,
  scale-down,
);

hu-opacity

$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

$hu-order-alias: "";

$hu-order-modules: (base, responsive);

$hu-order-types: (
  0,
  1,
  2,
  3,
  4,
  5,
);

hu-outline

$hu-outline-alias: "";

$hu-outline-modules: (base, focus, hocus);

$hu-outline-types: (
  none,
);

hu-overflow

$hu-overflow-alias: "";

$hu-overflow-modules: (base, print, responsive);

$hu-overflow-types: (
  auto,
  hidden,
  visible,
);

hu-overflow-wrap

$hu-overflow-wrap-alias: "";

$hu-overflow-wrap-modules: (base);

$hu-overflow-wrap-types: (
  anywhere,
  break-word,
  normal,
);

hu-overflow-x

$hu-overflow-x-alias: "";

$hu-overflow-x-modules: $hu-overflow-modules;

$hu-overflow-x-types: $hu-overflow-types;

hu-overflow-y

$hu-overflow-y-alias: "";

$hu-overflow-y-modules: $hu-overflow-modules;

$hu-overflow-y-types: $hu-overflow-types;

hu-overscroll-behavior

$hu-overscroll-behavior-alias: "";

$hu-overscroll-behavior-modules: (base);

$hu-overscroll-behavior-types: (
  auto,
  contain,
  none,
);

hu-padding

$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

$hu-pointer-events-modules: (base, group-state, state);

$hu-pointer-events-types: (
  auto,
  none,
);

hu-pos

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

$hu-position-alias: "";

$hu-position-modules: (base, hocus, group-hocus, group-state, responsive, state);

$hu-position-types: (
  absolute,
  fixed,
  relative,
  static,
  sticky,
);

hu-resize

$hu-resize-alias: "";

$hu-resize-modules: (base);

$hu-resize-types: (
  both,
  horizontal,
  none,
  vertical,
);

hu-rotate

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,
);

hu-scale

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

$hu-scroll-behavior-alias: "";

$hu-scroll-behavior-modules: (base);

$hu-scroll-behavior-types: (
  auto,
  smooth,
);

hu-size

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;
}

hu-svg-fill-color

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)

hu-svg-fill-rule

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,
);

hu-svg-stroke-color

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

$hu-table-layout-alias: "";

$hu-table-layout-modules: (base);

$hu-table-layout-types: (
  auto,
  fixed,
);

hu-text-align

$hu-text-align-alias: "";

$hu-text-align-modules: (base, responsive);

$hu-text-align-types: (
  center,
  justify,
  left,
  right,
);

hu-text-decoration

$hu-text-decoration-alias: "";

$hu-text-decoration-modules: (base, visited, hocus, active);

$hu-text-decoration-types: (
  line-through,
  none,
  underline,
);

hu-text-shadow

$hu-text-shadow-alias: "";

$hu-text-shadow-modules: ();

$hu-text-shadow-types: ();

hu-text-transform

$hu-text-transform-alias: "";

$hu-text-transform-modules: (base);

$hu-text-transform-types: (
  capitalize,
  lowercase,
  none,
  uppercase,
);

hu-theme-background-color

theme__[$hu-background-color-alias] -> background-color

Inherits all of hu-background-color’s alias, modules and types variables.

hu-theme-border-color

theme__border-color -> border-color

Inherits all of hu-border-color’s modules, sides and types variables.

hu-theme-color

theme__[$hu-color-alias] -> color

Inherits all of hu-color’s alias, modules and types variables.

hu-transform

$hu-transform-alias: "";

$hu-transform-modules: ();

$hu-transform-types: ();

hu-transition

$hu-transition-alias: "";

$hu-transition-modules: (base, group-hocus, group-state, reduced-motion, state);

$hu-transition-types: ();

hu-transition-delay

$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

$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,
);

hu-transition-easing

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

$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,
);

hu-translate-x

translate-x -> transform: translateX

$hu-translate-x-alias: translate-x;

$hu-translate-x-modules: (base);

$hu-translate-x-types: (
  -100%,
  -50%,
  0,
  50%,
  100%,
);

hu-translate-y

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

$hu-truncate-text-alias: "";

$hu-truncate-text-modules: (base);

.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

hu-vertical-align

$hu-vertical-align-alias: "";

$hu-vertical-align-modules: (base);

$hu-vertical-align-types: (
  baseline,
  bottom,
  middle,
  text-bottom,
  text-top,
  top,
);

hu-visibility

$hu-visibility-alias: "";

$hu-visibility-modules: (base, hocus, group-hocus, group-state, print, responsive, state);

$hu-visibility-types: (
  hidden,
  visible,
);

hu-visually-hidden

$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

$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

$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

$hu-word-break-alias: "";

$hu-word-break-modules: (base);

$hu-word-break-types: (
  break-all,
  break-word,
  keep-all,
  normal,
);

hu-word-wrap

$hu-word-wrap-alias: "";

$hu-word-wrap-modules: (base);

$hu-word-wrap-types: (
  break-word,
  normal,
);

hu-z-index

$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,
);

Files

hucssley-classes.md

Latest commit

History