Compass Web Framework

Compass 1.5.0: Enhancements

by Morgan Huff

The October 2021 release of the Compass web framework introduces numerous enhancements to improve existing elements.

This release cycle also included ‘work in progress’ on a new Carousel component that is intended for a future release.

A reminder about the Patterns section

Patterns are examples/guidelines on how to use multiple resets, utilities and components in tandem for a more specialized use case and to assist website developers and moderators in creating consistent, usable pages.

A pattern guide is available at the production example site’s patterns page until proper documentation can be provided on compass.vcu.edu. We recommend utilizing this new resource.

Resets updates

Blockquote

  • Blockquotes will use VCU gold instead of the configured accent color when used within a dark footer, hero, or non-secondary notification.
  • Blockquotes will appear simplified when used within a footer, hero, or notification.

Paragraph

  • Lead paragraph styles, when using the modifier class on a wrapping element of text, now works as intended.

Utilities updates

Marker

  • The marker utility now works on paragraphs as well selections such as spans, strong tags, and emphasis tags. This changes the text color to the global accent color (blue by default) unless used within a component where color contrast is a concern where it will display as VCU gold.

Text

  • New color and font text utilities are now included.

Component updates

Carousel (work in progress)

  • The Compass team is hard at work coming up with a carousel solution that meets user/developer expectations while also striving to exceed accessibility and user experience standards. More information on this new component coming soon!

Footer

  • The footer component now has an optional fax field, which shows up after the phone number but before the email.
  • TikTok accounts linked within the social links area will now display a TikTok icon.
  • The middle column is now optional; If no middle column content is provided, the middle column won’t be rendered and the dividers will be removed.

Grid

  • The page layout main column will no longer expand past its intended maximum width.

Hero

  • Captions no longer have a background-color or blur effect applied when it is not displayed as floating to ensure better performance on mobile devices and make style overrides easier.

Navigation

  • Fixed an issue where the nav wouldn’t indicate the current page and its parent pages properly in certain circumstances.
  • Toggling the main navigation’s visibility on mobile viewports now uses a more descriptive, element-level class instead of a document body class.2

Developer updates

Changes

  • The recommended LTS version of Node.js has been bumped to v14.17.3.
  • The recommended version of NPM has been bumped to v7.20.0.
  • All dependencies have been updated to their latest versions.
  • All instances of SCSS divisions by slash have been converted to math.div(…) per the recommendations of the SASS team.
  • Example site generation code within the core repo has been sandboxed into a site directory at the root.
  • JSON data, flattened route data, and FontAwesome brand icons from a given string can now be used in Twig files using the new json, flattenRoutes, and icon filters.1
  • Redundant functionality paradigms within components/resets have been consolidated into the shared, global Component JS class.
  • Main navigation on mobile viewports will toggle a .cwf-nav–modal class on the navigation element itself instead of toggling a .cwf–show-main-nav class on the document body to show/hide.2
  • All components with JS functionality can now be passed a prefix option, which gets prepended to all IDs/classes defined by the component for easier integration into third-party applications or custom components.
  • Readme documentation for most resets, utilities, components, and patterns has been improved to include more information, especially T4 implementation and better examples.
  • Shared miscellaneous functions have been organized under the shared directory.
    • shared/route.js – Includes the flattenRoutes function (now named flatten) as well as its functional dependencies.
    • shared/transform.js – Includes transformational functions previously reserved for Twig filters, such as converting markdown to HTML and generating icon classes from a string.
  • The shared style.angle(…) SCSS mixin now supports specifying the side of the element the angle appears as an argument. This argument is “right” by default, but can be set to “left” or “both”.

New

  • The navigation component examples now have their own defaults data instead of relying on the example site’s defaults.1
  • Two new global JS functions are available to consolidate redundant code:
    • stateListener(state) of the event module generates an event listener string based on the provided state.
    • trap(focusable, event = {}) of the focus module provides focus trapping functionality.
  • All SCSS selectors using the cwf prefix can be changed/configured.
  • Faker is included in the Gulp Twig task, allowing developers to generate fake content with Twig files (i.e. <p>{{ faker.lorem.paragraph() }}</p> ).

Have questions about this release?

If you have questions about the Compass 1.5.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
Tagged , , , , , , , , , ,