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.).
- 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
- New list utilities that now include arrows, chevrons, stylized numbers, step indicators, and timelines.
- New transparent WVU slash element style.
- A new Page Collection - Icons component and Page Collection Vertical - Icons component that allow the user to pair content with Font Awesome icons.
- A new Photo Grid component for displaying student and faculty profiles.
- A new Alternating Grid component for displaying profiles and pages.
- A new Page Collection - Colored Boxes component.
- A new Action Hero Banner component.
- A new Profile Hero With Border component.
- A new Testimonials Fancy component.
- A new Horizontal Secondary Nav component for site sub-sections
- A new Timeline component.
- A new Programs component that pulls program info from Contentful into a listing with links to each Program page section.
- A new Video Hero component.
- A new Alert Banner component that can be closed by the user.
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.
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
- Added a Utilities Cheat Sheet.
- Components are now separated out into categories and have icons that allow the user to find what they need quickly.
- Component docs (example: Pages) now have code examples that are more accurate, indented properly, and color-coded.
- Component docs now have expanded Content and Styling guidelines.
- Component docs now show all available configuration options for Shared CleanSlate partials.
- Component docs now show relevant How-Tos and Tips guides for Shared CleanSlate partials in the sidebar of the Shared CleanSlate Partials section.
- There are a number of new How-Tos and Tips guides for using CleanSlate Shared Partials.
- There are a number of new How-To guides for creating themes using the WVU Design System.
- There’s a new Showcase page that shows off new websites that use the WVU Design System.