@thumbtack/tp-ui-layout-grid
v1.3.6
Published
Grid column widths assume a "mobile first" approach. If columns widths need to change based on browser width you can supply additional column widths that apply at breakpoint.
Downloads
6
Keywords
Readme
package: '@thumbtack/tp-ui-layout-grid' kit: grid/index.mdx platform: scss url: /components/grid/scss/ mdxType: componentApi deprecated: This package was deprecated on September 11 in favor of classes from Thumbprint Atomic.
import '@thumbtack/tp-ui-layout-grid'; import '@thumbtack/thumbprint-atomic';
Overview
Grid column widths assume a "mobile first" approach. If columns widths need to change based on browser width you can supply additional column widths that apply at breakpoint.
The grid is a complicated component. Be sure you're implementing it with the required classes as unexpected issues can occur. See below for details.
Common example
<!-- 1 -->
<div class="tp-wrap-snap">
<!-- 2 -->
<div class="tp-grid">
<!-- 3 -->
<div class="tp-col tp-col--12 tp-col--sm-4"><div class="my-column-content"></div></div>
<div class="tp-col tp-col--12 tp-col--sm-4"><div class="my-column-content"></div></div>
<div class="tp-col tp-col--12 tp-col--sm-4"><div class="my-column-content"></div></div>
</div>
</div>
In the example above:
- If using a wrapper, it MUST be an ancestor of
tp-grid
. Do not addtp-wrap
or other classes totp-grid
that could affect the margins. tp-grid
MUST be a direct parent oftp-col
classes.tp-col
MUST be present.
Column class options:
.tp-col
sets required common column styling.tp-col--sm-N
applies above the small breakpoint,N
is a value between 1 and 12.tp-col--md-N
applies above the medium breakpoint,N
is a value between 1 and 12.tp-col--lg-N
applies above the large breakpoint,N
is a value between 1 and 12
By default, a gutter of 16px
is present between columns. See options below to widen or remove it.
There is no added spacing above or below grids or columns. If you need top or bottom spacing, add it to the content inside the columns.
Non-responsive
<div class="tp-grid">
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>
Responsive
A common layout, stacked when browser width is narrow, side-by-side above that.
<div class="tp-grid">
<div class="tp-col tp-col--12 tp-col--sm-4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--12 tp-col--sm-4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--12 tp-col--sm-4"><div class="ba b-red h4"></div></div>
</div>
Mutiple rows and nesting
<div class="tp-grid">
<div class="tp-col tp-col--9"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--3"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--7"><div class="ba b-red h4"></div></div>
</div>
Nesting
<div class="tp-grid">
<div class="tp-col tp-col--4">
<div class="tp-grid">
<div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
<div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
</div>
</div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>
Gutter options
Narrow
<div class="tp-grid tp-grid--narrow">
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>
Wide
<div class="tp-grid tp-grid--wide">
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>
Flush
<div class="tp-grid tp-grid--flush">
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>
Alignment
Center
<div class="tp-grid tp-grid--center">
<div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
</div>
End
<div class="tp-grid tp-grid--end">
<div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
</div>
Justify between
<div class="tp-grid tp-grid--between">
<div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
</div>
Offset
<div class="tp-grid">
<div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
<div class="tp-col tp-col--4 tp-col--offset-4"><div class="ba b-red h4"></div></div>
</div>
Middle align
<div class="tp-grid tp-grid--middle">
<div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
<div class="tp-col tp-col--6"><div class="ba b-red h4"></div></div>
</div>
Bottom align
<div class="tp-grid tp-grid--bottom">
<div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
<div class="tp-col tp-col--6"><div class="ba b-red h4"></div></div>
</div>