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.
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.
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.
On small screens
Small screens might include phones. Technically, any screen size that has a maximum width of 40em (or 640px).
On medium screens
Devices with a width between 40.063em (641px) and 64em (1024px). Phones in landscape orientation and some tablets.
On large screens
Any display that is between 64.063em (1025px) and 90em (1440px), such as a laptop or desktop computer.