This document is to be used as a supplement to the ITS Documentation Site Scope and ITS Documentation Design Patterns. It is a collection of further-defined styles and standards for the ITS Performance Support Team. The PSA and DUX teams meet monthly to discuss best practices and update these styles and standards.
Getting Started
What you will need:
- HTML editor Sublime Text or basic text editor
- SFTP software WinSCP for Windows to upload image files
- Access from the Digital UX Team
- To maintain the service’s Content Type on the site
- To upload image files to the AFS directory
To set up:
- Create a local folder on the P:MAIS drive in Groups > Performance Support > HTML
- create a sub-folder for images
- copy the template.html file from another service's folder into your new folder
Note use this file to start all new files. only the code between the content tags should be edited and used to copy and paste into Drupal's code view.
Warning Do not enter or edit code in Drupal. Drupal may alter/break your code.
- Set up an SFTP connection to the service's folder in the AFS directory
Standards
Page Titles
Service: Title
Navigation
<h2>Navigation</h2>
<p>step > step > step > step</p>
Revisions
Make a new revision to the document if content changes significantly or date of last revision needs to be updated (This will change the date/time of authoring, which can impact the order in which documents display on the service landing page).
Note(s)
<span class=label label-info>Note(s)</span>
Tips
<span class=label label-success>Tip(s)</span>
Important
<span class=label label-warning>Important</span>
Warning
<span class=label label-danger>Warning</span>
Related links
<span class=label label-primary>Related Links</span>
Enter text
<kbd>Exact text user should enter</kbd>
Description lists
<dl> or <dl class=dl-horizontal>
Fontawesome
Consider using fontawesome over screenshots if similar to the button/icon.
Images with captions
<figure><img alt="image alt text" class=img-responsive src=imagefilesource/><figcaption>Caption text</figcaption></figure>
Note Move the <figcaption></figcaption> code immediately before the image code to make the caption display above the image.