# Contributing to Documentation

## Screenshots Guidelines

* Take screenshots from the latest version of Varbase.
* For consistency use this screen resolution when taking a screenshot: 1366 x 768.\
  You can use the [Window Resizer Chrome Extension](https://chrome.google.com/webstore/detail/window-resizer/hgjfanlllikpfpaadggdbchdpcbiaeei/related?hl=en) to help you set the window size.
* Use [Awesomescreenshot](https://www.awesomescreenshot.com/) to help you out.
  * Only use the visible part option, no need to take the whole page, and crop it.
  * Use annotations (Arrows, Steps numbers, Highlights, Rectangles ...etc.) to annotate the screenshot. Always use the red color.

    <img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/TFQhwR29M4QyFc5RmnfU/annotations.png" alt="" data-size="original">\
    \
    Example annotated screenshot:

    <img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/QNYqJJ5ETgqF7Li7zVzn/Content-varbase90x2.png" alt="" data-size="original">
* Make sure screenshots are displayed in a good resolution, not pixilated.
* Always add a caption to screenshots or images in the documentation page. Captions must be following APA title case style. Use [capitalizemytitle.com](https://capitalizemytitle.com/) for help.
* Take screenshots from real content on Varbase website and not from other sites.

## Writing Style

### Naming Standards and Capitalization

* Always capitalize the word Varbase when mentioning it.
* Use [Grammarly](https://www.grammarly.com/) to check on proper grammar and punctuation.&#x20;
* All titles (H1, H2, H3) must use APA title case style. Use [capitalizemytitle.com](https://capitalizemytitle.com/) for help.
* All modules and component names must use APA title case style.

### Headings

* All titles (H1, H2, H3) must use APA title case style. Use [capitalizemytitle.com](https://capitalizemytitle.com/) for help.
* Use descriptive headings and titles because they help a user navigate their browser and the page. It's easier to jump between pages and sections of a page if the headings and titles are unique.
* When possible, use -ing verb form in title to indicate present participle or gerund. Example: "Managing Menu Items"

### Text Styling

* Whenever a module or component name is mentioned, it should be **bold**. \
  Example: Varbase uses the **Layout Builder** module.<br>
* Divide each documentation page with hierarchical titles starting with H1, then H2, then H3. This will reflect in the "CONTENTS" side bar.<br>
* When explaining a path to the user, use bold trail of links separated by backslash (\\) making the last item (where the user should land) in italics.\
  Example: Navigate to **Administration** \ **Configuration** \ **Search and metadata** \ ***Metatag.***<br>
* When a line of code or command is needed, highlight the text and use **<>** option from the tooltip. \
  Example: `cd /path/to/webserver_directory`  <br>
* To make your documentation nice to read, you can add blocks of hints and notes with nice icons by clicking on it, then change it to the desired one. \
  Example:&#x20;

{% hint style="info" %}
See Platform.sh documentation on developing with Drupal and Varbase as an example.\
See <https://docs.platform.sh/frameworks/drupal8/developing-with-drupal.html>
{% endhint %}