2.2 #permalink Box

Toggle example guides Toggle HTML markup

We use a percent-based box model. Note that percentages are always based on the width of the element's parent. Add more classes here as necessary, but try to keep them reusable by creating layouts with standard distances and sizing.

To date I haven't found any use for horizontal margins, and in fact they can make things strange because they mess up the grid by creating space where it's not designed to be. You should be able to achieve the same effect by creating another level of div and using padding on the outer div.

All box classes are based on the same scale:

  • Half: 0.75%;
  • 1: 1.5%;
  • 2: 3%;
  • 3: 4.5%;
  • 4: 6%;
  • 5: 9%;
  • 6: 12%;
Examples
Default styling
Half
1
2
3
4
5
6
.box_padded
Padded box on all four sides
box_paddedHalf
box_padded1
box_padded2
box_padded3
box_padded4
box_padded5
box_padded6
.box_verticalPadded
Padding on top & bottom
box_verticalPaddedHalf
box_verticalPadded1
box_verticalPadded2
box_verticalPadded3
box_verticalPadded4
box_verticalPadded5
box_verticalPadded6
.box_horizontalPadded
Padding on right & left
box_horizontalPaddedHalf
box_horizontalPadded1
box_horizontalPadded2
box_horizontalPadded3
box_horizontalPadded4
box_horizontalPadded5
box_horizontalPadded6
.box_topPadded
Padding on the top side only
box_topPaddedHalf
box_topPadded1
box_topPadded2
box_topPadded3
box_topPadded4
box_topPadded5
box_topPadded6
.box_rightPadded
Padding on the right side only
box_rightPaddedHalf
box_rightPadded1
box_rightPadded2
box_rightPadded3
box_rightPadded4
box_rightPadded5
box_rightPadded6
.box_bottomPadded
Padding on the bottom side only
box_bottomPaddedHalf
box_bottomPadded1
box_bottomPadded2
box_bottomPadded3
box_bottomPadded4
box_bottomPadded5
box_bottomPadded6
.box_leftPadded
Padding on the left side only
box_leftPaddedHalf
box_leftPadded1
box_leftPadded2
box_leftPadded3
box_leftPadded4
box_leftPadded5
box_leftPadded6
.box_verticalMargin
Margin on the top and bottom
box_verticalMarginHalf
box_verticalMargin1
box_verticalMargin2
box_verticalMargin3
box_verticalMargin4
box_verticalMargin5
box_verticalMargin6
.box_topMargin
Margin on the top only
box_topMarginHalf
box_topMargin1
box_topMargin2
box_topMargin3
box_topMargin4
box_topMargin5
box_topMargin6
.box_bottomMargin
Margin on the bottom only
box_bottomMarginHalf
box_bottomMargin1
box_bottomMargin2
box_bottomMargin3
box_bottomMargin4
box_bottomMargin5
box_bottomMargin6
Markup
<div class="grid-12 grid-parent layout_centerVertical">
  <div class="grid-4 grid-parent layout_center">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]Half col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]Half</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]1 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]1</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center box_bottomMargin1">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]2 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]2</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]3 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]3</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center ">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]4 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]4</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center box_bottomMargin1">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]5 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]5</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center box_bottomMargin1">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]6 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]6</div>
      </div>
    </div>
  </div>
</div>
Source: layout/box.less, line 3