This module provides exactly the same function as widths, but for specific breakpoints. It is based on the list in responsive settings and creates individual widths classes for each breakpoint availale in that list.
<div class="layout">
<div class="layout__item u-1/3-palm u-1/4-desk">
Foo
</div>
<div class="layout__item u-1/3-palm u-1/2-desk">
Bar
</div>
<div class="layout__item u-1/3-palm u-1/4-desk">
Baz
</div>
</div>
The class names distinguish itselves from
widthsby a breakpoint suffix such as
.u-1/3-palm.
By default inuitcss creates classes for responsive wholes, halves, thirds, quarters and fifths. You can override the map defined in this module to add more classes.
$inuit-widths-columns-responsive: (
1,
2,
3,
4,
5,
) !default;