πŸŽ‰ Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Mixins

A look at CodyFrame's mixins.


πŸ” On this page:

  1. Color
  2. Typography
  3. Spacing
  4. Accessibility
  5. Miscellaneous

Color #

Mixin Description
defineColorHSL(--color-name, hue, saturation, lightness) SASS Mixin. Used to define HSL color variables.
alpha(var(--color-name), alpha) SASS Function. Used to return a color with different opacity value.
lightness(var(--color-name), alpha) SASS Function. Used to return color with different lightness value.

defineColorHSL Mixin

The defineColorHSL mixin is used to define your colors in the πŸ“ custom-style/_colors.scss file :

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

Which outputs in CSS:

:root, [data-theme="default"] {
  --color-primary: hsl(220, 90%, 56%);
  --color-primary-h: 220;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
}

alpha Function

Here's an example of how to use the alpha function:

.component {
  // return color with opacity 0.2
  color: alpha(var(--color-name), 0.2);
}

⚠️ Important: the --color-name variable needs to be defined using the defineColorHSL mixin for the alpha function to properly work.

lightness Function

Here's an example of how to use the lightness function:

.component {
  // return color with lightness equal to (--color-name-l*0.9)
  background-color: lightness(var(--color-name), 0.9);
}

⚠️ Important: the --color-name variable needs to be defined using the defineColorHSL mixin for the lightness function to properly work.

Typography #

Mixin Description
textUnit SASS mixin. Edit text unit on a component level.
fontSmooth SASS Mixin. Edit font rendering.
lhCrop SASS Mixin. Remove top space on text elements.

textUnit Mixin

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

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 #

Mixin Description
spaceUnit SASS mixin. Edit space unit on a component level.

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:

Mixin Description
srHide hide content to all users, except those visiting your website using a screen reader
srShow reveal content that was visually hidden

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 #

Mixin Description
triangle SASS mixin. Create CSS Triangle.
reset SASS mixin. Reset user agent style.

triangle Mixin

This mixin can be 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 (eg. right), the width of the triangle (distance between base and vertex, eg. 12px) and the background color (eg. 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;
}

βœ… Project duplicated

βœ… Project created

There was an error while trying to export your project. Please try again or contact us