dominican logo top
 

Grid Reference

Under the hood, our Plone CMS is now integrated with a responsive framework called Twitter Bootstrap. You can use this page as a reference for figuring out column widths, and how to arrange things on a page.

Standard Content Area Widths

We use a 12 column grid. Our navigation area on the left side of the page takes up 3 of these 12 columns. So we are left with 9 columns in our main content area on pages that have side navigation. Below are widths for the overall 9 column area at different viewport sizes:

Label Viewport width 9 Column Width (Content)
Large display 1200px and up 870px
Default 980px and up 700px
Portrait tablets 768px and above 538px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

 

Small Content Area Widths

If your page has both left-navigation, and a portlet on the right side of the page, then you are left with only 6 column-widths for the main content area. You can use the table below to find out how wide the center content area is on these types of pages.

Label Viewport width 6 Column Width (Content)
Large display 1200px and up 570px
Default 980px and up 460px
Portrait tablets 768px and above 352px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

 

Portlet Area Widths

Here are the sizes for the side columns (left navigation and optional right-side portlets.)

Label Viewport width 3 Column Width (Portlets)
Large display 1200px and up 270px
Default 980px and up 220px
Portrait tablets 768px and above 116px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

 

Single Column Widths

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Viewport width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

 


Common Sites & Pages


Students

Faculty & Staff

Alumni/Parents