ITS Documentation: Design Patterns (Draft)

ITS Documentation utilizes Drupal content management system with Bootstrap framework theme. Knowledge of HTML and CSS, Drupal, and Bootstrap, as well as technical writing, is required.

The following information provides a set of patterns for page elements and common supported features to author and publish documents on ITS Documentation.

Note The ITS Documentation site is managed by the ITS Digital UX Team. Its content is managed by the ITS Performance Support team.

Titles

Use concise and consistent titles.

Drupal

Title Field
Title of Document

Summary

Exercise concision.

Drupal

Summary Field
Technical guidelines for support content on ITS Documentation (Drupal) site.

Headings

HTML
  • Start with h2
  • Use id attribute for h2 and h3 to automatically generate in-page links (sidebar)
  • Do not use spaces or special characters for id value
  • Use hyphen for spaces or special characters for id value

Style & Format

Use existing Bootstrap CSS and components whenever possible.

HTML
  • Do not use custom inline CSS
  • Do not use alignment attributes
  • Use existing standard HTML
  • Use existing Bootstrap framework styles and components
  • Strive for consistency and simplicity

Screenshot Images

Drupal

Add content > Image

HTML

Note ITS Documentation utilizes Bootstrap framework for responsive design.

  • Do not use width and height attributes with img
  • Use img-responsive CSS class with img to make images responsive
  • Use alt attribute with img for accessibility

Video Embed

Documents can not contain media which require third-party plugin to function (e.g., Flash SWF).

HTML

YouTube
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/[YouTube ID]">
</iframe>
</div>

Kaltura (MiVideo)
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="[Kaltura URL]">
</iframe>
</div>

Tags

Drupal

Note Tags are important part of information architecture. Consult with the ITS Digital UX Team to have new tags created on the CMS.

Publishing

Drupal

Publishing options tab

  • Check Published to make the documentation and its URL “live”
  • Use http when linking to the documentation page for universal access without login

 

Resources

HTML
Bootstrap
Drupal

 

Last Updated: 
Wednesday, February 14, 2024