The College DLS is our effort to realign all college websites with a standard pattern library and design system to provide a core user experience for all audiences across all types of screens and browsers.
Implementation of this pattern library in your existing systems will depend highly on the needs of your project and your current environment. Academic Strategic Communications will be working with each college in an implementation with approved University content management systems (primarily Cascade CMS at the start).
npm run build to build any assets. The main branch of this repository will always feature the current build that can be used in production sites.The College DLS attempts to provide a design system following best practices for atomic web design. As such, the project is broken up into three main sections. You don’t need to understand all of the following concepts to install/use the design system, but you will need to know them to build with it:
01-Visual Styling: This contains our basic design system tokens and base styles including but not limited to: color, spacing, typography, anchor links, buttons. These form the building blocks of the design system.
02-Components: Smaller components that are used to build the larger Section Components (see next item). These are and consistent self contained blocks of HTML and corresponding CSS which are used to create smaller building blocks used by larger components.
03-Section Components: Section level components intended to be used to build pages. Start here if you are looking to customize your own page design.
04-Reference Pages: Our reference pages contain example pages built using section components (full-width containers) from 03-Section Components. This work was initially delivered by our Pattern Library vendor (Simpson Scarborough), a copy of their original deliverables copy of their original deliverables is also available.
If you have any questions during, before and/or after getting started, please reach out via our issues or by email at vpaacomms@utsa.edu.
You will need to use the following tools to get started working with this repository directly:
If you are looking to build pages directly using the new DLS, you can build the same files we build and install in our implementation projects by utilizing the npm run build command. More information on utilizing this repo can be found on the Contributing page.
College DLS utilizes two third party services that are restricted to *.utsa.edu domains:
If you need to utilize the DLS on a non *.utsa.edu website, please contact us by submitting a ticket request to Academic Strategic Communications.
The College DLS was built with Bootstrap v5 and Fractal. Initial design work and implementation was completed by Simpson Scarborough. The following dependencies are also used heavily in the production of this design system: