CSS table/square-ratio helpers

Table-design using CSS

/* table-design in CSS */
.row {
  display: table;
  table-layout: fixed;
}
.inline-row {
  display: inline-table;
  table-layout: fixed;
}
.line {
  display: table-row;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

.aligntop {
  vertical-align: top;
}
.alignbottom {
  vertical-align: bottom;
}
.alignmiddle {
  vertical-align: middle;
}

These vertical alignment also work for simple texts (alignsub and alignbaseline are also available).

Square and ratio helpers

For some components/special cases (responsive iframe, making a responsive square shape, responsive typography with SVG, etc.), we have to use the “padding-hack” technique, which is basically:

<div class="ratio-container-square">
  <div class="inner-ratio-container p1">
    Some content in a square box with ratio-container-square class.
  </div>
</div>

This is a bit hacky, better not using it often.