Compass Web Framework

Compass 1.3.0 to feature component updates

by Sarah Stanley

Between April 5 and April 9, VCU Technology Services and University Relations will release the latest round of updates for Compass – The University Web Framework.

While this upcoming release does not introduce any new components, the Compass team has made significant improvements to existing ones. 

Here’s what you can expect:

Component updates

Breadcrumb

  • Dropdown menus from a truncated breadcrumb are no longer obstructed by page content such as heading markers and form inputs.

Card (callout)

  • Callouts have been renamed to cards, as their functionality and purpose have been extended.
  • Cards now allow for an image to be placed adjacent to body content (right by default), with options to display it to the left or on top of the body content.
  • Accented cards now use the global accent background/foreground colors for the background, text and links colors.

Footer

  • The privacy link found within the inclusion section now points to the newer URL instead of relying on an old redirect.

General content

  • Typography alignment and spacing has been overhauled.
  • Site-wide serif font (Merriweather) use is now supported. Only general content, or general content areas of components, can use the serif font (global/interactable components and elements will remain sans-serif, Roboto).
  • Multi-line headings no longer have undesirable line heights.
  • Blockquotes now use the global accent background color for the borders and attribute text, Font Awesome for its left double-quote icon, automatically adds the closing right double-quote for you, and allows for just a quote (with no footer/citation).
  • Multi-line headings with markers now indent to keep the left side of the text aligned.
  • Lists have reduced indentation when used within WYSIWYG areas of other components to allow more horizontal space for text.

Grid

  • The available space the page layout main column can take up is now calculated from the –cwf-contain–max-width global property to account for theming.

Header

  • Header quick links, when displayed in modal form, now use the global accent background/foreground colors for hover/focus background/foreground colors.

Navigation

  • Dropdown menus from a desktop main navigation are no longer obstructed by page content such as heading markers and form inputs.
  • Dropdown menus of the main navigation on desktop viewports have been widened to avoid text wrapping within links.
  • Light navs now use the global accent background/foreground colors for active borders and hover/focus background/foreground colors.
  • Nav link padding has been reduced to allow more horizontal space for text.

Notification

  • Lists within the notification body no longer appear unstyled when viewed on mobile devices or smaller screens.

Tabs

  • Tabs now use the global accent background/foreground colors for active borders and hover/focus background/foreground colors.

Utility

  • New classes to transform text to uppercase, lowercase and capitalized have been added (and mapped to their T4 WYSIWYG editor equivalent).
  • New class to mute text has been added (and mapped to its T4 WYSIWYG editor equivalent).
  • New classes to style lead and/or drop-cap paragraphs have been added.

Developer updates

Changes

  • The supported version of Node.js has been bumped to v14.15.4
  • All dependencies have been updated and security vulnerabilities have been audited and fixed.
  • The shared libraries have been normalized to match the component structure for better maintainability and readability.
  • The component JS has been normalized to function identically in terms of instantiation/initialization, leading to a new shared/component JS library which provides a universal initialize function and a base Component class that all component classes now extend.
  • All callout classes and CSS variables are now prefixed with cwf-card.
  • The media__contain mixin has been moved to the shared theme SCSS library under the name theme__contain, now using the library’s structure and formatting to accomplish this.
  • Font Awesome has been upgraded to v5.15.2, which includes incremental updates to existing icons and provides new icons, such as COVID-19 awareness icons.

 New

  • The shared SCSS libraries have been extended to include new mixins for removing vertical spacing of child elements (style__children), using a pointer on hover (style__cursor), and flipping an element for use in animations (animation__flip).
  • Z-indexes have been categorized into easy-to-understand layers/levels and are now accessible from a shared style mixin, style__z-index.
  • Creating angled elements or Font Awesome pseudo-element icons can now be accomplished via the style__angle and style__icon mixins respectively.
  • A new theme structure has been implemented as a shared SCSS library, shared/_theme.scss. This library allows setting and using custom CSS properties that handles fallbacks, and it makes theming an entire Compass site much easier.

Release schedule

April 5

  • Card (formerly callout) plugin upgrade (CM8610)
  • Accordion panel plugin update (CM8611)
  • Hero plugin update (CM8612)

April 6

  • Modal plugin update (CM8613)
  • Notification plugin update (CM8614)
  • Tab panel plugin update (CM8615)

April 7

  • Compass header content type update (CM8616)
  • Compass nav content type update (CM8617)

April 8

  • Compass footer content type update (CM8618)
  • Compass page layout update (CM8619)

April 9

  • Component documentation site update (CM8620)

Have questions about this release?

If you have questions about the Compass 1.3.0 release, or suggestions for a future release, message our team on the VCU digital community Slack channel or send us an email at compass@vcu.edu.

Categories Plugin updates, Releases