Compass Web Framework

Developer Docs

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. Compass' T4 integration comes with one page layout and three Compass-specific content types, with the rest of the content types leveraging the expansive Plugins System for things like general content, accordions, heroes, etc.

Setting up a new site

The most straightforward approach to establishing your site in Compass is to set up a new site. After requesting a new site, you will be given access to a new development environment with a basic Compass structure that includes the important sections, content types and other pieces already in place.

If the development environment is for an existing website, your current site can stay online and continue to be updated while you set up the new site. Once you're ready to take the new site live, Web Services will take care of everything and get things switched over.

Migrating an existing site

You don't have to start from scratch to get your T4 site into Compass! While migrating an existing site isn't as straightforward, the following should help identify what you need to set up, include and transition over to in order to get things working.

Include the required global sections

Ensure your site has the following sections directly under your site's home section; These sections should be hidden from the navigation (deselect the “Show in navigation” checkbox under the section's General tab):

  • Site-Head - This is for inserting code, such as custom CSS, into the <head> of every page.
  • Site-Header - This is for including components, such as the header and main navigation, at the top of every page.
  • Site-Nav (optional) - This is for including components, such as the sub navigation, within the left sidebar of every inner page.
  • Site-Feature (optional) - This is for including content, such as full-width hero, at the top of every page just below the Site-Header content.
  • Site-Sidebar (optional) - This is for including content, such as a callout, within the right sidebar of every page.
  • Site-Footer - This is for including components, such as the footer, or code, such as JS, at the bottom of every page.

Content added to these special sections will be included on all pages of your site. If you already have these sections on your site, you can still use them.

Setting up the required global sections

Configure the "Site-Header" section by adding a header and main navigation Compass component into it. Check out the following component documentation to understand how to set these up:

  • Header - Use the Compass - Header content type
  • Navigation - Use the Compass - Nav content type with type set to "Main"

Configure the "Site-Nav" section by adding a sub navigation Compass component into it by using the Compass - Nav content type with type set to "Sub." Check out the Navigation documentation to understand how to set it up. Keep in mind that if your site is a single page, this does not need to be set up, as it's only visible on inner pages.

Configure the "Site-Footer" by adding a footer Compass component and VCU brand bar into it. Check out the following component documentation to understand how to set these up:

  • Footer - Use the Compass - Footer content type
  • Brand bar - Use the Plugin - VCU Branding Bar content type

All the other global sections aren't necessary to get things up and running, and can always be added later on if you need their functionality.

Setting up the page layout

On the home section of your website, go to the "Page Layouts" tab and under your site's primary channel, set both the "Page Layout" and "Inheritable Page Layout" to Compass - Page Layout. Compass' page layout dynamically changes whether it's being used on a home or inner section.

Other considerations

Seeing as Compass' T4 integration leverages the Plugins System for most content, it's important to use plugins for all page content outside of custom content types you may be using. While some plugins are yet to utilize their Compass component counterparts, the following components have been mapped to an existing plugin:

  • Accordion - Use the Plugin - Accordion Panel content type
  • Callout - Use the Plugin - Callout content type
  • Hero - Use the Plugin - Hero content type
  • Modal - Use the Plugin - Modal content type

Moving forward, all new Compass page content components will be mapped to an existing or new plugin, so it's important to transition your site's page content over to using plugins.