====== uiTotalLauncherManual: Style & Contribution Guide ======

This page serves as the visual standard for all contributors. Please follow these patterns to ensure the manual remains professional and easy to read on both Desktop and Mobile.

===== 1. The 3-Column Grid (Desktop) =====
Use the ''group'' and ''third column'' syntax for all Table of Contents or feature lists. This ensures the layout stacks into a single column on mobile devices.

<WRAP group>
<WRAP third column box>
**Column One**
  * Use bold for headers
  * Keep lists concise
  * Use [[:namespace:internal_filename_link]]
    * as <code>[[:namespace:internal_filename_link]]</code>
</WRAP>
<WRAP third column box>
**Column Two**
  * Content stays aligned
  * Boxes have borders
  * Height is dynamic
</WRAP>
<WRAP third column box>
**Column Three**
  * Fits 3 per row
  * Stacks on mobile
</WRAP>
</WRAP>

===== 2. Typography & Hierarchy =====
==== Headings ====
Standardize headers to keep the Table of Contents (TOC) organized.
  * **Level 1 (H1)**: ''====== Page Title ======'' (Use only once at the top).
  * **Level 2 (H2)**: ''===== Main Section =====''
  * **Level 3 (H3)**: ''==== Sub-Section ====''

==== Typography ====
  * **Text Emphasis:**
<WRAP group>
<WRAP third column box>
  * Use **Bold** <code>**text**</code> for UI buttons or menu items (e.g., Tap on **Design Menu**).
</WRAP>
<WRAP third column box>
  * Use ''code'' <code>''double apostrophe''</code> when providing navigation directions or user input.
</WRAP>
<WRAP third column box>
  * Use //Italic// <code>//text//</code> for general emphasis or instructions.
</WRAP>
<WRAP third column box>
  * Use Underline <code>__text__</code> sparingly for added focus.
</WRAP>
</WRAP>

===== 3. Images & Screenshots =====

^ Left Aligned with Border ^ Center Aligned with Border ^ Right Aligned with Border ^
| <WRAP borderedimageleft>{{:ui:ui-icon_logo-uitlm.webp?150 }}</WRAP> | <WRAP borderedimagecenter>{{ :ui:ui-icon_logo-uitlm.webp?150 }}</WRAP> | <WRAP borderedimageright>{{ :ui:ui-icon_logo-uitlm.webp?150 }}</WRAP> |
| **Syntax:** \\ <code><WRAP borderedimageleft>{{:image.webp?150 }}</WRAP></code> | **Syntax:** \\ <code><WRAP borderedimagecenter>{{ :image.webp?150 }}</WRAP></code> | **Syntax:** \\ <code><WRAP borderedimageright>{{ :image.webp?150 }}</WRAP></code> |

<WRAP center round info>
Optionally, the WRAP could be used, but only if any text comes **before** the image. Text **after** the image is blocked by Dokuwiki unless it is in ''code'' format. See below:

<WRAP group>
<WRAP third column>
**Left Aligned with Border:**
<WRAP borderedimageleft>{{:ui:ui-icon_logo-uitlm.webp?150 }}</WRAP>
<WRAP clear>**Syntax:**</WRAP>
<code><WRAP borderedimageleft>{{:image.webp?150 }}</WRAP></code>
</WRAP>

<WRAP third column>
**Center Aligned with Border:**
<WRAP borderedimagecenter>{{ :ui:ui-icon_logo-uitlm.webp?150 }}</WRAP>
<WRAP clear>**Syntax:**</WRAP>
<code><WRAP borderedimagecenter>{{ :image.webp?150 }}</WRAP></code>
</WRAP>

<WRAP third column>
**Right Aligned with Border:**
<WRAP borderedimageright>{{ :ui:ui-icon_logo-uitlm.webp?150}}</WRAP>
<WRAP clear>**Syntax:**</WRAP>
<code><WRAP borderedimageright>{{ :image.webp?150}}</WRAP></code>
</WRAP>
</WRAP>
</WRAP>

==== Buttons: Download ====
Due to containing transparency (alpha) content and the PHP server GD rendering library available in uiTLM's shared hosting with Hostinger, use this format to display the button without the %%%%..%%%% signs.
  * %%<WRAP style="width:200px;">[[this>lib/exe/fetch.php?media=downloads:filename.zip&do=get|{{:downloads:button-download-big-green.webp?nolink}}]]</WRAP>%%

===== 4. Lists =====
==== Ordered (Alpha-Numeric Hierarchy) ====
Our CSS is configured for a specific nested order:
  - Level 1: Upper Alpha (A, B, C)
    - Level 2: Upper Roman (I, II, III)
      - Level 3: Decimal (1, 2, 3)

==== Unordered (bullets) ====
  * Level 1 (2 spaces then asterisk the space then type)
    * Level 2 (4 spaces then asterisk the space then type)
      * Level 3 (6 spaces then asterisk the space then type)

===== 5. Code & Technical Snippets =====
For Tasker variables or Total Launcher scripts, use the code tag to prevent DokuWiki from formatting the characters:
  * Inline: ''%VARIABLE''
  * Block: 
<code bash>
[Your Total Launcher Script or JSON Here]
</code>

===== 6. At the End of Every Page Except a TOC =====
<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>