Compass Web Framework

See Compass in action: View the Example Site

Getting started in TerminalFour

Getting Compass up and running in TerminalFour is straightforward, whether you're migrating an existing website or setting up a brand new website.

In T4, Compass includes a page layout and three Compass-specific content types. For other content needs, such as general content, accordions, and heroes, you can use the extensive Plugins System available in the CMS.

Setting Up a New Site

To start a new site with Compass in TerminalFour:

  1. Request a new site setup.
  2. You'll receive a development environment with a basic Compass structure, including essential sections and content types.
  3. You can keep your current site live while setting up the new one. When ready, Web Services will help switch everything over.

Migrating an existing site

Migrating your existing site to Compass involves a few key steps:

  1. Request a develeopment environment for your existing site. 
    • If you need a test site set up to migrate an existing site, you can request a development environment.
    • Submit your IT support ticket with details about your migration needs.
    • This will ensure that you have a dedicated test environment to work on.

  2. Include Required Global Sections: Ensure your site has these sections (hidden from navigation):

    • Site-Head: For code like custom CSS.
    • Site-Header: For header and main navigation.
    • Site-Nav (optional): For sub-navigation in the left sidebar.
    • Site-Feature (optional): For full-width hero content.
    • Site-Sidebar (optional): For right sidebar content.
    • Site-Footer: For footer content and JS.

  3. Set Up Global Sections:

    • Site-Header: Add the Compass - Header and Compass - Nav (Main) components.
    • Site-Nav: Add the Compass - Nav (Sub) component (only for multi-page sites).
    • Site-Footer: Add the Compass - Footer and Plugin - VCU Branding Bar components.

  4. Page Layout:

    • Go to the "Page Layouts" tab under your site's primary channel.
    • Set both "Page Layout" and "Inheritable Page Layout" to Compass - Page Layout.

Other Considerations
Compass uses plugins for most content. Transition your site’s page content to use plugins where possible:

  • Accordion: Use Plugin - Accordion Panel.
  • Callout: Use Plugin - Callout.
  • Card: Use Plugin - Card.
  • Hero: Use Plugin - Hero.
  • Modal: Use Plugin - Modal.
  • Notification: Use Plugin - Notification