The WSU Spine was built to provide a consistent brand framework for use throughout the University. It exists in sort of a balancing act trying to allow great flexibility while maintaining a familiar look and feel for visitors to WSU web properties.

The Spine is structured as such:

The primary site navigation and brand elements are inserted as part of the #spine container. All content appears in the main element.

It is important to keep this page structure in mind when styling a page through CSS. The Spine provides default styles for many different elements to establish the initial consistent look and feel. It also relies on some of these styles to properly display a consistent experience in the Spine area itself.

If you look at anchor (a) elements specifically, you’ll see a few default styles in the Spine. The above two are pulled directly from spine.css. All anchors are set by default to have no text decoration and to be crimson. Anchors inside the #spine container are set to be gray, but they retain the other default property applied to all anchors on the page of text-decoration: none.

A common custom style here is to add underlines or other properties with the intent of changing the anchor elements in the page content. When dealing with general elements such as anchor, some specificity is required to make sure only the intended styles are modified.

Prefixing the rule with main applies the intended style and leaves the #spine container as is. Not prefixing the container causes the Spine to lose its default display properties with unintended consequences.

If you’re targeting a specific page, let’s say this current post, you can still use main in addition to other body classes.

Anchors in the Spine will remain without underline, those in the main content area will have an underline, and those in the main content area of single pages will have a dashed underline and a lighter font.

Being aware of the Spine structure and targeting elements with the appropriate specificity will go a long way in maintaining the consistent look and feel that visitors expect. We’ll also continue working to provide more explicit defaults for crucial parts of the Spine to help prevent accidental overrides.

If you’d like to dive any deeper on this or have thoughts to share, we meet weekly on Friday mornings for open lab where this discussion would be perfect. 🙂