31.1 #Width.classes Width utility classes

Width classes

.-sf-width-{1,2,...,12}, .-sf-width-form-{small, medium, large}

.-sf-width-1 ~8%

.-sf-width-2 ~16%

.-sf-width-3 25%

.-sf-width-4 ~33%

.-sf-width-5 ~41%

.-sf-width-6 50%

.-sf-width-7 ~58%

.-sf-width-8 ~66%

.-sf-width-9 75%

.-sf-width-10 ~83%

.-sf-width-11 ~91%

.-sf-width-12 100%

.-sf-width-form-small 410px}

.-sf-width-form-medium var(--form-width-medium)}

.-sf-width-form-large 1000px}

Html

    <div class="-sf-width-1" style="background-color: #83e3ff;">.-sf-width-1 ~8%</div>
    <div class="-sf-width-2" style="background-color: #83e3ff;">.-sf-width-2 ~16%</div>
    <div class="-sf-width-3" style="background-color: #83e3ff;">.-sf-width-3 25%</div>
    <div class="-sf-width-4" style="background-color: #83e3ff;">.-sf-width-4 ~33%</div>
    <div class="-sf-width-5" style="background-color: #83e3ff;">.-sf-width-5 ~41%</div>
    <div class="-sf-width-6" style="background-color: #83e3ff;">.-sf-width-6 50%</div>
    <div class="-sf-width-7" style="background-color: #83e3ff;">.-sf-width-7 ~58%</div>
    <div class="-sf-width-8" style="background-color: #83e3ff;">.-sf-width-8 ~66%</div>
    <div class="-sf-width-9" style="background-color: #83e3ff;">.-sf-width-9 75%</div>
    <div class="-sf-width-10" style="background-color: #83e3ff;">.-sf-width-10 ~83%</div>
    <div class="-sf-width-11" style="background-color: #83e3ff;">.-sf-width-11 ~91%</div>
    <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-12 100%</div>
    <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-form-small 410px}</div>
    <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-form-medium var(--form-width-medium)}</div>
    <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-form-large 1000px}</div>