Box

The Box object simply boxes off content.

Install using npm:

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

Usage

Basic usage of the Box object uses the required classes:

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

Options

Other, optional classes can supplement the required base classes:

• .o-box--flush: remove all padding from boxes.
• .o-box--[tiny|small|large|huge]: alter the padding on boxes.

For example:

<div class="o-box  o-box--large">
    Foo Bar Baz
</div>

Enable options

To enable the optional classes set the variables to true before you import the _objects.box.scss-file.

$o-box--flush:   false;
$o-box--tiny:    false;
$o-box--small:   false;
$o-box--large:   false;
$o-box--huge:    false;

Dependencies

aleutcss’ Box object depends on three other aleutcss modules:

• settings.defaults
• tools.functions
• trumps.clearfix

If you install the Box 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.