Grid Framework: How To Use

A responsive, proportional, nestable, and mobile-first 6-column grid framework.

  1. Responsive

    • Flexible grid defined in percentages
    • Flexible media that will proportionaly scale down when larger than the parent tag
    • Media Queries: that create breakpoints at: 240px, 320px, 480px, 600px, 769px, and 992px
  2. Proportional

    The sizes are based on commonly used proportions: 1/1, 1/2, 2/3, 1/3, 1/4, etc. See Region Sizes

  3. Nestable

    Grids can be infinitely nested within other grids in order to create more complex layouts.

  4. Mobile-First

    Only when the viewport width is above 768px does the grid take affect, otherwise it remains collapsed vertically.


Getting Started

The framework is built around a combination of these three elements: container, fields, and region.

  1. The container class sets the max-width of the page and centers it horizontally. It also sets the left and right margins on small screens.
  2. The fields class defines horizontal divisions of the page. (They can be thought of as “rows”)
  3. The region class creates veritcal divisions of the page with defined sizes for containing content. (They can be thought of as “columns”)
<div class="container">
	<div class="fields">
		<div class="region size2of3">2/3</div>
		<div class="region size1of3">1/3</div>
	</div>
</div>
2/3
1/3

Sizes

All of the available sizes can also be viewed here: Region Sizes.

1/1
1/2
1/2
1/3
1/3
1/3
1/3
2/3
2/3
1/3
1/4
1/4
1/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
1/2
1/4
1/4
1/4
3/4
3/4
1/4
1/5
1/5
1/5
1/5
1/5
1/5
1/5
2/5
1/5
1/5
2/5
1/5
1/5
1/5
1/5
1/5
2/5
2/5
1/5
1/5
1/5
2/5
2/5
1/5
1/5
2/5
2/5
2/5
1/5
2/5
1/5
3/5
1/5
1/5
1/5
3/5
3/5
1/5
1/5
2/5
3/5
3/5
2/5
1/5
4/5
4/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/6
5/6
5/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
golden-long
golden-short
golden-short
golden-long

Nesting

<div class="container">
	<div class="fields">
		<div class="region size2of3 reset">
			<div class="fields">
				<div class="region size2of3">2/3</div>
				<div class="region size1of3">1/3</div>
			</div>
		</div>
		<div class="region size1of3">1/3</div>
	</div>
</div>
2/3
1/3
1/3

Prefix & Suffix

Regions can be offet using this technique. This allows for additional space between regions. See Prefix & Suffix.

<div class="container">
	<div class="fields">
		<div class="region size1of5">1/5</div>
	</div>
	<div class="fields">
		<div class="region size3of5 prefix1of5">3/5</div>
	</div>
</div>
1/5
3/5

Push & Pull

The visual order of the regions can be different from the source order using this technique. See Push & Pull.

<div class="container">
	<div class="fields">
		<div class="region size2of3 push1of3">1</div>
		<div class="region size1of3 pull2of3">2</div>
	</div>
</div>
1
2

Centering

<div class="container">
	<div class="fields">
		<div class="region size1of7 region-centered">1/7</div>
	</div>
</div>
1/7
1/6
1/5
1/4
1/3
golden-short
2/5
1/2
3/5
golden-long
2/3
3/4
4/5
5/6

Blocks

The blocks style is used for repeating content holders. They appear in two-up, three-up, four-up, five-up, and six-up variations.

<div class="container">
	<div class="fields">
		<div class="region size1of1">
			<ol class="blocks blocks-four-up">
				<li>...</li>
				<li>...</li>
				<li>...</li>
				...
			</ol>
		</div>
	</div>
</div>
  1. fpo
  2. fpo
  3. fpo
  4. fpo
  5. fpo
  6. fpo