The o-pack object simply causes any number of elements pack up horizontally
to automatically fill an equal, fluid width of their parent.
Example:
Create a barebones navigation bar by combining it with o-listBare.
<ul class="list o-pack">
<li class="o-pack-item"><a href="#">Home</a></li>
<li class="o-pack-item"><a href="#">About</a></li>
<li class="o-pack-item"><a href="#">Portfolio</a></li>
<li class="o-pack-item"><a href="#">Contact</a></li>
</ul>| Class Name | Responsive Class | Description |
|---|---|---|
o-pack--middle |
none | Vertically align the pack items middle. |
o-pack--auto |
none | Unequal-width items. |
o-pack--smallest |
none | smallest padding on items. |
o-pack--smaller |
none | smaller padding on items. |
o-pack--small |
none | small padding on items. |
o-pack--large |
none | large padding on items. |
o-pack--larger |
none | larger padding on items. |
<ul class="list o-pack o-pack--auto o-pack--smaller<">
<li class="o-pack-item"><a href="#">Home</a></li>
<li class="o-pack-item"><a href="#">About</a></li>
<li class="o-pack-item"><a href="#">Portfolio</a></li>
<li class="o-pack-item"><a href="#">Contact</a></li>
</ul>