construct.oocss

Construct.oocss is a lightweight, Sass-based object-oriented framework that uses BEM-style naming conventions.

Visit our Google Group

Configuration

Overview

Inside imports.scss, you will notice the first two import statement point to:

1. A Build File

@imports "builds/_default.scss";  

Build files contain variables that determine the components you want to use.

2. A Theme File

@imports "themes/_default.scss";  

Theme files contain variables that determine the typography you want to use.

Creating a Build

1. Make a copy from the original

 copy builds/_default.scss builds/new-build.scss

2. Edit the variables

 $use-alert: true !default;
 
 $use-bar: true !default;

 $use-box: true !default;

 $use-btn: true !default;     
 .
 .
 .

3. Change the following path in imports.scss to the new file

@imports "builds/_default.scss";  

Creating a Theme

1. Make a copy from the original

 copy themes/_default.scss builds/new-build.scss

2. Edit the variables

 $h1-size: 24px;
 
 $h2-size: 24px;

 $h3-size: 24px;     
 .
 .
 .

3. Change the following path in imports.scss to the new file

@imports "builds/_default.scss";  

Swatching

Overview

Inside the theme file, you will notice three lists. These are used to build out color skins.

1. $swatch-classname

$swatch-classname:
{
    "white",
    "black",
    .
    .
    .
}

Used to create a list of color skins based on the name in this list.

2. $swatch-backcolor

$swatch-backcolor:
{
    #fff,
    #000,
    .
    .
    .
}

Used to set the default background-color on each color skin.

3. $swatch-forecolor

$swatch-forecolor:
{
    #000,
    #fff
    .
    .
    .
}

Used to set the default foreground-color on each color skin.

How does it render

To understand what happens behind the scenes, lets see how a .red swatch would render.

1. Theme File

 $swatch-classname:
 {
     "red"
 };

 $swatch-backcolor:
 {
     #ED1846
 };

 $swatch-forecolor:
 {
     #fff
 };

2. Output

 /* Used for most objects */
 
 .red
 {
      background: #ED1846;
      
      color: #fff;
 }

 /* Used for a button's active state */
 
 .red.btn:active
 {
      background: #ED1846;
 }   
 
 /* Used for the arrow on chat boxes */
 
 .red.chat:after
 {
      border-top: 12px solid #ED1846;
 }   
 
 /* Used to change the color on text */
 
 .red--text
 {
    color: #ED1846;
 }