color(name)

/../hex-core/src/mixins/_colors.scss

Get a color from the brand guide

.test {
  color: color('bitnami');
  background-color: color('iron');
}

color-level(name, level)

/../hex-core/src/mixins/_colors.scss

Get a tint or shade of a base color. The level variable should be a number between 100 to 1000 in steps of one hundred. The base color is located in 500.

.test {
  color: color-level('bitnami', 200);
  background-color: color('iron', 700);
}

gradient(name, directionOrDegrees, firstPosition, lastPosition)

/../hex-core/src/mixins/_colors.scss

Generate a proper gradient.

.test {
  background: gradient('brand', 45deg);
}

button-gradient(name)

/../hex-core/src/mixins/_forms.scss

Return the gradient for a button with the cut corner already added. Inspired by this pen. This is the simplest approach I've found.

button-gradient('brand');

button-size(name-of-scale)

/../hex-core/src/mixins/_forms.scss

Mixin to generate a class for buttons. This class will modify the size of the buttons.

@include('small');

spacing(name)

/../hex-core/src/mixins/_spacing.scss

Get a spacing value based on the size unity. This method will throw an exception if the name of the size is not valid.

.test {
  margin: spacing('tiny');
}
.test2 {
  padding-bottom: spacing('huge');
}

margin(name)

/../hex-core/src/mixins/_spacing.scss

DEPRECATED: see spacing(name)

Get a margin value based on the size unity. This method will throw an exception if the name of the size is not valid.

.test {
  margin: margin('tiny');
}
.test2 {
  margin-bottom: margin('huge');
}

padding(name)

/../hex-core/src/mixins/_spacing.scss

DEPRECATED: see spacing(name)

Get a padding value based on the size unity. This method will throw an exception if the name of the size is not valid.

.test {
  padding: padding('tiny');
}
.test2 {
  padding-top: padding('huge');
}

su(multiplier)

/../hex-core/src/mixins/_spacing.scss

Return multiplier * $su. This method allows us to set the correct vertical rhythm of the page.

.test {
  height: su(10);
}

type-scale(name)

/../hex-core/src/mixins/_typography.scss

Get a font-size based on the standard values. You can check Type scale to check the current scale and size.

.test {
  font-size: type-scale('huge');
}

line-height(name)

/../hex-core/src/mixins/_typography.scss

Get a line-height based on the standard values.

NOTE: reset, tiny, giant and huge are not available.

.test {
  line-height: line-height('big');
}

clearfix()

/../hex-core/src/mixins/_utils.scss

Add clearfix code to the current selector. Clearfix is useful to prevent bad positioning of floated elements.

.test {
  @include clearfix();
}

z-index(name)

/../hex-core/src/mixins/_z-index.scss

Get the z-index from the available layer positions:

.base {
  z-index: z-index('base');
}
.above {
  z-index: z-index('above');
}