31 #Width Width

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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>