Dialtone
GitHub Repo
Codepen Template

Width

Utilities to control an element's width.

Classes

ClassOutput
.d-w10pwidth: 10% !important;
.d-w20pwidth: 20% !important;
.d-w25pwidth: 25% !important;
.d-w30pwidth: 30% !important;
.d-w40pwidth: 40% !important;
.d-w50pwidth: 50% !important;
.d-w60pwidth: 60% !important;
.d-w70pwidth: 70% !important;
.d-w75pwidth: 75% !important;
.d-w80pwidth: 80% !important;
.d-w90pwidth: 90% !important;
.d-w100pwidth: 100% !important;
.d-w0width: 0px !important;
.d-w1width: 1px !important;
.d-w2width: 2px !important;
.d-w4width: 4px !important;
.d-w6width: 6px !important;
.d-w8width: 8px !important;
.d-w12width: 12px !important;
.d-w16width: 16px !important;
.d-w24width: 24px !important;
.d-w32width: 32px !important;
.d-w42width: 42px !important;
.d-w48width: 48px !important;
.d-w64width: 64px !important;
.d-w72width: 72px !important;
.d-w84width: 84px !important;
.d-w96width: 96px !important;
.d-w102width: 102px !important;
.d-w114width: 114px !important;
.d-w128width: 128px !important;
.d-w164width: 164px !important;
.d-w216width: 216px !important;
.d-w264width: 264px !important;
.d-w332width: 332px !important;
.d-w464width: 464px !important;
.d-w512width: 512px !important;
.d-w628width: 628px !important;
.d-w764width: 764px !important;
.d-w828width: 828px !important;
.d-w912width: 912px !important;
.d-w1024width: 1024px !important;
.d-w1140width: 1140px !important;
.d-w1268width: 1268px !important;
.d-w1340width: 1340px !important;
.d-w100vwwidth: 100vh !important;
.d-w-autowidth: auto !important;
.d-w-unsetwidth: unset !important;

Percentages

Use d-w{n}p to set a percentage width for an element.

<div class="d-w10p">d-w10p</div>
<div class="d-w20p">d-w20p</div>
<div class="d-w25p">d-w25p</div>
<div class="d-w30p">d-w30p</div>
<div class="d-w40p">d-w40p</div>
<div class="d-w50p">d-w50p</div>
<div class="d-w60p">d-w60p</div>
<div class="d-w70p">d-w70p</div>
<div class="d-w75p">d-w75p</div>
<div class="d-w80p">d-w80p</div>
<div class="d-w90p">d-w90p</div>
<div class="d-w100p">d-w100p</div>

Fixed

Use d-w{n} to set a fixed width for an element.

<div class="d-w0">1</div>
<div class="d-w1">2</div>
<div class="d-w2">3</div>
<div class="d-w4">4</div>
<div class="d-w6">5</div>
<div class="d-w8">6</div>
<div class="d-w12">7</div>
<div class="d-w16">8</div>
<div class="d-w24">9</div>
<div class="d-w32">10</div>
<div class="d-w42">11</div>
<div class="d-w48">12</div>
<div class="d-w64">13</div>
<div class="d-w72">14</div>
<div class="d-w84">15</div>
<div class="d-w96">16</div>
<div class="d-w102">17</div>
<div class="d-w114">18</div>
<div class="d-w128">19</div>
<div class="d-w164">20</div>
<div class="d-w216">21</div>
<div class="d-w264">22</div>
<div class="d-w332">23</div>
<div class="d-w464">24</div>
<div class="d-w512">25</div>
<div class="d-w628">26</div>
<div class="d-w764">27</div>
<div class="d-w828">28</div>
<div class="d-w912">29</div>
<div class="d-w1024">30</div>
<div class="d-w1140">31</div>
<div class="d-w1268">32</div>
<div class="d-w1340">33</div>

Screen

Use d-w100vh to have an element cover the user's viewport.

<div class="d-w100vw">...</div>

Auto

Use d-w-auto have the browser calculate and select a width.

<div class="d-w-auto">...</div>
Last Updated: