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:

• <fraction> String | Number
  • Required argument
  • Sets the width and height of the element relative to its parent container
• <gutter> String | Literal
  • Default: 30px
  • Sets the gap between elements through margin-right and margin-bottom
• <cycle> String | Number
  • Default: fraction denominator
  • Set margin-right: 0 on the nth-child in the row and margin-bottom: 0 on the nth-last-child in the column
• <flex> Boolean
  • Default: true
  • If waffle should use flexbox

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

• You can use the default keyword to use the default value
• Both flex and non-flex examples should yield the same display results
• It is of critical importance that your parent element is a flexbox container, or if you are not using flexbox, the clearfix is applied to the parent element
• Lost Waffle

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.

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

Gutter¶

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

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

• Default: 30px
• A gutter of 0 equals no gutter at all

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.

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

• Default: fraction denominator

Non Flexbox¶

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

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

• Default: true