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,
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
- 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.
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
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
- 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
'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
- 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.
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.
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
- Added the ability to add custom ARIA labels to components.
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
- 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