roolith css framework

Colors

Here is default color palette -

primary

#0099FF

secondary

#373459

tertiary

#tertiary

info

#F8BF16

success

#9ECF91

danger

#C40000

link

#67BCEF

dark

#212121

black

#000000

white

#FFFFFF

There are also helper classes for all color. To make text color use .color-{colorName} and for background color use bg-color-{colorName}

Lorem ipsum dolor sit amet, consectetur.

<p class="color-primary">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-secondary">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-tertiary">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-info">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-success">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-danger">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-link">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-dark">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-black">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-white">Lorem ipsum dolor sit amet, consectetur.</p>

For background color use following class names -

<div class="bg-color-primary">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-secondary">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-tertiary">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-info">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-success">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-danger">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-link">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-dark">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-black">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-white">Lorem ipsum dolor sit amet, consectetur.</div>

SASS

Reference from _settings.scss

$colors: (
    primary: #0099FF,
    secondary: #373459,
    tertiary: #F4751A,
    info: #F8BF16,
    success: #9ECF91,
    danger: #C40000,
    link: #67BCEF,
    dark: #212121,
    black: #000000,
    white: #ffffff
);

Example SASS for loop -

@each $name, $value in $colors {
    .selector-#{$name} {
        background: $value;
    }
}