¶ QR Codes
https://www.qrcode-monkey.com/
¶ Headers
Headers should not be used for the overall page. For example, an article on the K2 shouldn't have a main heading of "K2". Headers should flow and make sense.
¶ Subheaders
H1 (#) and H2 (##) should always be the most important, as they'll show in the list of sections on the side of the page.
¶ Icons
<i class="mdi mdi-information-outline v-icon"></i>
¶ List
These are the standard icons we're using. Find more here.
| Icon | ID | Purpose |
|---|---|---|
| information-outline | Informational boxes | |
| sign-caution | Danger areas | |
| alert-outline | Warning areas | |
| help-circle-outline | Help blocks | |
| book-outline | Terms | |
| lightbulb-outline | Examples or questions | |
| book-open-variant | ||
| lifebuoy | Contact Support | |
¶ Callouts: Tips, Notes, Warnings, and Danger
Any area that needs a note should be formatted as such. Here are a few examples:
Danger
Warning
Success / positive notes
Info/note
¶ Emoji
Emoji can be used similar to Slack, Github, etc. Here's an awesome cheatsheet 
.
These emoji are uniform across all browsers/operating systems, so it really helps make this document look slick and professional. Nearly all callouts should be prefixed with an icon. Use Icons when you can vs emoji.
¶ Section Links
Section links should use {.links-list}.
¶ Ordered Lists
Ordered lists should be written in the Markdown fashion, so...
1. One
1. Two
1. Three
1. Four
Which will make this:
- One
- Two
- Three
- Four
This makes reordering such lists a breeze.
¶ Tables/Tabular Data
The easiest way to make a table is to use table generator.
¶ Graphics
Graphics should be thought of in a mobile-first mentality. It can't be overbearing, super small, or too busy.
¶ Organization
Images are organzied in the /images/sections method.
¶ Abbreviations
Abbreviations should be addressed at the top of documents. To see an example, see the Ross Carbonite document source.
¶ Footnotes
Footnotes can be added anywhere necessary. So far a good example page is the K2 source.
¶ UML Docs
If you need a UML doc, you can look at draw.io. To keep with the design and style, some UML docs should go through Heath to create uniform documents.
¶ Code Blocks
Code blocks, or things that may need copy/pasting can be used.
Anything code related. Or you want
people to
copy and paste simply.
¶ Page Source
Any page source can be easily and quickly viewed. To view, add /s/ before the page url.
| URL | Source |
|---|---|
| /examples | /s/examples |
¶ Exportable
This entire handbook is easily exportable. Since it's using Markdown, it can be parsed as a PDF and sent that way, or forked on Github, etc.
¶ Markdown Additional Reading
Everything here is done with Markdown, which is super simple to use and straightforward. See all the cool stuff you can do
on the Markdown Guide.