Style Guide

A style guide is a documentation that transforms front-end design code bases into a well-organized pattern library.

Style guides aid in promoting clean and consistent user interfaces, branding, modular web development, and a more efficient design-development workflow.

A "living" style guide has the advantage of being in constant sync with the actual code meaning that the documentation dynamically updates to reflect the code changes.

Patterns

Style guide, also known as pattern portfolio or pattern library, expresses the site's component, styles, and layout structure. By identifying the patterns and developing a system, it allows flexible addition of content while maintaining consistency that promotes the online brand identity of ITS.

Modules

Many of the modern ITS pages are comprised of modules or "building blocks" that are designed to be combined together. Focusing on front-end modules, rather than complete pages, help make page layouts into reusable solutions.

The look and feel of these components are informed by the colors and type that define the ITS sites, which is themed using CSS. The underlying code structure of each component is reusable.

Example of reusable modules on ITS.umich.

ITS Web Starter Kits (Beta)

Guidelines and boilerplate HTML and styles to get started on a new ITS web project.

ITS.umich

The publicly accessible and responsive site for ITS resources.

documentation.ITS

Content management system for ITS support documentation.

The material here is provided as-is, and subject to change, by the ITS Digital UX Team to promote consistent UI and efficient modular web design & development. It is intended for audience with working knowledge of HTML & CSS as a tool to aid in their content design.
Contact the Digital UX Team for assistance.