CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Mixins

The πŸ“ base/_mixins.scss file is used to collect SASS mixins and functions.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.


πŸ” On this page:

  1. Color
  2. Typography
  3. Space Unit
  4. Miscellaneous

Color #

Name 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

Here's an example of how to use the defineColorHSL mixin:

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

The mixin will define 4 different css variables:

  • --color-primary: hsl(220, 90%, 56%);
  • --color-primary-h: 220;
  • --color-primary-s: 90%;
  • --color-primary-l: 56%.

Make sure to define all your color variables inside the πŸ“ custom-style/_colors.scss file.

If you want to learn more about why we use this mixin to define our color variables, you can take a look at this article on combining SASS color functions and CSS Variables.

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 #

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

textUnit Mixin

This mixin can be used to modify the CSS --text-{size} variables on a component level. Pass to the mixin the value you want to use as new text base size (e.g., 1rem or 16px):

component {
  @include textUnit(1rem);
}

You can use this mixin to switch from a type scale system based on em units (which is the default for the CodyHouse framework) to one based on a different unit (e.g., rem). This option is useful if you don't want to extend the automatic (typography) responsive behavior to a specific component (e.g., small components whose size should remain identical, regardless of the viewport size).

Optionally, you can pass a second argument to the mixin: this will be used as new scale ratio (default is 1.2):

component {
  @include textUnit(1rem, 1.3);
}

fontSmooth Mixin

This mixin can be used to add font smoothing to your text elements. It modifies the -webkit-font-smoothing/-moz-osx-font-smoothing CSS property of the text.

We suggest to use it 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.

Space Unit #

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

The spaceUnit mixin can be 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(1.2em); // --space-unit is now 1.2em
}

The mixin will automatically update all the --space-{size} variables based on the new value of the --space-unit.

For example, you can use this mixin to switch from a spacing system based on em units (which is the default for the CodyHouse framework) to one based on rem units:

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

This could be useful if you don't want your spacing variables to change when the font-size of the body (or component element) is updated.

Miscellaneous #

Name 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