Single purpose classes for setting the display of an element at any breakpoint.
The display property defines box’s display type, which consists of the two basic qualities of how an element generates boxes: the inner display type, which defines the kind of formatting context it generates, dictating how its descendant boxes are laid out. the outer display type, which dictates how the box participates in its parent formatting context.
.db { display: block; }
<span class="db"></span>
Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn’t take up the full width of the parent.
.dib { display: inline-block; }
<span class="dib"></span>
Inline-block will wrap around content inline. It also allows you to set height and width properties on the element, which display inline does not allow you to do. It does render the white-space inbeween elements, so if you set width: 25% to four elements they will not just render as a 4 column layout by default.
.di { display: inline; }
<div class="di"></div>
Set content inline. Inline doesn’t respect height or width values. It does not render white space between elements.
.dt { display: table; }
.dtc { display: table-cell; }
<div class="dt">
<div class="dtc"></div>
<div class="dtc"></div>
</div>
The display table can be combined with display table-cell to render a table
without table markup. This can be useful for vertically aligning content
or for auto-calculating a variable number of table cells. To auto-calculate even
widths for all cells, you must extend display table with .dt--fixed to set
table-layout: fixed.
<div class="dt dt--fixed w-100">
<div class="dtc"></div>
<div class="dtc"></div>
</div>
.dn { display: none; }
<div class="dn"></div>
You can set the display of any element to none by tacking on the dn class.
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dit { display: inline-table; }
.dt { display: table; }
.dtc { display: table-cell; }
.dt-row { display: table-row; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
}
@media (--breakpoint-not-small) {
.dn-ns { display: none; }
.di-ns { display: inline; }
.db-ns { display: block; }
.dib-ns { display: inline-block; }
.dit-ns { display: inline-table; }
.dt-ns { display: table; }
.dtc-ns { display: table-cell; }
.dt-row-ns { display: table-row; }
.dt-row-group-ns { display: table-row-group; }
.dt-column-ns { display: table-column; }
.dt-column-group-ns { display: table-column-group; }
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
@media (--breakpoint-medium) {
.dn-m { display: none; }
.di-m { display: inline; }
.db-m { display: block; }
.dib-m { display: inline-block; }
.dit-m { display: inline-table; }
.dt-m { display: table; }
.dtc-m { display: table-cell; }
.dt-row-m { display: table-row; }
.dt-row-group-m { display: table-row-group; }
.dt-column-m { display: table-column; }
.dt-column-group-m { display: table-column-group; }
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
}
@media (--breakpoint-large) {
.dn-l { display: none; }
.di-l { display: inline; }
.db-l { display: block; }
.dib-l { display: inline-block; }
.dit-l { display: inline-table; }
.dt-l { display: table; }
.dtc-l { display: table-cell; }
.dt-row-l { display: table-row; }
.dt-row-group-l { display: table-row-group; }
.dt-column-l { display: table-column; }
.dt-column-group-l { display: table-column-group; }
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
}