Mixins

• Color
• Typography
• Spacing
• Accessibility
• Miscellaneous

A look at CodyFrame's mixins.

Color #

define-hsl-color #

The define-hsl-color (defineColorHSL in CodyFrame v3) mixin is used to generate the CSS custom properties of a new color:

:root {
  @include define-hsl-color(--color-primary, 220, 90%, 56%);
}

Which outputs in CSS:

:root {
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

alpha #

The alpha function is used to modify the opacity value:

.component {
  // opacity = 0.2
  background: alpha(var(--color-contrast-higher), 0.2);
}

lightness #

The lightness function is used to modify the lightness value:

.component {
  // return color with lightness multiplied by 0.9
  background-color: lightness(var(--color-name), 0.9);
}

adjust-hsla #

The adjust-hsla (adjustHSLA in CodyFrame v3) function is used to modify any of the color variables (hue/saturation/lightness/alpha):

.component {
  // adjust-hsla($color, $hue-multiplier: 1, $saturation-multiplier: 1, $lightness-multiplier: 1, $alpha: 1)
  background-color: adjust-hsla(var(--color-primary), 0.85, 1, 1, 0.9);
}

Typography #

textUnit Mixin (deprecated in v4)

This mixin is used to modify the typography (CSS) unit on a component level. Pass to the mixin the value you want to use as new text unit (e.g., 1rem or 16px):

.component {
  @include textUnit(1rem);
}

// starting from CodyFrame v2.8.0, the textUnit mixin is equivalent to 👇
.component {
  --text-unit: 1rem;
  font-size: var(--text-unit);
}

This option is useful if you want to prevent Em units' compounding effect on specific components.

fontSmooth Mixin

This mixin can be used to add font smoothing to your text elements, useful for light text on dark backgrounds.

.dark-theme {
  @include fontSmooth;
}

lhCrop Mixin (deprecated in v4)

This mixin is used to remove the top space of a text element that is caused by the element line-height.

Here's how you can use this mixin:

.text-to-crop {
  @include lhCrop(1.2); // pass the line-height of .text-to-crop element
}

The mixin also accepts a (not required) second parameter (a number smaller than 1 that varies with the font-family value) that improves the crop effect:

.text-to-crop {
  @include lhCrop(1.2, 0.72);
}

Since this additional parameter depends on the font-family only (it is not affected by font-size or font-weight or line-height), a good idea would be to define a CSS variable for each one of your font families. You can then use that variable to call the lhCrop mixin; this way, if you need to change your font-family, you’ll only need to update the  value of that variable with no need to modify the mixin calls. 

In the custom-style/_typography.scss file, you find this variable defined for the primary font (--font-primary-capital-letter). Its default value is one, so make sure to update it according to your font-family.

.text-to-crop {
  @include lhCrop(1.2, var(--font-primary-capital-letter));
}

If your project requires more than one font-family, make sure to define new CSS variables for each one of them (eg. --font-secondary-capital-letter, ...).

You can use the Typography Editor to determine the value of this variable (and export the code for the line-height crop).

If you want to learn more about the mixin, take a look at this article explaining how the mixin formula works.

Spacing (deprecated in v4) #

The spaceUnit mixin is used to modify the CSS --space-unit variable on a component level. Pass to the mixin the value you wish to use as new --space-unit value for your component:

.component {
  @include spaceUnit(1rem);
}

// starting from CodyFrame v2.8.0, the spaceUnit mixin is equivalent to 👇
.component {
  --space-unit: 1rem;
}

You can use this mixin, for example, to switch from a spacing system based on Em units (CodyFrame's default unit) to one based on Rem units.

Rem units are useful if you don't want your spacing to be affected by the font-size of the body/component.

Accessibility #

Accessibility mixins:

Here's an example of how to use those mixins to change the visibility of an element:

.component span {
  @include srHide; // visually hide the span element - it is still accessible to SR
}

.component--is-visible span {
  @include srShow; // visually reveal the span element
}

Miscellaneous #

triangle Mixin

This mixin is used to create a CSS triangle. Add it to the element that you want to shape as a triangle:

.triangle {
  @include triangle(right, 12px, var(--color-white));
}

You will need to pass the direction of the triangle (up/right/down/left), the width of the triangle (distance between base and vertex, e.g., 12px) and the background color (e.g., var(--color-white)).

Reset Mixin

You can use this mixin to reset the default user agent style of an element. For example, you can use it to reset the default style of a button element:

.button-element {
  @include reset;
}