# Style Guide

## Table of Contents

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

## Banner Image

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-ME94yKihdBdIQjY_AgI%2F-ME9p8vcMd9xcw6NSsR8%2Fbanner_800x160_COA_TEMPLATE.png?alt=media\&token=f860d3d4-fe31-4d8d-8d05-ccbf9c6a4824)

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](https://placehold.it/15/163f63/000000?text=+) `#163f63` - Background Color (make sure Knack Header color is the same)
* RGB: ![#22, 63, 110](https://placehold.it/15/163f63/000000?text=+) `#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

| Link                                         | HEX Code  | Swatch                                                                                                                                                                                                                     | Name        | HTML Code    | Font Awesome Icons |
| -------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------ | ------------------ |
| [#ff9b9c](https://www.colorhexa.com/ff9b9c)  | `#ff9b9c` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMIxyg2HYfZtUWqNpO%2F-MYMgSYGFKidjR1JSuSv%2Fimage.png?alt=media\&token=beb88bf5-cd9d-47b1-a8d6-1746c70e7185) | Inactive/No | ------------ | ------------       |
| [#80d07e](https://www.colorhexa.com/80d07e)  | `#80d07e` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMIxyg2HYfZtUWqNpO%2F-MYMem5JRMegsG7oPEe2%2Fimage.png?alt=media\&token=367b320b-7cef-4024-8f59-9562eb367ede) | Active/Yes  | ------------ | ------------       |
|                                              |           |                                                                                                                                                                                                                            |             |              |                    |
| [#f6fa6b](https://www.colorhexa.com/f6fa6b)  | `#f6fa6b` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MqgdYMyMU2z7Bgs0H%2F-M_MsNn2X79-3tf3-BZ1%2Fimage.png?alt=media\&token=97f1b691-73ae-433d-9d6b-ba3a0289a876) | Yellow      | ------------ | ------------       |
| [#0028ff ](https://www.colorhexa.com/0028ff) | `#0028ff` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MqgdYMyMU2z7Bgs0H%2F-M_Msk80jDaiiW6pKzF-%2Fimage.png?alt=media\&token=ec6d3ebd-fb90-4a1f-9577-41f79f91a157) | Blue        | ------------ | ------------       |

### Signs & Markings Data Tracker Colors & Icons

| Link                                         | HEX Code  | Swatch                                                                                                                                                                                                                     | Name               | HTML Code                                    | Font Awesome Icons                                                                                                                                                                                                                                         |
| -------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [#E41A1C](https://www.colorhexa.com/e41a1c)  | `#E41A1C` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMi5cclFtIncDealQG%2Fimage.png?alt=media\&token=0eb3217b-b6d8-4538-a02a-0d52c3748f56) | Need To Be Issued  | `<i class="fa fa-exclamation-triangle"></i>` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYQ1-b8fQdyfiScLDPC%2F-MYQ2x-vB4L77fFRYcBh%2Fimage.png?alt=media\&token=aea2d5b8-29d0-4b34-8d3e-25e49744a037)                                 |
| [#367DB7](https://www.colorhexa.com/367DB7)  | `#367DB7` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMiZBEJlWlq0GNhQUy%2Fimage.png?alt=media\&token=9b1dbb3a-2a9d-4cff-83e9-cc383b8dc12b) | Issued             | `<i class="fa fa-truck"></i>`                | <p></p><p><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYQ1-b8fQdyfiScLDPC%2F-MYQ3HepYSVIKEdbgmu5%2Fimage.png?alt=media&#x26;token=15fd0128-3ed0-4f83-8f61-2878e10989d1" alt=""></p> |
| [#ADADAD](https://www.colorhexa.com/ADADAD)  | `#ADADAD` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMk4bQZYcXBA4oqv7a%2Fimage.png?alt=media\&token=d6d194e2-dbd6-496a-be13-5471252a74a6) | On Hold            | `<i class="fa fa-clock-o"></i>`              | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M6xPrsvNa5JIvMidQ%2Fimage.png?alt=media\&token=b7aca286-ad9b-426d-bc38-3490f334c39b)                                 |
| [#974DA2](https://www.colorhexa.com/974DA2)  | `#974DA2` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMjgfn9bUYx_ajFw54%2Fimage.png?alt=media\&token=dd4a224c-d858-459d-bb5b-ca7f05582172) | Needs GIS          | `<i class="fa fa-map-marker"></i>`           | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M22JGan7F_jMzCEFb%2Fimage.png?alt=media\&token=4e856424-3006-4f3b-b3a9-ccb190114068)                                 |
| [#4CAE4](https://www.colorhexa.com/4CAE49)   | `4CAE49`  | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMjrzhI8AvlK8azoaS%2Fimage.png?alt=media\&token=833b051b-ef3b-4383-9f9c-36dbd357eae1) | Final Review       | `<i class="fa fa-flag-checkered"></i>`       | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M5ZK2VpHn00asrVl8%2Fimage.png?alt=media\&token=cdc402a2-d0fb-4164-8c04-31ccfabae2fb)                                 |
| [#777777](https://www.colorhexa.com/777777)  | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Closed             | `<i class="fa fa-checked-circle"></i>`       | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M79xKD2Ttk47tCYS7%2Fimage.png?alt=media\&token=c1c28671-51a1-4f46-b6b7-b887c71f469b)                                 |
| [#777777](https://www.colorhexa.com/777777)  | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Cancelled          | `<i class="fa fa-times"></i>`                | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MchF2RelZQCtOUFv_%2F-M_Mf2EA-V28itU8p5rk%2Fimage.png?alt=media\&token=4ba18d1b-be24-49d4-91b5-41dea8704bbb)                                 |

### Arterial Management Data Tracker Colors & Icons

| Link                                        | HEX Code  | Swatch                                                                                                                                                                                                                     | Name        | HTML Code                              | Font Awesome Icons                                                                                                                                                                                                                                                |
| ------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Unassigned  | `<i class="fa fa-asterisk"></i>`       | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M8sCy2e1YOttoAv0z%2Fimage.png?alt=media\&token=d6392839-24a8-498e-86a4-873da43c0cca)                                        |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | In Progress | `<i class="fa fa-wrench"></i>`         | <p></p><p><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M9fOg1Zyu9SarB90y%2Fimage.png?alt=media&#x26;token=8c5fd8b9-1ab2-4c89-a043-ad1ff3249ddc" alt=""></p>        |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Assigned    | `<i class="fa fa-bullhorn"></i>`       | <p></p><p><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M8NRsdjjJ1GI5C8MK%2Fimage.png?alt=media&#x26;token=014c8778-5c92-455e-b164-866be208a203" alt=""></p>        |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Submit      | `<i class="fa fa-flag-checkered"></i>` | <p></p><p><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M5ZK2VpHn00asrVl8%2Fimage.png?alt=media&#x26;token=cdc402a2-d0fb-4164-8c04-31ccfabae2fb" alt=""></p>        |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Closed      | `<i class="fa fa-checked-circle"></i>` | <p></p><p><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M79xKD2Ttk47tCYS7%2Fimage.png?alt=media&#x26;token=c1c28671-51a1-4f46-b6b7-b887c71f469b" alt=""></p><p></p> |
| [#777777](https://www.colorhexa.com/777777) | `#777777` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MYMhpX9R_rzFVEZNFGL%2F-MYMkFhOfeizZwNJDCID%2Fimage.png?alt=media\&token=aa08179e-5660-46a7-9db0-06df44f545ba) | Cancelled   | ------------                           | ------------                                                                                                                                                                                                                                                      |

### Service Request Colors

| Link                                         | HEX Code     | Swatch                                                                                                                                                                                                                     | Name              | HMTL Code    | Font Awesome Icons |
| -------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------ | ------------------ |
| [#cd7070](https://www.colorhexa.com/cd7070)  | `#cd7070`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M-6EqHKIG7xqkEu2o%2Fimage.png?alt=media\&token=43737341-ce96-42ef-8cd9-b2b82448213a) | New               | ------------ | ------------       |
| [#5c68ff](https://www.colorhexa.com/5c68ff)  | `#5c68ff`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M-QKBKSKnBze-kuWu%2Fimage.png?alt=media\&token=167bdd3f-787d-4e14-a2eb-f230008d9119) | In Progress       | ------------ | ------------       |
| [#67b36a](https://www.colorhexa.com/67b36a)  | `#67b36a`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M-_sC3CKHF7N3o4_K%2Fimage.png?alt=media\&token=f9d2b3e7-0a7b-48ea-8e25-63cbd04eecd6) | Repairs Completed | ------------ | ------------       |
| ------------                                 | ------------ | ------------                                                                                                                                                                                                               | Close (Resolved)  | ------------ | ------------       |
| ------------                                 | ------------ | ------------                                                                                                                                                                                                               | Close (Duplicate) | ------------ | ------------       |

### Finance and Purchasing Colors & Icons

| Link                                          | HEX Code     | Swatch                                                                                                                                                                                                                     | Name                          | HTML Code                           | Font Awesome Icons                                                                                                                                                                                                                                         |
| --------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [#ff9b9c ](https://www.colorhexa.com/ff9b9c)  | `#ff9b9c`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MnV7tI9NmyOM8gSZd%2Fimage.png?alt=media\&token=2e466640-4c92-4169-9419-2f0cc2648d29) | Not Submitted                 | ------------                        | ------------                                                                                                                                                                                                                                               |
| [#377eb8](https://www.colorhexa.com/377eb8)   | `#377eb8`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MnKYnPsdSHqXxXZPe%2Fimage.png?alt=media\&token=84ebc13e-1993-4fcc-b8e4-3870e29659d6) | Waiting for Approval          | ------------                        | ------------                                                                                                                                                                                                                                               |
| [#ff9b9c ](https://www.colorhexa.com/ff9b9c)  | `#ff9b9c`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MnDxpqKyNQex9s709%2Fimage.png?alt=media\&token=de5e667a-a5e9-4cf6-b3d5-d38a497bc23b) | Returned                      | ------------                        | ------------                                                                                                                                                                                                                                               |
| [#6a6565](https://www.colorhexa.com/6a6565)   | `#6a6565`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_Mn-clIsLujgVwM-se%2Fimage.png?alt=media\&token=91b82a39-7a61-44ca-b132-5ab36a1ad98b) | Rejected                      | ------------                        | ------------                                                                                                                                                                                                                                               |
| [#41ae76](https://www.colorhexa.com/41ae76)   | `#41ae76`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MncqxDzObfo86BgVL%2Fimage.png?alt=media\&token=7cbafa5b-827c-4052-b440-276450df4712) | Budget Review                 | `<i class="fa fa-money"></i>`       | <p></p><p><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_MCTUlH68ux_RIfzVw%2Fimage.png?alt=media&#x26;token=5a17be0b-d451-4e0f-95cc-0506c711bdd4" alt=""></p> |
| [#41ae76](https://www.colorhexa.com/41ae76)   | `#41ae76`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MoPcpOeDl4VcZLLUP%2Fimage.png?alt=media\&token=de82c74e-a567-4d79-8276-58c9b70e7ecb) | Purchase Review               | `<i class="fa fa-clipboard"></i>`   | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_MCNJAdpHUjoI6mVBT%2Fimage.png?alt=media\&token=ee6d56e3-877c-4e0b-874d-119ba491d90c)                                 |
| [#41ae76](https://www.colorhexa.com/41ae76)   | `#41ae76`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_Mo-IDk4I9IVAG0b8_%2Fimage.png?alt=media\&token=d3fdcb54-f870-4b39-b965-4d994e59c728) | Processing\| Purchasing       | `<i class="fa fa-cogs"></i>`        | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_Mpucmh1MQdnKdeVV2%2Fimage.png?alt=media\&token=130d2555-f72c-46a8-b62e-a3b7f2d29ee9)                                 |
| [#41ae76](https://www.colorhexa.com/41ae76)   | `#41ae76`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MnrQ727yTUWZdvylm%2Fimage.png?alt=media\&token=2be38f96-d7b6-4cf0-90b3-5de3c142d2ed) | Processing\| Accounts Payable | `<i class="fa fa-credit-card"></i>` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_MCdlcaep7NfnFKjeM%2Fimage.png?alt=media\&token=acf71828-2b5c-4285-81ea-54a7b1df416a)                                 |
| [#f5901f](https://www.colorhexa.com/f5901f)   | `#f5901f`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MnmKUiZ4YASSakcTw%2Fimage.png?alt=media\&token=fd942d94-d2be-4e0c-bef6-588796e031f7) | Pending Invoice               | `<i class="fa fa-clock-o"></i>`     | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M6xPrsvNa5JIvMidQ%2Fimage.png?alt=media\&token=b7aca286-ad9b-426d-bc38-3490f334c39b)                                 |
| [#6a6565](https://www.colorhexa.com/6a6565)   | `#6a6565`    | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_Mp5FKNr-GzfSOkP6V%2Fimage.png?alt=media\&token=84089606-f229-429f-802c-2b6174104452) | Cancelled                     | ------------                        | ------------                                                                                                                                                                                                                                               |
| ------------                                  | ------------ | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_MggaNXmjJeeWWAXKZ%2F-M_MpAz5mv7lvHgWbq2L%2Fimage.png?alt=media\&token=e27f069f-8eee-4649-a092-cfe2a2c4b3b6) | Closed                        | ------------                        | `#ADADAD` ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M_LzIqehO8GhwGuKdYO%2F-M_M79xKD2Ttk47tCYS7%2Fimage.png?alt=media\&token=c1c28671-51a1-4f46-b6b7-b887c71f469b)                       |

## 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](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M942Ykw3EIdfcbnuztn%2F-M945bEW8a6Q8e2AUMM1%2Fimage.png?alt=media\&token=8d31e271-ef22-45f1-86a8-29e5be6537b5)

#### 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`

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M942Ykw3EIdfcbnuztn%2F-M944nbQ24DG9ipoSsmX%2Fimage.png?alt=media\&token=a5227fc4-369d-44fa-ad27-3de7722ec3b5)

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

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M942Ykw3EIdfcbnuztn%2F-M944vE8R8Tpc276kbVS%2Fimage.png?alt=media\&token=cbdf99d2-017a-44e6-90d1-7fbaaee94a12)

## 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;

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M948fcejVin9W-SFJpK%2F-M94IQx-_MnXarZu7YRw%2Fimage.png?alt=media\&token=57b09eb0-8495-4d8a-88b6-43761fa53429)

**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>`

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M948fcejVin9W-SFJpK%2F-M94JuFcdjp_YUeYbnj9%2Fimage.png?alt=media\&token=b0686349-491d-4363-b702-6d2b200f550d)

**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>`

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-M94K5eNrrjPX6-bPExB%2F-M94SNh0o0qm5y_nMEFX%2Fimage.png?alt=media\&token=7499846d-9f5e-47c7-b557-dfeb8456fa9e)
