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 MPW 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 Web 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.