Skip to main content
Design System 2
University Relations
Contribute

What’s New in Version 2.0

Bootstrap 5 and FontAwesome 6

We’ve upgraded the WVU Design System to include Bootstrap 5 and Font Awesome 6 Pro. This will provide a number of benefits to our users:

  • No jQuery dependencies in the core theme files.
  • More utility classes for greater control over styling (new font sizes, line heights, etc.).
  • Namespaced data attributes that remove conflicts when using Javascript plugins.
  • Nicer form controls.
  • Inline SVG icons for more accessible websites.
  • A wider selection of icons.
  • The ability for us to add custom icons.

New Utilities and Components

Improvements to Existing Utilities and Components

  • Added a new (simplified) topo map background element.
  • The topo map is now a repeating pattern so it doesn’t grow in size (and look funny) or shrink (and become invisible).
  • The old ‘featurettes’ styles are now separated out into their own components to reduce complexity. Instead of having 10 different “featurettes” components we now have components that are named more intuitively e.g. “pages,” “people,” “contacts,” “calendar events,” etc.
  • The old ‘featurettes profiles’ component is split into a People component and a Contacts component.
  • Added social media icons to the Primary Navigation component.
  • Added a ‘sticky’ nav to backpage submenus.
  • Added an external link icon to external links in the primary navigation.
  • Improved Video Feature component that includes a sidebar for the video title and description.
  • On the Cards With Overlay component, text no longer gets cut off on small screen sizes.

New Templates and Themes

  • Removed obsolete templates, for example the Event Agenda and Big Search Results, in the base CleanSlate theme.
  • Added 9 new standard templates. Each comes standard with the WVU Design System CleanSlate theme.
  • For CleanSlate users, the components in each template can be disabled on a per-page basis in the page’s custom data.
  • Added a Themes page that provides guidelines for creating various types of websites.

Improved Shared CleanSlate Partials

  • Added a warning for collection components that tells the user when no pages are labeled, and shows which label to add to their pages in order to get them to display.
  • When collection items lack descriptive text, a warning message displays rather than placeholder text.
  • It’s now easier to add a thumbnail image to page.
  • Added the ability to reverse the order of collection items. This gives you the option of adding new collection items either at the beginning or the end of the collection, rather than having to shift content around.
  • Users can now set a start depth and max depth for sub-menus on a per-page basis in the page properties. There also now an info box above the subnav letting the user know the current page depth in case they want to use this option.
  • Unique editable region names for shared CleanSlate components that use scope: 'site'. This prevents conflicts between components of the same type with the same instance number, but different scopes.
  • Appropriate editable regions now show in the Style Editor and all default styles now display.
  • Users can style icons in the Page Collection - Icons component and Page Collection Vertical - Icons component by adding and icon code in the page settings and styling the icons using the component styler.
  • The Page Header component now has a region where you can insert a dropdown menu. This can be activated in the page properties to automatically list child pages, or you can manually insert a dropdown menu if you want to link to sections on the current page.
  • Added the ability to change an author’s name of an article and disable the author’s name for the Article component, the Articles component, and the Articles index component.
  • Improved Contact Info component with regions separated out for office, phone, email, and a new “contact an individual” section that links to a contact collection.
  • Added a tooltip in the Article Index component linking to our blog docs.
  • Header labels now auto-populate upon creation to reduce time fixing accessibility errors.
  • Added the ability to add custom ARIA labels to components.
  • The Video Feature component now allows the user to enter a YouTube URL (which CleanSlate then parses) to get the video to display, making it easier to add videos.
  • The Article Index component now removes duplicate photos (in case the user puts a photo inside the first paragraph of their article).
  • 8 new ‘container’ Shared CleanSlate partials that allow users more flexibility when creating pages.
  • Added the ability to define the order of components inserted into slots in the Super Template. This make it so you can change the order of components without having to re-insert them into different slots (and re-build their configuration options each time you would have to do this).
  • Added the ability to apply a header background to an entire section.
  • Added the ability to apply a background image to all sitewide components with the same name and instance number at once.
  • Added the ability to customize which labels to use to pull content dynamically into collection components.

Revised and Expanded Documentation