Web Grid

Do your eyes glaze over when talking about website grids? Don't worry – if you've never designed using a grid system, the CMS makes it easy. Our use of the grid system creates a sense of uniformity across all UNC pages and makes it easier for visitors to navigate our ever-growing web presence.

12-Column Foundation Grid

ZURB's Foundation is a semantic, readable and flexible framework that we have customized just for UNC. Regardless of page type, our templates consist of 12 equal-width columns spread across a portion of the screen. The biggest thing you need to know about this grid system is that when calling out certain size columns, they will usually equal 12 (but never more). You can use incomplete rows, but they behave a little differently.

Sidebar

Starter templates in master- and sub-sections let you choose whether or not you want a right-hand sidebar (which occupies 4 columns). With it on, you are left with 8 columns for main content. This is shown below.

Other options

Through the use of snippets, you can create columns to any size that you want. Learn more about using snippets.

Four Column Snippet

Three Column Snippet

Two Column Snippet

Variable Column Snippet

Use the Variable Column snippet to create columns of widths for which there is not already a snippet.

The default snippets build columns that will break, or collapse, on medium and smaller devices. You can use the Variable Column snippet to switch between the small, medium and large grids.