ITL utility_classes

ITL utility_classes

Source: _fonts.scss, line 1

3.1 Font families

@mixin text
@mixin title

  • .title: sets a title font (default: Montserrat)
  • .text: sets a text font (default: Raleway)

Example

This is an example of a regular title

This is an example of a regular paragraph

This is an example of a prettier title

This is an example of a prettier paragraph

<h2>This is an example of a regular title</h2>
<p>This is an example of a regular paragraph</p>
<h2 class="title">This is an example of a prettier title</h2>
<p class="text">This is an example of a prettier paragraph</p>

Source: _fonts.scss, line 115

3.2 Font effects

  • .thin: makes the fontweight 100
  • .light: makes the fontweight 300
  • .bold: makes the fontweight bold
  • .note: makes font smaller and cursive
  • .lowercase: makes text all lowercase
  • .uppercase: makes text all caps
  • .capitalize: capitalizes text

Example

Text that holds very thin text inside of it

Text that holds Quite thin text inside of it

Text that holds Some sort of note inside of it

<p class="text">Text that holds <span class="thin">very thin text</span> inside of it</p>
<p class="text">Text that holds <span class="light">Quite thin text</span> inside of it</p>
<p class="text">Text that holds <span class="note">Some sort of note</span> inside of it</span></p>

Source: _fonts.scss, line 29

3.3 Relative fontsizes

@mixin th(th)
@mixin tb(bigger)
@mixin ts(smaller)
Use these classes to quicky change the fontsize

  • .tb5, .th0 - largest font
  • .tb4, .th1 - second largest font
  • .tb2, .th3 - fourth largest font
  • .ts1 - first font smaller than normal
  • .ts2 - second font smaller than normal
  • .ts3 - smallest font

Example

This is a font size

This is a font size

This is a font size

This is a font size

<div>
 <p class="tb3">This is a font size</p>
 <p class="tb1">This is a font size</p>
 <p class="ts1">This is a font size</p>
 <p class="ts3">This is a font size</p>
</div>

Source: _fonts.scss, line 89

3.4 Quick fontsizes

@mixin smaller
@mixin bigger

  • .smaller: makes the font slightly smaller
  • .bigger: makes the font slightly bigger

Example

Text that holds some smaller text inside of it

Text that holds some bigger text inside of it

<p>Text that holds <span class="smaller">some smaller text</span> inside of it</p>
<p>Text that holds <span class="bigger">some bigger text</span> inside of it</p>