Compass 1.2.0 releasing this week
This week, VCU Technology Services and University Relations will be rolling out the latest version of Compass – The University Web Framework. Along with some improvements to existing features, our latest release includes two new components: Tabs and grid system.
All updates will be available to the VCU web community by end-of-day Friday, Dec. 18.
Tabs component
The new tabs component can be used to organize sections of content into a navigable structure, reducing vertical page space. More details about this component will be available on compass.vcu.edu this Friday.
Grid system component
The new grid system component can be used to organize content in up to five evenly sized columns. The page layout grid has been optimized to allow main content to take up as much space as possible in the absence of a sub-nav and/or sidebar content.
To create a grid, wrap any content in a .cwf-grid element. Add a .cwf-grid–[n]-columns class to a wrapping grid element to restrict the number of evenly sized columns to [n], which can be 2 through 5.
Component updates
The Compass 1.2.0 release includes improvements to the following components:
Hero
- A hero’s blurred background will no longer flicker when opening a main nav’s drop-down menu.
- A hero can now be used with just an image and no caption.
Modal
- The modal is now styled to be more in line with other Compass modals such as the header quick-links modal.
- When a modal is opened, it will now focus the dialog box first.
Nav
- Scroll shadow indicators on long sub navs no longer appear above other elements such as the main nav’s drop-down menus.
- If the current page exists as a link within a nav component, it will now be indicated as such to assistive technologies via aria-current=”page”.
Utility
- Responsive table functionality will now work for tables without a thead element and a table body with a first row of th’s instead.
- New screen-reader-only classes are available to visually hide elements above/below certain breakpoints.
Developer updates
New features
- Component SCSS and JS are easier to pull into external projects, with an option to pull in everything with a single line of code.
- All colors and additional functionality found in a component’s styles can be overridden with SCSS variable declarations.
- All themed components expose a mixin to register new, custom themes.
- All HTML files have been converted to a *.twig file extension for easier development within code editors. In addition, all pages use one unified layout and components expose their structure via macros in an index.twig.
- Markdown is supported within Twig templates using a markdown filter.
- There’s a new shared/media.js file for handling reduced motion preferences within component JS. This is currently being used by the accordion and tabs component.
Changes
- All dependencies have been updated, security issues have been resolved and new development dependencies have been added to extend the build system.
- The default SASS compiler has been changed to the mainline sass package (which uses DartSASS under the hood). This is due to better feature support and the deprecation of LibSASS.
- The supported Node LTS version has been bumped to v12.19.0.
- The global .l-contain class has been removed in favor of using a global media__contain mixin on unique component container classes.
Change management schedule
Monday, Dec. 14
- Compass core v1.2.0 released to VCU’s private NPM repository.
Tuesday, Dec. 15
Wednesday, Dec. 16
Thursday, Dec. 17
- Compass Web Framework T4 updates (CM 8084)
Friday, Dec. 18
- “Tab Panel” plugin launch (T4 implementation of Compass’ new tabs component)
- Components documentation site updates
Have questions about this release?
If you have questions about the Compass 1.2.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 Releases