Functions

Tyfy includes custom SASS functions that make the framework easier to use.

tylead

This function calculates a grid-based line height for a given font size and (optional) line height style. The function helps maintain the baseline grid.

Arguments

$font-size
required
Font size value in rem units.
$leading-style
optional
Default value is base
Accepted values are base, heading, tall, or short.

Variables

The leading styles listed above correspond to scalar values. The values adjust the calculated line height to achieve a particular style. A larger value will result in a smaller line height and a smaller value will give a larger line height. These values were determined through experimentation and should not need to be changed. However, the values are available as variables. They can be overridden if you wish to modify the line height calculation.

$tylead-adjustment-tall
0.8 !default;
$tylead-adjustment-base
0.9 !default;
$tylead-adjustment-heading
1 !default;
$tylead-adjustment-short
1.2 !default;

Example

p {
  font-size:$tyfont-size-base;
  line-height:tylead($tyfont-size-base);
}
p.special {
  font-size:1.2rem;
  line-height:tylead(1.2rem,tall);
}

tygrid

This function calculates a grid-based length value. This function facilitates the use of the $tygrid-unit variable by making your SCSS easier to read, write, and maintain.

Arguments

$multiplier
optional
default value is 1
Floating point value representing the number of grid units in the desired size.

Example

div {
  margin-bottom:tygrid(1.5); // 1.5 times the default grid unit length
  width:tygrid(50); // 50 times the default grid unit length
}

tyscale

This function facilitates use of the modular typographic scale by automating the calculation of scale-based font sizes. The function accepts an integer and returns a font size, in rem units, that is the specified number of steps above or below the base font size on the typographic scale. The value 0 will return the base font size. If the argument is 2, the function will return the font size that is 2 steps larger on the scale. If the argument is -1, the function will return the font size that is 1 step smaller on the scale.

Arguments

$exponent
optional
default value is 0
Integer representing a number of steps from the base font size on the modular scale to calculate; positive and negative values allowed.

Example

$tyfont-size-base: 1rem;
small {
  font-size: tyscale(-1) !default; // 0.833rem; one scale step down from the base size
}
h6 {
  font-size: tyscale(0) !default;  // 1rem; using 0 as the exponent is the same as setting the value to the base size
  }
h5 {
  font-size: tyscale(1) !default;  // 1.2rem; one scale step up from the base size
}

tychar

This function facilitates the use of the icon font in CSS pseudo-elements by working around a problem in SASS related to character codes. This function properly applies icons when used in the content attribute of a pseudo-element.

Arguments

$code
required
A character code without the preceding slash (“\”); there are SASS variables for the character codes.

Example

div::before {
  content: tychar($tyicons-angle-left);
}

encodecolor

This function helps using SASS color variables in URL encoded strings. This is specifically useful when adding SVG background images in SCSS. The code for this function comes from a GitHub Gist by certainlyakey.

Arguments

$color
required
A sass color variable name.

Example

input:checked {
  background-image:url("data:image/svg+xml;charset=ASCII,
  %3Csvg%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%2064%2064%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.
  org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}
  %22%20points%3D%2223%2056%2020.9401855%2053.9401855%200%2033%207%2026%2023%2042%2057%208%2064%2015%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}

SASS Map Helpers

Tyfy provides SASS maps for easily maintaining consistent, named values across modules. These values can be accessed using the map-get() function. The following custom functions are shorthand for map-get-ing values from the SASS maps for the named font-size, spacing, and duration values.

Each of the following custom functions requires the SASS map key name as an argument. You can see all of the key names in the documentation for the settings module.

tyspacing

This function takes a key from the $tyspacing SASS map and returns a rem-unit spacing value.

div {
  margin-left:tyspacing(md); // equivalent to tygrid(map-get($tyspacing,md))
}

tyfont-size

This function takes a key from the $tyfont-size SASS map and returns a rem-unit font size value.

h2 {
  font-size:tyfont-size(h2); // equivalent to tyscale(map-get($tyfont-size,h2))
}

tyduration

This function takes a key from the $tyduration SASS map and returns a timing value.

a {
  transition:color tyduration(hover); // equivalent to map-get($tyduration,hover)
}