# Application Style Guide

## Table of Contents

* Banner Image
* Knack Naming Conventions (Pages/Views, Fields, and Objects)
* Colors
* Icons
* Layout
* Button Styles
* Links

## Banner Image

![](/files/-ME9p8vcMd9xcw6NSsR8)

Use [Gimp software ](https://www.gimp.org/)to create or update a Knack application banner

You can find the original banner assets and a template for creating a new application banner in the corresponding G drive folder: G:\ATD\ATD\_GIS\03\_RESOURCES\Seals\_Logos\ATD App Banner Assets

* You can use the .xcf GIMP template file or an .xcf GIMP file for an existing application and edit the text layer of the banner image
* HTML: `#163f63` - Background Color (make sure Knack Header color is the same)
* RGB:  `#163f63` - Background Color
* Banner Size: `800 x 160`px
* Font: `Standard or Roboto[Roboto Bold = 1st line, Roboto #1(not bolded) = 2nd line]`

  `Gimp may automatically bold the second line due to the text formatting of the first line so be sure to un-bold it`
* Font Color: White
* Font Size: 45px for first line (bold), 36px for second line
  * If text length exceeds banner size, adjust font size smaller until it fits appropriately
* Layout: City Logo left side, first line: Name of Application, second line: Austin Transportation Department
* Save as .xcf GIMP file in the logo folder for the application on the G Drive
* Export as .png file in the logo folder for the application on the G Drive

## Overall Knack Naming Conventions

* No Special Characters
* No Double Spaces
* Try not to exceed 63 characters for any name
* Use singular names over plural names, for example: 'Comment Table' instead of 'Comments Table'

### Page/View Naming Conventions

* Use a unique and descriptive name that no other page will use since the page URL is sourced from its page name
* Use `Title Case`
* Use action verbs where appropriate
* For example: Instead of an 'Add Attachment' page, use 'Add Attachment to TIA Review' instead

### Field Naming Conventions

* Do not begin a field with a number. For example: use 'Five Day Work Week' instead of '5 Day Work Week'
* Do not use generic names such as 'ID', instead use descriptive names like 'productID'
* Use `Title Case` for fields that will be exposed to end-users in the app
* The use of # or % symbols in field names is acceptable if exposed to end-users
* Use `camelCase` for fields that are only on the backend and not exposed to the user. For formulas and calculations for example use: 'countTasksCompleted' or 'sumOrangeDistrictTransactions'
* Use the (default) `lower_case_object_name` for connection fields, unless they are directly exposed to the user, in which case, use `Title Case`.
* Field names should not be renamed in a production application without following a change management process. This is critically important if the application has been integrated with external systems.

### Object Naming Conventions

* Use `snake_case`
* Order objects alphabetically in Knack
* Renaming objects should follow a change management process, however renaming objects will not break API integrations.
* In the ATD Forms app, prepend objects with the acronym for the program or division that owns them and the word `PROGRAM` or `DIVISION`, e.g. HR\_DIVISION\_awards\_and\_recognition\_nominations

## Colors

### Status Colors

<table><thead><tr><th>Link</th><th width="114.39996337890625">HEX Code</th><th>Swatch</th><th>Name</th><th>HTML Code</th><th>Font Awesome Icons</th></tr></thead><tbody><tr><td><a href="https://www.colorhexa.com/ff9b9c">#ff9b9c</a> </td><td><code>#ff9b9c</code></td><td><img src="/files/-MYMgSYGFKidjR1JSuSv" alt=""></td><td>Inactive/No</td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/80d07e">#80d07e</a> </td><td><code>#80d07e</code></td><td><img src="/files/-MYMem5JRMegsG7oPEe2" alt=""></td><td>Active/Yes</td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/f6fa6b">#f6fa6b</a></td><td><code>#f6fa6b</code></td><td><img src="/files/-M_MsNn2X79-3tf3-BZ1" alt=""></td><td>Yellow </td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/0028ff">#0028ff </a></td><td><code>#0028ff</code></td><td><img src="/files/-M_Msk80jDaiiW6pKzF-" alt=""></td><td>Blue</td><td>------------</td><td>------------</td></tr></tbody></table>

### Signs & Markings Data Tracker Colors & Icons

<table><thead><tr><th width="114.39996337890625">Link</th><th>HEX Code</th><th width="161.5999755859375">Swatch</th><th width="93.60009765625">Name</th><th>HTML Code</th><th>Font Awesome Icons</th></tr></thead><tbody><tr><td><a href="https://www.colorhexa.com/e41a1c">#E41A1C</a> </td><td><code>#E41A1C</code></td><td><img src="/files/-MYMi5cclFtIncDealQG" alt=""></td><td>Need To Be Issued </td><td><code>&#x3C;i class="fa fa-exclamation-triangle">&#x3C;/i></code></td><td><img src="/files/-MYQ2x-vB4L77fFRYcBh" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/367DB7">#367DB7</a></td><td><code>#367DB7</code></td><td><img src="/files/-MYMiZBEJlWlq0GNhQUy" alt=""></td><td>Issued </td><td><code>&#x3C;i class="fa fa-truck">&#x3C;/i></code></td><td><p></p><p><img src="/files/-MYQ3HepYSVIKEdbgmu5" alt=""></p></td></tr><tr><td><a href="https://www.colorhexa.com/ADADAD">#ADADAD</a> </td><td><code>#ADADAD</code></td><td><img src="/files/-MYMk4bQZYcXBA4oqv7a" alt=""></td><td>On Hold</td><td><code>&#x3C;i class="fa fa-clock-o">&#x3C;/i></code></td><td><img src="/files/-M_M6xPrsvNa5JIvMidQ" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/974DA2">#974DA2</a></td><td><code>#974DA2</code></td><td><img src="/files/-MYMjgfn9bUYx_ajFw54" alt=""></td><td>Needs GIS </td><td><code>&#x3C;i class="fa fa-map-marker">&#x3C;/i></code></td><td><img src="/files/-M_M22JGan7F_jMzCEFb" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/4CAE49">#4CAE4</a></td><td><code>#4CAE49</code></td><td><img src="/files/-MYMjrzhI8AvlK8azoaS" alt=""></td><td>Final Review</td><td><code>&#x3C;i class="fa fa-flag-checkered">&#x3C;/i></code></td><td><img src="/files/-M_M5ZK2VpHn00asrVl8" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/777777">#777777</a></td><td><code>#777777</code></td><td><img src="/files/-MYMkFhOfeizZwNJDCID" alt=""></td><td>Closed</td><td><code>&#x3C;i class="fa fa-checked-circle">&#x3C;/i></code></td><td><img src="/files/-M_M79xKD2Ttk47tCYS7" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/777777">#777777</a></td><td><code>#777777</code></td><td><img src="/files/-MYMkFhOfeizZwNJDCID" alt=""></td><td>Cancelled</td><td><code>&#x3C;i class="fa fa-times">&#x3C;/i></code></td><td><img src="/files/-M_Mf2EA-V28itU8p5rk" alt=""></td></tr></tbody></table>

### Arterial Management Data Tracker Colors & Icons

| Link                                        | HEX Code  | Swatch                           | Name                                                         | HTML Code                        | Font Awesome Icons               |
| ------------------------------------------- | --------- | -------------------------------- | ------------------------------------------------------------ | -------------------------------- | -------------------------------- |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](/files/-MYMkFhOfeizZwNJDCID) | Unassigned, In Progress, Assigned, Submit, Closed, Cancelled | `<i class="fa fa-asterisk"></i>` | ![](/files/-M_M8sCy2e1YOttoAv0z) |

### Service Request Colors

| Link                                        | HEX Code  | Swatch                           | Name              | HMTL Code    | Font Awesome Icons |
| ------------------------------------------- | --------- | -------------------------------- | ----------------- | ------------ | ------------------ |
| [#cd7070](https://www.colorhexa.com/cd7070) | `#cd7070` | ![](/files/-M_M-6EqHKIG7xqkEu2o) | New               | ------------ | ------------       |
| [#5c68ff](https://www.colorhexa.com/5c68ff) | `#5c68ff` | ![](/files/-M_M-QKBKSKnBze-kuWu) | In Progress       | ------------ | ------------       |
| [#67b36a](https://www.colorhexa.com/67b36a) | `#67b36a` | ![](/files/-M_M-_sC3CKHF7N3o4_K) | Repairs Completed | ------------ | ------------       |

### Finance and Purchasing Colors & Icons

<table><thead><tr><th>Link</th><th width="112.79998779296875">HEX Code</th><th>Swatch</th><th>Name</th><th>HTML Code</th><th>Font Awesome Icons</th></tr></thead><tbody><tr><td><a href="https://www.colorhexa.com/ff9b9c">#ff9b9c </a></td><td><code>#ff9b9c</code></td><td><img src="/files/-M_MnV7tI9NmyOM8gSZd" alt=""></td><td>Not Submitted</td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/377eb8">#377eb8</a></td><td><code>#377eb8</code></td><td><img src="/files/-M_MnKYnPsdSHqXxXZPe" alt=""></td><td>Waiting for Approval</td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/ff9b9c">#ff9b9c </a> </td><td><code>#ff9b9c</code></td><td><img src="/files/-M_MnDxpqKyNQex9s709" alt=""></td><td>Returned</td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/6a6565">#6a6565</a></td><td><code>#6a6565</code></td><td><img src="/files/-M_Mn-clIsLujgVwM-se" alt=""></td><td>Rejected</td><td>------------</td><td>------------</td></tr><tr><td><a href="https://www.colorhexa.com/41ae76">#41ae76</a></td><td><code>#41ae76</code></td><td><img src="/files/-M_MncqxDzObfo86BgVL" alt=""></td><td>Budget Review</td><td><code>&#x3C;i class="fa fa-money">&#x3C;/i></code></td><td><p></p><p><img src="/files/-M_MCTUlH68ux_RIfzVw" alt=""></p></td></tr><tr><td><a href="https://www.colorhexa.com/41ae76">#41ae76</a></td><td><code>#41ae76</code></td><td><img src="/files/-M_Mo-IDk4I9IVAG0b8_" alt=""></td><td>Processing| Purchasing</td><td><code>&#x3C;i class="fa fa-cogs">&#x3C;/i></code></td><td><img src="/files/-M_Mpucmh1MQdnKdeVV2" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/41ae76">#41ae76</a></td><td><code>#41ae76</code></td><td><img src="/files/-M_MnrQ727yTUWZdvylm" alt=""></td><td>Processing| Accounts Payable</td><td><code>&#x3C;i class="fa fa-credit-card">&#x3C;/i></code></td><td><img src="/files/-M_MCdlcaep7NfnFKjeM" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/f5901f">#f5901f</a></td><td><code>#f5901f</code></td><td><img src="/files/-M_MnmKUiZ4YASSakcTw" alt=""></td><td>Pending Invoice</td><td><code>&#x3C;i class="fa fa-clock-o">&#x3C;/i></code></td><td><img src="/files/-M_M6xPrsvNa5JIvMidQ" alt=""></td></tr><tr><td><a href="https://www.colorhexa.com/6a6565">#6a6565</a></td><td><code>#6a6565</code></td><td><img src="/files/-M_Mp5FKNr-GzfSOkP6V" alt=""></td><td>Cancelled</td><td>------------</td><td>------------</td></tr><tr><td>------------</td><td>------------</td><td><img src="/files/-M_MpAz5mv7lvHgWbq2L" alt=""></td><td>Closed</td><td>------------</td><td><code>#ADADAD</code> <img src="/files/-M_M79xKD2Ttk47tCYS7" alt=""></td></tr></tbody></table>

## Layout

### Form Layout

* Follow one column form layout (typically best responsive layout, optimized for tablet/phones)
* Use default settings for layout
* Add Attachments, Add Comments&#x20;
  * (Setup: `Display page in modal popup`)
    * If modal popup, can remove the title of the form as it is redundant

### Button Layout

* Depending on business process we do two things
* Add `menu`, add `new page` for form/button (cleaner look, not as efficient)
* Add `form directly onto page` (not as clean of a look, but usually highly efficient for user especially if they have to enter lots of information)
* More about BUTTON STYLES

## Button Styles

#### Out of the box "buttons"

* Add Menu>Link to a **new page**
* Add Menu>Link to a **existing page**
* Choose **icon** for button
  * Knack references[ Font Awesome 4.7.0](https://fontawesome.com/v4.7.0/icons/)

#### HTML Buttons

![CSS Code - screen shot](/files/-M945bEW8a6Q8e2AUMM1)

#### CSS Code:&#x20;

`.block { display: block; width: 20%; border: none; background-color: #4CAE49; color: white; padding: 5px 5px; font-size: 20px; cursor: pointer; text-align: center; }`

* `width` changes the width of the HTML Button
* `background` HTML color code&#x20;
  * ![#80d07e](https://placehold.it/15/80d07e/000000?text=+) `#80d07e`&#x20;
  * &#x20;![#367DB7](https://placehold.it/15/367DB7/000000?text=+) `#367DB7`
* `padding` is the top and bottom border of the HTML Button
  * first number: `5px` (top)
  * second number: `5px` (bottom)
* `font-size` can change font to different size

#### Trigger function and Details

* Used a trigger function from a Details page and replaced the Link Text with HTML
* In Trigger configuration page, html goes here into this field: `Link Text`

![](/files/-M944nbQ24DG9ipoSsmX)

Enter into `Link Text` field:

`<h2><button class="block><i class="fa fa-plus-circle"></i><strong> New Submission</strong></button></h2>`

Looks like this in the live app

![](/files/-M944vE8R8Tpc276kbVS)

## Links

### Out of the box "links"

**Option 1:** Add Menu>Link to a **URL**

**Option 2:** Add Rich Text

* * Add text for link
  * Click **link** icon on toolbar
  * Click **Insert link**
    * Enter **URL**
    * Enter **Text**
    * Select **Open link in new tab**

### Using field labels & instructions to add links

#### Example 1: Form Title or Instructions

**Option 1:** Link, Link Text and Icon

`<a href="https://atd.knack.com/parking#verify/"> Look up address <i class="fa fa-search"><i></a>`&#x20;

![](/files/-M94IQx-_MnXarZu7YRw)

**Option 2:** Form field label text, link that is an icon

Number of Resident Decals `<a href="https://atd.knack.com/parking#permit-costs/"></i class="fa fa-info-circle"></i></a>`

![](/files/-M94JuFcdjp_YUeYbnj9)

**Option 3:** Link and icon that opens in new tab

`<a href="https://purchweb.austintexas.gov/search/RTMATSSelect.cfm" target=_blank> Contract Agreement </i class="fa fa-external-link-square"></i></a>`

![](/files/-M94SNh0o0qm5y_nMEFX)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack/style-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.