Tachyons

Docs

/

Layout

/

Display

Version
2.1.0
Filesize
241 B
Declarations
36
Selectors
36
Max. Specificity Score
10
Size of Avg. Rule
1

Single purpose classes for setting the display of an element at any breakpoint.

Examples

Display Block

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.

block
block

Display Inline-Block

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.

display: inline-block
display: inline-block
display: inline-block
display: inline-block

Display Inline

Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.

display: inline
display: inline
display: inline
display: inline

Display Table

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 amount of table cells.

display
table
will automatically
compute cell width

Display None

You can set the display of any element to none by tacking on the dn class.

Previous

Floats

Next

Widths

Reference

MDN - Box Sizing
src/_display.css

/*

   DISPLAY

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    it    = inline-table
    t     = table
    tc    = table-cell
    tr    = table-row
    tcol  = table-column
    tcolg = 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; table-layout: fixed; width: 100%; }
.dtr {    display: table-row; }
.dtc {    display: table-cell; }
.dtcol {  display: table-column; }
.dtcolg { display: table-column-group; }

@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; table-layout: fixed; width: 100%; }
  .dtr-ns {    display: table-row; }
  .dtc-ns {    display: table-cell; }
  .dtcol-ns {  display: table-column; }
  .dtcolg-ns { display: table-column-group; }
}

@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; table-layout: fixed; width: 100%; }
  .dtr-m {      display: table-row; }
  .dtc-m {    display: table-cell; }
  .dtcol-m {  display: table-column; }
  .dtcolg-m { display: table-column-group; }
}

@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; table-layout: fixed; width: 100%; }
  .dtr-l {    display: table-row; }
  .dtc-l {    display: table-cell; }
  .dtcol-l {  display: table-column; }
  .dtcolg-l { display: table-column-group; }
}


Docs

General

Debugging Images