Grids & Blocks

We utilize our own simple grid system to structure the various page layouts. These "grids" function as a framework so you can see where to place all of the site’s different components. A grid system should be easy to use since it is simply a framework that can run horizontally and vertically. Think of it like horizontal and vertical lines on the grids we all used to plot points along the X and Y axis in high school geometry. (OK...I can see those eyes rolling.)

Our grid system provides stability, making it easier for you to build your site. The grid gives a guideline for how things should be aligned and laid out, so you don't have to align each series of blocks by hand. Plus, if you want to switch things around, this can be done easily when you see how these building blocks can be organized on your page.


Blocks - Two Across

<section class="contentBox2a">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

<section class="contentBox2b">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

Blocks - Three Across

<section class="contentBox3a">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

<section class="contentBox3b">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

<section class="contentBox3c">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

Blocks - Four Across

<section class="contentBox4a">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

<section class="contentBox4b">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

<section class="contentBox4c">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

<section class="contentBox4d">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</section>

Content Left, Sidebar Right

<div class="contentLeft">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</div>

Content Right, Sidebar Left

<div class="contentRight">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.

</div>