Clone's documentation uses Cookies and Google Analytics to help us better understand our visitors. By viewing this site, you agree to have this basic information collected and relayed back to us. You can learn more about how Google Analytics provides us with this information here.

Clone is built with a customizable grid that defaults to a 12 column layout. You can modify this number of columns by changing the $clone-grid-columns variable.

Using the flexbox grid consists of two parts: the grid wrapper and grid items. The grid wrapper allows you to customize the vertical alignment of the items inside, as well as whether you'd like the grid items to be separated by whitespace (AKA a gutter).

Items inside the grid always default to a full, single column until you tell them otherwise using a media query and grid value. This means you can build grids with 1, 2, 3 ... to 12 columns using an XOFY structure (e.g. <div data-c-grid-item="base(1of1) tp(1of2) tl(1of3)"></div>). This grid item will be full width on all devices below portrait orientation tablets, at which point it switches to 50% of the width. When the device is a tablet in landscape orientation, the column shrinks further to be 33.33% of the width.

Available Arguments

Grid Component

Usage: <div data-c-grid="OPTIONS"></div>

# OPTIONS

top
middle
bottom
gutter(ORIENTATION, VALUE)

# GUTTER ORIENTATION
                    
all
vertical
horizontal

# GUTTER VALUE

.25
.5
1
2
3
4

Grid Items

Usage: <div data-c-grid-item="MEDIA(XOFY)"></div>

# MEDIA

base
pp (Phone - Portrait)
pl (Phone - Landscape)
tp (Tablet - Portrait)
tl (Tablet - Landscape)
ds (Desktop - Small)
dm (Desktop - Medium)
dl (Desktop - Large)

# XOFY

Clone defaults to a 12 column grid, e.g.
1of3 (33%)
5of12 (41.66%)
3of4 (75%)

* The number of columns can be changed 
using the $clone-grid-columns variable.

A grid of 3 items in 3 columns that triggers at the landscape tablet media query (e.g. <div data-c-grid-item="tl(1of3)"></div>).

A grid of 12 items in 2 columns that triggers at the portrait tablet media query and 6 columns at the landscape tablet media query (e.g. <div data-c-grid-item="tp(1of2) tl(1of6)"></div>).