Candlepin

Candlepin is a lightweight sass lib for lining up elements to a fluid grid. Similar to Susy3, you can just use the sass functions, or if you'd rather it has helper classes too.

Setup

npm install candlepin
@import "/node_modules/candlepin/src/main";

Install the library via npm. @importing (or @using) will get you functions and classes.

@import "~candlepin";

If you're using webpack, instead of typing 'node_modules/' you can just use a tilde.

$columns: 8;
$gutter: 8;
@import "~candlepin/src/functions";

Here's a more advanced way to use it - using only the functions while passing in custom settings.

Specifying settings like this just sets defaults that will be used for all the sass functions, but you can always override these whenever you use any of the functions.

Examples

Three Columns

See the Pen MWKOMML by Kevin Hamer (@khamer) on CodePen.

Uneven Columns

See the Pen ExPbqLg by Kevin Hamer (@khamer) on CodePen.

Skipping Columns

See the Pen NWxwQmZ by Kevin Hamer (@khamer) on CodePen.

Wrapping with the Mixin

See the Pen QWyQVVZ by Kevin Hamer (@khamer) on CodePen.

Custom Grid (Mosaic)

See the Pen Candlepin Mosaic Example by Kevin Hamer (@khamer) on CodePen.

Settings

$columns

Number of columns. Defaults to 12.

$gutter

Width of gutters. Defaults to 30px.

Functions

This the recommended way to use this library – using these functions within your own components.

span(<columns> [, <total columns>, <gutter>])

Returns an appropriate value for a width that spans the number of columns specified. For example, span(1) spans one column, span(2) spans two column and the enclosed gutter, etc.

left(<columns> [, <total columns>, <gutter>])

Returns an appropriate value for a left margin to shift content over the number of columns and gutters specified. For example, left(1) shifts over one column and gutter, left(2) is for two columns and gutters, etc.

right(<columns> [, <total columns>, <gutter>])

Same as left().

gutter(<columns> [, <total columns>, <gutter>])

Returns an appropriate value for a gutter that also spans the number of columns specified. For example, gutter() or gutter(0) is a single gutter,gutter(1) spans one column and two gutters, etc.

Mixins

@include wrap(<columns> [, <total columns>, <gutter>])

Just one. meant to be used on the child elements of a flex container to specify how things should wrap. For example, wrap(4) will make 4-column wide cells that wrap, etc.

Classes

For those of you who just want to use classes, here's some classes. They follow ABEM standards.

.grid

Equivalent to
display: flex; flex-wrap: wrap;

.grid__cell

No associated styles.

.grid__cell.-span-<columns>

Equivalent to
width: span(<columns>);

.grid__cell.-left-<columns>

Equivalent to
margin-left: left(<columns>);

.grid__cell.-right-<columns>

Equivalent to
margin-right: right(<columns>);

.grid__cell.-gutter-<columns>

Equivalent to
margin-left: gutter(<columns>);