Explore

Vanderbilt Design System & Public Site Prototype Technology Brief

November 2024, Schooold Technologies, Inc.

⁠

Overview

This document serves to earmark assumed responsibilities and impediments that may influence Schooold Technologies, technology efforts for the Vanderbilt Design System & Public Site Prototype project. In support of the Schooold Technologies, agile process, it is meant to be a living document that will grow and change as the project progresses.

An assumption states an agreed upon (or assumed) responsibility for an involved party. It may also imply one or more resources Schooold Technologies, can safely expect to be in place in support of the project build. The goal of assumptions in this document is to identify known duties, employable assets, and Schooold Technologies’s technical approach.

A constraint states a particular challenge or risk that may hinder project progress, and as such, may require mitigation. It may also denote terminal situations that force a reduction in scope or prevent certain functionality. The goal of constraints in this document is to identify actionable (and non-actionable) project obstacles.

Assumptions

Upstatement will use

Puppy⁠

, a

Twig⁠

-based static site generator, to build both the design system and prototype pages. In addition to Twig, Puppy also makes use of common tools like

Sass⁠

, JavaScript,

Gulp⁠

, and

Webpack⁠

Upstatement will build a set of components for Vanderbilt’s new design system.

These components will be written with semantic and accessible HTML in the Twig templating language.

These components will serve both the design system and prototype pages.

Upstatement will build all components to adhere to

WCAG 2.1⁠

level AA accessibility requirements.

Upstatement will build an interactive design system that will house documentation for the usage and application of the design system.

Each component will have their own page including an example of the rendered component, usage guidelines, accessibility considerations, data requirements, and information on different variations.

Each component will include code snippets of Twig code and compiled HTML code that can be copied to the user’s clipboard for convenience.

Documentation for components will be written in plain HTML or Markdown.

Upstatement will build interactive sample pages of the public site using the components to demonstrate how best to apply the design system in context.

Upstatement will build both the design system and prototype pages in a single environment.

Upstatement will establish a build process for generating global CSS and JavaScript files to serve all components.

Upstatement will build and test against the browser targets listed in

Appendix A⁠

Upstatement will manage source code for the design system and public site prototypes via Git and GitHub.

Code will be hosted in a private GitHub repository within the Upstatement organization.

Access will be restricted to Upstatement team members and Vanderbilt developers as needed.

Upstatement will work with the client to transfer repository code and associated artifacts to a client owned location during transition sprints.

Upstatement will use

Netlify⁠

will to host this environment and provide Vanderbilt stakeholders with preview links.

Vanderbilt engineers will be responsible for facilitating the application of the new design system and its components within the new WordPress theme.

Constraints

The design system and its components will be new to the NNSC team, who will be responsible for translating the components into their new WebFlow site.

Mitigation: Upstatement will provide detailed documentation for individual components and styles. Prototype pages will include example usage for Vanderbilt engineers to reference.

Mitigation: Upstatement will share the working prototype and design system applications with the Vanderbilt team early in the process to ensure the components are well suited for real-world content.

Vanderbilt has limited knowledge and experience with Twig and Timber.

Mitigation: Upstatement has prepared and shared Twig and Timber resources and training videos for the Vanderbilt engineering team. Further training sessions are also within scope if needed.

Vanderbilt may not choose to implement the new WordPress theme with Timber.

Mitigation: Upstatement will include HTML code snippets alongside Twig code snippets for each component. Vanderbilt engineers will be able translate the provided HTML markup to PHP.

Puppy doesn’t have a large community — like a popular tool such as Storybook does — to turn to for support.

Mitigation: Upstatement will provide detailed developer documentation on the inner workings of Puppy. During transition sprints, Upstatement will provide documentation and trainings for knowledge transfer.

⁠

Appendix A: Browser Support

The following details browser support targets for this project.

Support targets are categorized under three tiers:

Class "A", Primary Support

By taking full advantage of the powerful capabilities of modern web standards, the A-grade experience provides advanced functionality and visual fidelity. Javascript enhancements are fully realized and users are able to get the fullest experience offered by the website.

Target Summary

Desktop

Latest versions of Chrome, Safari, Firefox, and Microsoft Edge

Mobile

Latest version of iOS Safari and Chrome for Android

Class "B", Secondary support

This class of browser offers a high-grade of experience. However, because of software or hardware limitations, some elements of the A-grade experience are not available to users. In these situations, graceful fallbacks will be provided to ensure core functionality and content is delivered to the end-user without the more adventurous experience.

Target Summary

Desktop

Previous version of Chrome, Safari, Firefox, and Microsoft Edge

Mobile

Previous version of iOS Safari and Chrome for Android

Class "C", Tertiary support

This class of browser offers a limited experience. Content is viewable and legible, but layout enhancements and visual detail may not be present.

Target Summary

Desktop

Internet Explorer 11

Mobile

N/A

Table 1

Table 1

Browser

Version

Device

Class

Chrome

Safari

Firefox

Microsoft Edge

iOS Safari

Chrome for Android

Chrome

Safari

Firefox

Microsoft Edge

iOS Safari

Chrome for Android

Internet Explorer

There are no rows in this table

⁠

Overview

Assumptions

Constraints

Appendix A: Browser Support

Table 1

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.