_objects.box.scss

Source code

View source

Author

Harry Roberts

Package Name

inuit-box

Version

0.4.4

Dependences

The box object just boxes off its content. In other words: It gives the element a padding.

Markup
Demo
Modifiers
Settings

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

.box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt! Recusandae sed fugit minus numquam sunt, magni at aut.

see HTML code

    <div class="box">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem
                        distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda
                        totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt!
                        Recusandae sed fugit minus numquam sunt, magni at aut.</p>
                </div>

.box--tiny

see HTML code

    <div class=" box  box--tiny ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem
                        distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda
                        totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt!
                        Recusandae sed fugit minus numquam sunt, magni at aut.</p>
                </div>

.box--small

see HTML code

    <div class=" box  box--small ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem
                        distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda
                        totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt!
                        Recusandae sed fugit minus numquam sunt, magni at aut.</p>
                </div>

.box--large

see HTML code

    <div class=" box  box--large ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem
                        distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda
                        totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt!
                        Recusandae sed fugit minus numquam sunt, magni at aut.</p>
                </div>

.box--huge

see HTML code

    <div class=" box  box--huge ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem
                        distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda
                        totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt!
                        Recusandae sed fugit minus numquam sunt, magni at aut.</p>
                </div>

.box--flush

see HTML code

    <div class=" box  box--flush ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam officiis, deserunt pariatur autem
                        distinctio itaque natus asperiores delectus in, excepturi soluta ipsam dolore beatae voluptatibus assumenda
                        totam perferendis cumque quod. Natus nemo voluptate eaque fuga maxime, quam, tempore distinctio deserunt!
                        Recusandae sed fugit minus numquam sunt, magni at aut.</p>
                </div>

The box object provides the following modifiers:

box--tiny
box--small
box--large
box--huge
box--flush

.box--tiny , .box--small , .box--large , .box--huge all vary the padding of the `.box`. Each one has its own dedicated variable to control that padding:

          $inuit-box--padding--tiny: quarter($inuit-box-padding) !default;
          $inuit-box--padding--small: halve($inuit-box-padding) !default;
          $inuit-box--padding--large: double($inuit-box-padding) !default;
          $inuit-box--padding--huge: quadruple($inuit-box-padding) !default;

.box--flush removes the padding from .box.

You can alter the padding of .box with the $inuit-box-padding variable:

                
                $inuit-box-namespace:       $inuit-namespace !default;
                
                $inuit-box-padding:         $inuit-base-spacing-unit !default;
                $inuit-box-padding--tiny:     quarter($inuit-box-padding) !default;
                $inuit-box-padding--small:      halve($inuit-box-padding) !default;
                $inuit-box-padding--large:     double($inuit-box-padding) !default;
                $inuit-box-padding--huge:   quadruple($inuit-box-padding) !default;
                
                $inuit-enable-box--flush:   false !default;
                $inuit-enable-box--tiny:    false !default;
                $inuit-enable-box--small:   false !default;
                $inuit-enable-box--large:   false !default;
                $inuit-enable-box--huge:    false !default;