A dynamically generated set of typesetting utility classes, in charge of modifying an element's font-size and line-height, based on sizes defined in the $jigsass-sizes variable.

Additionally, JigSass Type provides utility classes for setting an element's font-weight, font-style and font-family stacks through the $jigsass-font-stacks variable.

Available classes

• u-type--<named-size> (example: .u-type--alpha)
• u-fw--<weight> (example: .u-fw--700)
• u-fs--i (italic)
• u-fs--n (normal)
• u-fs--o (oblique)
• u-ff--<stack> (example: .u-ff--serif)

Installation

Using npm:

npm i -S jigsass-utils-type

Usage

Import JigSass Utils Type into your main scss file near its very end, together with all other utilities (utilities should always be the last to be imported).

@import 'path/to/jigsass-utils-type/scss/index';

Like all other JigSass Utils, JigSass Type does not automatically generate any CSS when imported. You would need to explicitly indicate that each individual typesetting class should actually be generated in each component or object it is used in:

// _c.foo.scss
.foo {
  @include jigsass-util(u-type, $modifier: alpha);

  ...
}

// _c.bar.scss
.bar {
  @include jigsass-util(u-type, $modifier: epsilon);
  @include jigsass-util(u-type, $modifier: delta, $from: large);

  ...
}

Doing so helps us a great deal with portability, as no matter where we import component or object partials, the correct utility classes will be generated. Think of it as a poor man's dependency management.

Developer communication is also assisted by including "dependencies" wherever they are required, as anyone going through a partial, can easily understand how it should be marked up with just a glance.

As far as bloat goes, just don't worry about it - the actual styles will only be generated once, at the location in the cascade where the Jigsass Type partial was imported into the main file.

JigSass Type classes are responsive-enabled, using JigSass MQ and the breakpoints defined in the $jigsass-breakpoints variable.

Based on the breakpoint arguments passed to jigsass-util when including a type class, responsive modifiers are generated according to the following logic:

.u-type--modifier[-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

@include jigsass-util(u-type, $modifier: zeta);

will generate the .u-type--zeta class, which is not limited to any media-query.

@include jigsass-util(u-type, $modifier: zeta, $until: medium);

will generate the .u-type--zeta--until-medium class, which will be in effect at (max-width: 37.49em) and will override styles in the default class until that point.

@include jigsass-util(u-type, $modifier: zeta, $from: large, $misc: landscape);

will generate the .u-type--zeta--from-large-when-landscape class, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class under these conditions.

License: MIT

JigSass Utils Type can be tweaked by setting the values of the following configuration variables. To override the default values, set your own before importing JigSass Utils Type.

Font family stacks

$jigsass-font-stacks

Type: Map

A map holding named lists of font-family stacks for use as font-family modfiers:

@include jigsass-util(u-ff, $modifier: serif);

Default: ()

A util to modify an element's font size to the that set in $jigsass-sizes.zeta and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: zeta[, $from, $until, $misc]);

Example

<p class='u-type--zeta'>
  This is <em>zeta</em> sized text.
</p>

A util to modify an element's font size to the that set in $jigsass-sizes.epsilon and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: epsilon[, $from, $until, $misc]);

Example

<p class='u-type--epsilon'>
  This is <em>epsilon</em> sized text.
</p>

A util to modify an element's font size to the that set in $jigsass-sizes.delta and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: delta[, $from, $until, $misc]);

Example

<p class='u-type--delta'>
  This is <em>delta</em> sized text.
</p>

A util to modify an element's font size to the that set in $jigsass-sizes.gamma and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: gamma[, $from, $until, $misc]);

Example

<p class='u-type--gamma'>
  This is <em>gamma</em> sized text.
</p>

A util to modify an element's font size to the that set in $jigsass-sizes.beta and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: beta[, $from, $until, $misc]);

Example

<p class='u-type--beta'>
  This is <em>beta</em> sized text.
</p>

A util to modify an element's font size to the that set in $jigsass-sizes.alpha and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: alpha[, $from, $until, $misc]);

Example

<p class='u-type--alpha'>
  This is <em>alpha</em> sized text.
</p>

A util to modify an element's font size to the that set in $jigsass-sizes.alpha and adjust its line-height accordingly.

Include with:

@include jigsass-util(u-type, $modifier: alpha:hover[, $from, $until, $misc]);

Example

<p class='u-type--alpha:hover'>
  This is <em>alpha:hover</em> sized text.
</p>

A util class for setting an element's font-style to italic

Include with:

@include jigsass-util(u-fs, $modifier: i[, $from, $until, $misc]);

example

<p class=u-fs--i>
  This element's font-style is set to <code>italic</code>.
</p>

A util class for setting an element's font-style to oblique

Include with:

@include jigsass-util(u-fs, $modifier: o[, $from, $until, $misc]);

example

<p class=u-fs--o>
  This element's font-style is set to <code>oblique</code>.
</p>

A util class for setting an element's font-style to normal

Include with:

@include jigsass-util(u-fs, $modifier: n[, $from, $until, $misc]);

example

<p class=u-fs--n>
  This element's font-style is set to <code>normal</code>.
</p>

A util class for setting an element's font-weight to 400

Include with:

@include jigsass-util(u-fw, $modifier: 400[, $from, $until, $misc]);

example

<p class=u-fw--400>
  This element's font-weight is set to <code>400</code>.
</p>

A util class for setting an element's font-weight to 700

Include with:

@include jigsass-util(u-fw, $modifier: 700[, $from, $until, $misc]);

example

<p class=u-fw--700>
  This element's font-weight is set to <code>700</code>.
</p>

A util class for setting an element's font-weight to 700:hover

Include with:

@include jigsass-util(u-fw, $modifier: 700:hover[, $from, $until, $misc]);

example

<p class=u-fw--700:hover>
  This element's font-weight is set to <code>700:hover</code>.
</p>

A util class for setting an element's font-familly to the serif named stack

Include with:

@include jigsass-util(u-ff, $modifier: serif[, $from, $until, $misc]);

example

<p class=u-ff--serif>
  This element's font-family is set to the <code>serif</code> stack.
</p>

A util class for setting an element's font-familly to the sans-serif named stack

Include with:

@include jigsass-util(u-ff, $modifier: sans-serif[, $from, $until, $misc]);

example

<p class=u-ff--sans-serif>
  This element's font-family is set to the <code>sans-serif</code> stack.
</p>

A util class for setting an element's text decoration to underline

Include with:

@include jigsass-util(u-td, $modifier: u[, $from, $until, $misc]);

example

<p class=u-td--u>
  This element's font-style is set to
  <code>underline</code>
.
</p>

A util class for setting an element's text decoration to line-through

Include with:

@include jigsass-util(u-td, $modifier: l[, $from, $until, $misc]);

example

<p class=u-td--l>
  This element's font-style is set to
  <code>line-through</code>
.
</p>

A util class for setting an element's text decoration to line-through on :hover

Include with:

@include jigsass-util(u-td, $modifier: l:hover[, $from, $until, $misc]);

example

<p class=u-td--l:hover>
  This element's font-style is set to
  <code>line-through</code>
 on <code>:hover</code>.
</p>