Syntax

Description: waffle is defined as a grid utility that creates a horizontal and vertical grid (aka. waffle grid) which resembles a tic-tac-toe board.

Arguments:

Example

// long hand
ctr('<#selector>', {
grid: {
waffle: {
fraction: '<string>' | '<number>'
gutter: '<string>' | 30px
cycle: '<string>' | '<number>' | <fraction:denominator>
flex: '<boolean>' | true
}
}
})
# long hand
<#selector>:
grid:
waffle:
fraction: <string> | <number>
gutter: <string> | 30px
cycle: <string> | <number> | <fraction:denominator>
flex: <boolean> | true
// shorthand
ctr('<#selector>', {
grid: {
waffle: '<fraction>' '<cycle>' '<gutter>' '<flex>'
}
})
# shorthand
'<#selector>':
grid:
waffle: [<fraction>, <cycle>, <gutter>, <flex>]

Notes

Fraction

Description: The value for fraction sets the width and height of the element relative to its parent container, or in other terms, how many columns and rows the element will span.

Edit
ctr('.test', {
grid: {
waffle: {
fraction: '1/3'
}
}
})
.test:
grid:
waffle:
fraction: 1/3
.test {
flex: 0 0 auto;
width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(n) {
margin-right: 30px;
margin-bottom: 30px;
}
.test:nth-child(3n) {
margin-right: 0;
}
.test:last-child {
margin-right: 0;
margin-bottom: 0;
}
.test:nth-last-child(-n+3) {
margin-bottom: 0;
}
ctr('.test', {
  grid: {
    waffle: {
      fraction: '1/3'
    }
  }
})
.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
  height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(n) {
  margin-right: 30px;
  margin-bottom: 30px;
}
.test:nth-child(3n) {
  margin-right: 0;
}
.test:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.test:nth-last-child(-n+3) {
  margin-bottom: 0;
}
.test:
  grid:
    waffle:
      fraction: 1/3
Child
Child
Child
Child
Child
Child
Child
Child
Child

Gutter

Description: The value for gutter sets the gap between columns and rows through margin-right: <gutter> and margin-bottom: <gutter>.

Edit
ctr('.test', {
grid: {
waffle: {
fraction: '1/3'
gutter: 60px
}
}
})
.test:
grid:
waffle:
fraction: 1/3
gutter: 60px
.test {
flex: 0 0 auto;
width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
height: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
}
.test:nth-child(n) {
margin-right: 60px;
margin-bottom: 60px;
}
.test:nth-child(3n) {
margin-right: 0;
}
.test:last-child {
margin-right: 0;
margin-bottom: 0;
}
.test:nth-last-child(-n+3) {
margin-bottom: 0;
}
ctr('.test', {
  grid: {
    waffle: {
      fraction: '1/3'
      gutter: 60px
    }
  }
})
.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
  height: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
}
.test:nth-child(n) {
  margin-right: 60px;
  margin-bottom: 60px;
}
.test:nth-child(3n) {
  margin-right: 0;
}
.test:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.test:nth-last-child(-n+3) {
  margin-bottom: 0;
}
.test:
  grid:
    waffle:
      fraction: 1/3
      gutter: 60px

Notes

Cycle

Description: Every element has margin-right: <gutter> and margin-bottom: <gutter> applied to it except the last column (nth-last-child), which has no margin-bottom, and the last row (nth-child), which has no margin-right, both of which are controlled by cycle.

Edit
ctr('.test', {
grid: {
waffle: {
fraction: '1/3'
cycle: '2'
}
}
})
.test:
grid:
waffle:
fraction: 1/3
cycle: 2
.test {
flex: 0 0 auto;
width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(n) {
margin-right: 30px;
margin-bottom: 30px;
}
.test:nth-child(2n) {
margin-right: 0;
}
.test:last-child {
margin-right: 0;
margin-bottom: 0;
}
.test:nth-last-child(-n+2) {
margin-bottom: 0;
}
ctr('.test', {
  grid: {
    waffle: {
      fraction: '1/3'
      cycle: '2'
    }
  }
})
.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
  height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(n) {
  margin-right: 30px;
  margin-bottom: 30px;
}
.test:nth-child(2n) {
  margin-right: 0;
}
.test:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.test:nth-last-child(-n+2) {
  margin-bottom: 0;
}
.test:
  grid:
    waffle:
      fraction: 1/3
      cycle: 2

Notes

Non Flexbox

Description: The value of false can be set on the flex property to not use flexbox.

Edit
ctr('.test', {
grid: {
waffle: {
fraction: '1/3'
flex: false
}
}
})
.test:
grid:
waffle:
fraction: 1/3
flex: false
.test {
width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(n) {
clear: none;
float: left;
margin-right: 30px;
margin-bottom: 30px;
}
.test:last-child {
margin-right: 0;
margin-bottom: 0;
}
.test:nth-child(3n) {
margin-right: 0;
}
.test:nth-child(3n+1) {
clear: left;
}
.test:nth-last-child(-n+3) {
margin-bottom: 0;
}
ctr('.test', {
  grid: {
    waffle: {
      fraction: '1/3'
      flex: false
    }
  }
})
.test {
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
  height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(n) {
  clear: none;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
}
.test:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.test:nth-child(3n) {
  margin-right: 0;
}
.test:nth-child(3n+1) {
  clear: left;
}
.test:nth-last-child(-n+3) {
  margin-bottom: 0;
}
.test:
  grid:
    waffle:
      fraction: 1/3
      flex: false

Notes