Porridge

Porridge is a simple collection of SCSS tools. Porridge is just stuff I use. I'll update the documentation for this over the next few weeks as I add stuff to it.

Installation

Porridge can be installed into a project using bower:

bower --save install porridge

If you don't want to install via bower, download the source and place it in your SCSS directory.

Now, in your main SCSS file:

/**
 * Import Porridge...
 */
@import "bower_components/porridge/porridge";

Configuration

Porridge includes a default configuration which you can find in the partials/_defaults.scss file. You can override any of the settings by creating a new SCSS map as a $porridge variable.

$porridge: (
    colors: (
        primaryColor: rgb(255, 0, 0)
    )
);

Usage

Color

Porridge provides a some really simple ways to work with color. A number of settings can be used to define default colors:

$porridge: (
    color: (
        primaryColor: rgb(255, 0, 0),
        light: rgb(255, 255, 255, 0),
        dark: rgb(0, 0, 0)
    )
);

You can now use a few functions to apply colors to your styles. The primaryColor() function returns the value use to the primaryColor setting.

.my-color {
    background: primaryColor();
}

You can do the same with the light() and dark() functions:

.notice {
    color: dark();
    background: light();
}

Porridge also probides a grey() function to create varying degrees of grey:

div.grey {
    background: grey(80);
}

grey(0) is black, and grey(100) is white.

Buttons

Porridge has a simple button structure. You can turn any element into a button using the porridgeButton mixin.

div.button {
    @include porridgeButton;
}

You have some control over the colors used on the button by passing a background and foreground color to the porridgeButton mixin.

div.button {
    @include porridgeButton(rgb(255,0,0), rgb(255,255,255));
}

Grid

The grid system is really simple. There's nothing super complex here at all.

Create a grid container using a grid-container class. Create columns with grid-* classes. Column widths are in increments of 5%. So you'll have access to grid-5 through grid-100. There's also a set of tablet-grid-* classes and mobile-grid-* classes.

<div class="grid-container">
    <div class="grid-50">
        Column 1
    </div>
    <div class="grid-50">
        Column 2
    </div>
</div>

All the grid-* classes automatically add a 10px gutter to both left and right. However, you can remove the gutters from any column by added a grid-parent class.