The pack object spreads items horizontally along the full width of their parent. Each elemtent will get the same width.
The basic markup will always be as follows:
<div class="pack">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack
<div class="pack">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--tiny
<div class=" pack pack--tiny ">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--small
<div class=" pack pack--small ">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--large
<div class=" pack pack--large ">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--huge
<div class=" pack pack--huge ">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--auto
<div class=" pack pack--auto ">
<div class="pack__item">
FooBarBaz
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--rev
<div class=" pack pack--rev ">
<div class="pack__item">
Foo
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--middle
<div class=" pack pack--middle ">
<div class="pack__item">
Foo<br>
Bar<br>
Baz<br>
Foo<br>
Bar<br>
Baz
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
pack--bottom
<div class=" pack pack--bottom ">
<div class="pack__item">
Foo<br>
Bar<br>
Baz<br>
Foo<br>
Bar<br>
Baz
</div>
<div class="pack__item">
Bar
</div>
<div class="pack__item">
Baz
</div>
</div>
The pack object provides the following modifiers:
pack--tiny
pack--small
pack--large
pack--huge
pack--auto
pack--rev
pack--middle
pack--bottom
.pack--tiny , pack--small , pack--large , pack--huge all vary the spacing between the pack-items. Each one has its own dedicated variable to control that spacing:
$inuit-pack-gutter--tiny: quarter($inuit-pack-gutter) !default;
$inuit-pack-gutter--small: halve($inuit-pack-gutter) !default;
$inuit-pack-gutter--large: double($inuit-pack-gutter) !default;
$inuit-pack-gutter--huge: quadruple($inuit-pack-gutter) !default;
.pack--auto causes the items to have an automatically width, determined by their contents width.
With .pack--rev you can reverse the order of the pack-items.
By default the pack-items are top-aligned. You can align them vertically middle via .packk--middle or to the bottom with .pack--bottom.
Of course you can combine several modifiers like:
<div class="pack pack--large pack--rev pack--bottom">
...
</div>
You can alter the gap between the pack-items with the $inuit-pack-gutter variable:
$inuit-pack-namespace: $inuit-namespace !default;
$inuit-pack-gutter: $inuit-base-spacing-unit !default;
$inuit-pack-gutter--tiny: quarter($inuit-pack-gutter) !default;
$inuit-pack-gutter--small: halve($inuit-pack-gutter) !default;
$inuit-pack-gutter--large: double($inuit-pack-gutter) !default;
$inuit-pack-gutter--huge: quadruple($inuit-pack-gutter) !default;
$inuit-enable-pack--auto: false !default;
$inuit-enable-pack--tiny: false !default;
$inuit-enable-pack--small: false !default;
$inuit-enable-pack--large: false !default;
$inuit-enable-pack--huge: false !default;
$inuit-enable-pack--rev: false !default;
$inuit-enable-pack--middle: false !default;
$inuit-enable-pack--bottom: false !default;