• 2.5.0

Widths 

<div class="grid">
    <div class="w-1/6 grid__item">
        <div class="box box--default box--tiny text-center">1/6</div>
    </div>
    <div class="w-5/6 grid__item">
        <div class="box box--default box--tiny text-center">5/6</div>
    </div>
</div>

<div class="grid mrgt">
    <div class="w-1/5 grid__item">
        <div class="box box--default box--tiny text-center">1/5</div>
    </div>
    <div class="w-4/5 grid__item">
        <div class="box box--default box--tiny text-center">4/5</div>
    </div>
</div>

<div class="grid mrgt">
    <div class="w-1/4 grid__item">
        <div class="box box--default box--tiny text-center">1/4</div>
    </div>
    <div class="w-3/4 grid__item">
        <div class="box box--default box--tiny text-center">3/4</div>
    </div>
</div>

<div class="grid mrgt">
    <div class="w-1/3 grid__item">
        <div class="box box--default box--tiny text-center">1/3</div>
    </div>
    <div class="w-2/3 grid__item">
        <div class="box box--default box--tiny text-center">2/3</div>
    </div>
</div>

<div class="grid mrgt">
    <div class="w-2/5 grid__item">
        <div class="box box--default box--tiny text-center">2/5</div>
    </div>
    <div class="w-3/5 grid__item">
        <div class="box box--default box--tiny text-center">3/5</div>
    </div>
</div>

<div class="grid mrgt">
    <div class="w-1/2 grid__item">
        <div class="box box--default box--tiny text-center">1/2</div>
    </div>
    <div class="w-1/2 grid__item">
        <div class="box box--default box--tiny text-center">1/2</div>
    </div>
</div>

<div class="grid mrgt">
    <div class="grid__item">
        <div class="box box--default box--tiny text-center">1/1</div>
    </div>
</div>

Widths are percentages represented by fractions. All classes are constructed like .w-{nominator}/{denominator}. By default you have halves, thirds, quarters, fifths and sixths. You can easily add more by changing the $widths-columns setting.

Widths are independent from the grid and can be used by any component.

Note that only the smallest fractions are generated; for example .w-2/4 doesn’t exist when both quarters and halves are in the settings, .w-1/2 take over it.