Griddles

Standard Examples

Here's a selection of the standard classes applied to create various divisions of content

.g-33
.g-1/3
.g-33
.g-33
.g-66
.g-10
.g-20
.g-30
.g-40
.g-50
.g-50
.g-40
.g-60
.g-30
.g-70
.g-5
.g-95
.g-25
.g-25
.g-25
.g-25

Break-point overrides

A common problem with responsive grids is knowing what will happen at a given breakpoint. To make this easier griddles provides classes to make it clear to the author what will happen at a given breakpoint

.g-25 .s-g-50 .m-g-33
.g-25 .s-g-50 .m-g-33
.g-25 .s-g-50 .m-g-33
.g-25 .s-g-50 .m-g-33

Show only current breakpoint(s)

S
M
L
XL
XXL

Hide something on smaller screens, but keeping them in flow

.g-25
.g-25 .s-hidden .m-hidden
.g-25
.g-25