Style Guide

The Meerkat theme is set up on a fluid 12 column grid with gutters, and is 1140px wide at full size.

Click for full sized image
Click for full sized image


The header contains:

  • a link to the main college website
  • the site’s 4 primary navigation links, marked by the primary palette colors
  • a Williams-wide search box
  • 3 utility links (Quick Links, Campus Map, Events)
  • the site’s title – by default this is a purple box, but a logo can be used instead (296px wide by 172px tall)
  • a banner image (1140px by 240px)

Content area

The content area spans 9 or 12 of the grid columns (sidebars can be turned off) and has a wide variety of formatting options depending on what content is used.


The sidebar is 26% of the width of the design (296px on a large screen). It aligns with the search box/utility links/site title block in the header and the wordmark block in the footer. It contains supplemental navigation, and various widgets picked out by the site administrator. The sidebar can be hidden on a per-page basis.


The footer contains contact information and social media links that can be customized per site. It also contains static links to pages on the main college site, as well as the college wordmark, and WordPress login link. The footer stretches to 100% of the screen’s width, unlike the rest of the Meerkat design. The dark grey block behind the wordmark should always line up with the sidebar.