decorations

Background colors

Color classes that can be applied to most elements (or extended) at will

<div class="p1">
  <div class="bg-gray-lightest ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-gray-light ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-gray ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-gray-dark ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-gray-darkest ib" style="width: 50px; height: 50px;"></div>
</div>
"Ghost" colors (semi-transparencies)
<div class="p1 bg-gray">
  <div class="bg-ghost-white-light ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-ghost-white-base ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-ghost-white-dark ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-ghost-black-light ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-ghost-black-base ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-ghost-black-dark ib" style="width: 50px; height: 50px;"></div>
</div>
"Context" background colors (alert, info, success, warning)
<div class="p1">
  <div class="bg-alert ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-info ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-success ib" style="width: 50px; height: 50px;"></div>
  <div class="bg-warning ib" style="width: 50px; height: 50px;"></div>
</div>

Borders

$border-colors: (
  "gray-lightest":    $base-gray-lightest,
  "gray-light":       $base-gray-light ,
  "gray":             $base-gray,
  "gray-dark":        $base-gray-dark,
  "gray-darkest":     $base-gray-darkest,
  "link":             $link-color,
  "ghost-black-base": $ghost-black-base,
  "ghost-white-base": $ghost-white-base
);

xs border

sm border

md border

lg border

xl border

<p class="bordered border-xs"> xs border </p>
<p class="bordered border-sm"> sm border </p>
<p class="bordered border-md"> md border </p>
<p class="bordered border-lg"> lg border </p>
<p class="bordered border-xl"> xl border </p>

all borders

border bottom

border top

border left and right

no border

<p class="bordered"> all borders </p>
<p class="border-b"> border bottom </p>
<p class="border-t"> border top </p>
<p class="border-l border-r"> border left and right </p>
<p class="border-none"> no border </p>

lightest gray border

light gray border

gray border

dark gray border

darkest gray border

ghost black base border

ghost white base border

<p class="bordered border-md border-gray-lightest"> lightest gray border </p>
<p class="bordered border-md border-gray-light"> light gray border </p>
<p class="bordered border-md border-gray"> gray border </p>
<p class="bordered border-md border-gray-dark"> dark gray border </p>
<p class="bordered border-md border-gray-darkest"> darkest gray border </p>
<p class="bordered border-md border-link"> link border </p>
<p class="bordered border-md border-ghost-black-base"> ghost black base border </p>
<div class="p1 bg-gray">
  <p class="bordered border-md border-ghost-white-base"> ghost white base border </p>
</div>

Ghost classes (opacity)

Content
Content
Content
Content
Content
No opacity
<div class="bg-gray-light ghost-lightest">Content</div>
<div class="bg-gray-light ghost-light">Content</div>
<div class="bg-gray-light ghost-base">Content</div>
<div class="bg-gray-light ghost-dark">Content</div>
<div class="bg-gray-light ghost-darkest">Content</div>
<div class="bg-gray-light ghost-none">No opacity</div>

Radius rounding

xs radius

sm radius

md radius

lg radius

xl radius

<p class="bg-gray-light round-xs"> xs radius </p>
<p class="bg-gray-light round-sm"> sm radius </p>
<p class="bg-gray-light round-md"> md radius </p>
<p class="bg-gray-light round-lg"> lg radius </p>
<p class="bg-gray-light round-xl"> xl radius </p>

top radius

bottom radius

left radius

right radius

no radius

<p class="bg-gray-light round-md round-t"> top radius </p>
<p class="bg-gray-light round-md round-b"> bottom radius </p>
<p class="bg-gray-light round-md round-l"> left radius </p>
<p class="bg-gray-light round-md round-r"> right radius </p>
<p class="bg-gray-light round-md round-none"> no radius </p>

Shadows

shadow

light shadow

white shadow

light white shadow

<p class="shadowed"> shadow </p>
<p class="shadowed-light"> light shadow </p>
<div class="p1 bg-gray">
  <p class="shadowed-white"> white shadow </p>
  <p class="shadowed-white-light"> light white shadow </p>
</div>
<p class="shadowed-link-border"> link border using shadow </p>
<p class="shadowed-link-light-border"> light link border using shadow </p>

Skins

Grays skin colors
default text .light text .dark text
default text .light text .dark text
default text .light text .dark text
default text .light text .dark text
default text .light text .dark text
<div class="p1">
  <div class="skin-gray-lightest bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-gray-light bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-gray bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-gray-dark bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-gray-darkest bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
</div>
"Context" skin colors (alert, info, success, warning)
default text .light text .dark text
default text .light text .dark text
default text .light text .dark text
default text .light text .dark text
<div class="p1">
  <div class="skin-alert bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-info bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-success bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
  <div class="skin-warning bordered p1">
    <span>default text</span>
    <span class="light">.light text</span>
    <span class="dark">.dark text</span>
  </div>
</div>

Skins Mixins

Creating your own skins mixins: There are three different mixins used to rapidly generate decorative skin styles. 1. @mixin bg_color() 2. @mixin color() 3. @mixin skin()

bg_color($bg, $name)
  • $bg is a color value or variable name that refers to the color you want (hex, rgb, rgba).
  • $name is a string to uniquely identify the class

Input

@include bg_color(#ff3a5c, "watermelon");

Output

%bg-watermelon,
.bg-watermelon {
  background-color: #ff3a5c;
}
color($color, $name)
  • $color is a color value or variable name that refers to the color you want (hex, rgb, rgba).
  • $name is a string to uniquely identify the class

Input

@include color(rgb(133, 231, 182), "mint");

Output

%color-mint,
.color-mint {
  color: rgb(133, 231, 182);
}
skin($bg, $name, $border: darken($bg, 17.5%), $color: "white", $color_dark: $border)
  • $bg is a color value or variable name that refers to the color you want (hex, rgb, rgba).
  • $name is a string to uniquely identify the class
  • $border (OPTIONAL) is a color value or variable name that refers to the border color of the module
  • $color (OPTIONAL) is a color value or variable name that refers to the default text color of the module
  • $color_dark (OPTIONAL) is a color value or variable name that refers to the .dark text color of the module

Input

@include skin(rgb(133, 231, 182), "mint", $color_dark: darken(rgb(133, 231, 182), 33%);

Output

%skin-mint,
.skin-mint {
  background-color: rgb(133, 231, 182);
  border-color: darken(rgb(133, 231, 182), 17.5%);
  color: white;
  .p, p  { color: white; }
  .light { color: white; }
  .dark  { color: darken(rgb(133, 231, 182), 33%); }
  }
}

There are several pre-defined background, color, and skin classes available by default. Please see the examples for classes and placeholders for color decorations.

Text colors

Text color classes

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

Here's some text

<div class="p1 bg-gray-light">
  <p class="color-gray-lightest">Here's some text</p>
  <p class="color-gray-light">Here's some text</p>
  <p class="color-gray">Here's some text</p>
  <p class="color-gray-dark">Here's some text</p>
  <p class="color-gray-darkest">Here's some text</p>
  <p class="color-ghost-white-light">Here's some text</p>
  <p class="color-ghost-white-base">Here's some text</p>
  <p class="color-ghost-white-dark">Here's some text</p>
  <p class="color-ghost-black-light">Here's some text</p>
  <p class="color-ghost-black-base">Here's some text</p>
  <p class="color-ghost-black-dark">Here's some text</p>
  <p class="color-alert">Here's some text</p>
  <p class="color-info">Here's some text</p>
  <p class="color-success">Here's some text</p>
  <p class="color-warning">Here's some text</p>
</div>