Dialtone

Columns & Layouts

Utilities for flex columns and common flex layouts.

Classes

ClassOutput
.d-fl-col1> * { flex-basis: calc(100% - (var(--fl-gap) * 2)); }
.d-fl-col2> * { flex-basis: calc(50% - (var(--fl-gap) * 2)); }
.d-fl-col3> * { flex-basis: calc(33% - (var(--fl-gap) * 2)); }
.d-fl-col4> * { flex-basis: calc(25% - (var(--fl-gap) * 2)); }
.d-fl-col5> * { flex-basis: calc(20% - (var(--fl-gap) * 2)); }
.d-fl-col6> * { flex-basis: calc(17% - (var(--fl-gap) * 2)); }
.d-fl-col7> * { flex-basis: calc(14% - (var(--fl-gap) * 2)); }
.d-fl-col8> * { flex-basis: calc(13% - (var(--fl-gap) * 2)); }
.d-fl-col9> * { flex-basis: calc(11% - (var(--fl-gap) * 2)); }
.d-fl-col10> * { flex-basis: calc(10% - (var(--fl-gap) * 2)); }
.d-fl-col11> * { flex-basis: calc(9% - (var(--fl-gap) * 2)); }
.d-fl-col12> * { flex-basis: calc(8% - (var(--fl-gap) * 2)); }
.d-flg0> * { --fl-gap: 0 !important; }
.d-flg1> * { --fl-gap: 0.1rem !important; }
.d-flg2> * { --fl-gap: 0.2rem !important; }
.d-flg4> * { --fl-gap: 0.4rem !important; }
.d-flg6> * { --fl-gap: 0.6rem !important; }
.d-flg8> * { --fl-gap: 0.8rem !important; }
.d-flg12> * { --fl-gap: 1.2rem !important; }
.d-flg16> * { --fl-gap: 1.6rem !important; }
.d-flg24> * { --fl-gap: 2.4rem !important; }
.d-flg32> * { --fl-gap: 3.2rem !important; }
.d-flg48> * { --fl-gap: 4.8rem !important; }
.d-flg64> * { --fl-gap: 6.4rem !important; }

Creating flex columns

Use d-fl-col{n} to create uniformly sized children within an element.

<div class="d-fl-col1">...</div>
<div class="d-fl-col2">...</div>
<div class="d-fl-col3">...</div>
<div class="d-fl-col4">...</div>
<div class="d-fl-col5">...</div>
<div class="d-fl-col6">...</div>
<div class="d-fl-col7">...</div>
<div class="d-fl-col8">...</div>
<div class="d-fl-col9">...</div>
<div class="d-fl-col10">...</div>
<div class="d-fl-col11">...</div>
<div class="d-fl-col12">...</div>

Flex Column Gaps

Use d-flg{n} to create uniform gaps between flex columns within an element.

<div class="d-fl-col3 d-flg0">...</div>
<div class="d-fl-col3 d-flg1">...</div>
<div class="d-fl-col3 d-flg2">...</div>
<div class="d-fl-col3 d-flg4">...</div>
<div class="d-fl-col3 d-flg6">...</div>
<div class="d-fl-col3 d-flg8">...</div>
<div class="d-fl-col3 d-flg12">...</div>
<div class="d-fl-col3 d-flg16">...</div>
<div class="d-fl-col3 d-flg24">...</div>
<div class="d-fl-col3 d-flg32">...</div>
<div class="d-fl-col3 d-flg48">...</div>
<div class="d-fl-col3 d-flg64">...</div>

Centering objects

By default flexed items align to flex-start both horizontally and vertically (effectively top, left). Use d-fl-center to center-center child items within an element.

<div class="d-fl-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Last Updated: