Using Flexbox Grids
Clone has a built in flexbox grid to help you easily create layouts compatible with IE11. It's worth noting however, that depending on your unique browser support needs, including this grid is not mandatory and removing it will drastically reduce Clone's file size. You can choose to include the gridless version of Clone via CDN or Sass using the information in Installation. We recommend CSS Grid for projects that no longer need to support IE11.
Clone is built with a customizable grid that defaults to a 12 column layout. You can modify this number of columns by changing the
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.
# OPTIONS top middle bottom gutter(ORIENTATION, VALUE)
# GUTTER ORIENTATION all vertical horizontal # GUTTER VALUE .25 .5 1 2 3 4
# 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.
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>).
quarter -> .25
half -> .5
normal -> 1
double -> 2
triple -> 3