Aleut.css

Documentation

objects.pack

          		# Pack

aleutcss’ Pack object simply causes any number of elements pack up horizontally to automatically fill an equal, fluid width of their parent.

Install using npm:

    $ npm install --save-dev aleut.objects.pack

Usage

Basic usage of the Pack object uses the required classes:

<div class="o-pack">
    <div class="o-pack__item">
        Foo
    </div>
    <div class="o-pack__item">
        Bar
    </div>
    <div class="o-pack__item">
        Baz
    </div>
</div>

Example of o-pack

The only valid children of the .o-pack node are .o-pack__items.

Options

Other, optional classes can supplement the required base classes:

  • .o-pack--auto: cause packed items to have an automatically determined, non-equal width.
  • .o-pack--[tiny|small|large|huge]: alter the gutter between pack items.
  • .o-pack--rev: reverse the rendered horizontal order of packed items.
  • .o-pack--[middle|bottom]: align packed items to the middles or bottoms of each other.

For example:

    <div class="o-pack  o-pack--small  o-pack--rev">
        <div class="o-pack__item">
            Foo
        </div>
        <div class="o-pack__item">
            Bar
        </div>
        <div class="o-pack__item">
            Baz
        </div>
    </div>

Example of o-pack options

Dependencies

aleutcss’ Pack object depends on two other aleutcss modules:

If you install the Pack object using NPM, you will get these dependencies at the same time. If not using NPM, please be sure to install and @import these dependencies in the relevant way.