ITL utility_classes

ITL utility_classes

Source: _variables.scss, line 15

2 Colors

The primary colors.
Colors can all be appended with '--faded' to lower the opacity.

  • #1abc9c; Turqoise

    color(turq)

  • #2ecc71; Weed Green

    color(green)

  • #3498db; Ballz Blue

    color(blue)

  • #9b59b6; Really Purple

    color(purple)

  • #34495e; Midnight Black

    color(black)

  • #f1c40f; Asian Yellow

    color(yellow)

  • #e67e22; Mandarin Orange

    color(orange)

  • #e74c3c; Bread Red

    color(red)

  • #ecf0f1; Off White

    color(white)

  • #95a5a6; Very Gray

    color(gray)

  • #ffffff; Actually white

    color(blank)

  • #eee; Another shade of gray

    color(eee)

Source: _variables.scss, line 62

2.1 Gradients

Some cool gradients

turq
green
blue
purple
black
yellow
orange
red
white
gray
blank
eee

Source: _colors.scss, line 3

2.2 Background-colors

@mixin bgColor($color) To change the background-colors of elements use these classes

  • .bg-<color>: changes the background color
  • <ANY>--faded: lowers the opacity of the color

Example

Red div
White div
Blue div
Blue faded div
<div class="bg-grad-red p16">Red div</div>
<div class="bg-white p16">White div</div>
<div class="bg-blue p16">Blue div</div>
<div class="bg-blue--faded p16">Blue faded div</div>

Source: _colors.scss, line 41

2.3 Background-style

@mixin bgStyle([shaded, darken, lighten, shadow]) To change the background-colors of elements use these classes

  • .bg-lighten: ligthens the entire element Also lightens the fonts
  • .bg-darken: darkens the entire element Also darkens the fonts
  • .bg-shaded (only for nested elements): darkens the element Also darkens the fonts
  • <ANY>--faded: lowers the opacity of the color

Example

Purple div
Shaded div
Purple div
Darkend div
Darkened Blue div
Lightend Blue div
<div class="bg-purple p16">Purple div<div class="bg-shaded p4">Shaded div</div></div>
<div class="bg-purple p16">Purple div<div class="bg-darken p4">Darkend div</div></div>
<div class="bg-blue bg-darken p16">Darkened Blue div</div>
<div class="bg-blue bg-lighten p16">Lightend Blue div</div>

Source: _colors.scss, line 148

2.4 Border-colors

@mixin border($color) To add borders in various colours use the following classes:

  • .underline-<color>: adds a 1px border at the top side of the element
  • .upperline-<color>: adds a 1px border at the bottom of the element
  • .border-<color>: adds a border around the element
  • <ANY>--faded: lowers the opacity of the color

Example

Red underlined text

Purple underlined text

Blue bordered text

<h1 class="underline-red">Red underlined text</h1>
<h1 class="upperline-purple">Purple underlined text</h1>
<h1 class="border-blue">Blue bordered text</h1>

Source: _colors.scss, line 112

2.5 Font-colors

@mixin color($color) Use the color class directly to change the font color

  • .<color>: font color
  • .<color>--faded: lowers the opacity of the color
  • .grad-<color>: gradient font color

Example

Red text

faded blue text

Purple gradient text

<h1 class="red">Red text</h1>
<h1 class="red--faded">faded blue text</h1>
<h1 class="grad-purple">Purple gradient text</h1>