A deliciously simple CSS grid. Enjoy it however you want* with as many stacks as you like. Put them in a griddle and go.*Maple syrup optional

View on GitHub

Usage

Pancake is quick to configure and easy to use. Define your grid in config.scss and compile away. No presentational classes here, use the grid mixins right in your Sass files.

$stack-number  : 12;
$space-between : 15px;

// Your stacks go in a griddle
@include griddle()
// Define the width of your pancakes
@include stack-span(3)
// Move your pancake to the left
@include move-left(2)
// Move your pancake to the right
@include move-right(2)

Examples

@include stack-span(1)
🥞
🥞
🥞
🥞
🥞
🥞
🥞
🥞
🥞
🥞
🥞
🥞
@include stack-span(2)
🥞 🥞
🥞 🥞
🥞 🥞
🥞 🥞
🥞 🥞
🥞 🥞
@include stack-span(3)
🥞 🥞 🥞
🥞 🥞 🥞
🥞 🥞 🥞
🥞 🥞 🥞
@include stack-span(4)
🥞 🥞 🥞 🥞
🥞 🥞 🥞 🥞
🥞 🥞 🥞 🥞
@include stack-span(6)
🥞 🥞 🥞 🥞 🥞 🥞
🥞 🥞 🥞 🥞 🥞 🥞
@include stack-span(12)
🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞
@include stack-span(5)
@include move-left(3)
🥞 🥞 🥞 🥞 🥞