GlobalGiving Living Styleguide

2.2 #permalink Box

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

.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 4