syntax.md

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

{!grid/waffle/_code/syntax.syntax.md!}

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{: .pjax}, or if you are not using flexbox, the clearfix{: .pjax} is applied to the parent element
• Lost Waffle