> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack/style-guide.md). # Application Style Guide Style guide on colors and usage ## Table of Contents * Banner Image * Knack Naming Conventions (Pages/Views, Fields, and Objects) * Colors * Layout * Button Styles * Links ## Banner Image For how to create a new application banner visit the Apps Wiki page under Knack Settings section. [How to create a new banner](broken://spaces/HbrSOUumoiMv4QwIpjp5/pages/lHsnb1usJHQ8W53cFxAG) ## Knack Naming Conventions * No **Special Characters** or **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 TPW 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 All colors must follow [WCAG 2.1 Contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) ratios > ### Success Criterion (SC) > > The visual presentation of [text](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-text) and [images of text](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-image-of-text) has a [contrast ratio](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-contrast-ratio) of at least 4.5:1, except for the following: > > #### **Large Text** > > [Large-scale](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-large-scale) text and images of large-scale text have a contrast ratio of at least 3:1; > > #### **Incidental** > > Text or images of text that are part of an inactive [user interface component](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-user-interface-component), that are [pure decoration](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-pure-decoration), that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. > > #### **Logotypes** > > Text that is part of a logo or brand name has no contrast requirement. ### Example Colors This assumed `#363636` is the default color of font text used in web pages.

Background HEX	Foreground HEX	Name	HTML Code	Font Awesome Icons
`#ffabac`	`#363636`	Red	------------	------------
`#80d07e`	`#363636`	Green	------------	------------
`#f6fa6b`	`#363636`	Yellow	------------	------------
`#8397FF`	`#363636`	Blue	------------	------------

### Signs & Markings Data Tracker Colors & Icons

HEX Code	Name	HTML Code
`#E41A1C`	Need To Be Issued	`<i class="fa fa-exclamation-triangle"></i>`
`#367DB7`	Issued	`<i class="fa fa-truck"></i>`
`#ADADAD`	On Hold	`<i class="fa fa-clock-o"></i>`
`#974DA2`	Needs GIS	`<i class="fa fa-map-marker"></i>`
`#4CAE49`	Final Review	`<i class="fa fa-flag-checkered"></i>`
`#777777`	Closed	`<i class="fa fa-checked-circle"></i>`
`#777777`	Cancelled	`<i class="fa fa-times"></i>`

### Arterial Management Data Tracker Colors & Icons

Background HEX	Swatch	Name	HTML Code	Font Awesome Icons
`#777777`		Unassigned, In Progress, Assigned, Submit, Closed, Cancelled	`<i class="fa fa-asterisk"></i>`
`#FF9B9C`		Unscheduled	N/A	N/A

### Service Request Colors

Background HEX	Name	HTML Code	Font Awesome Icons
`#cd7070`	New	------------	------------
`#5c68ff`	In Progress	------------	------------
`#67b36a`	Repairs Completed	------------	------------

### Finance and Purchasing Colors & Icons

Background HEX	Name	HTML Code	Font Awesome Icons
`#ff9b9c`	Not Submitted	------------	------------
`#377eb8`	Waiting for Approval	------------	------------
`#ff9b9c`	Returned	------------	------------
`#6a6565`	Rejected	------------	------------
`#41ae76`	Budget Review	`<i class="fa fa-money"></i>`
`#41ae76`	Processing\| Purchasing	`<i class="fa fa-cogs"></i>`
`#41ae76`	Processing\| Accounts Payable	`<i class="fa fa-credit-card"></i>`
`#f5901f`	Pending Invoice	`<i class="fa fa-clock-o"></i>`
`#6a6565`	Cancelled	------------	------------
------------	Closed	------------	`#ADADAD`

## 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 * (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 ### Delete Buttons Color: `#EE0202`

#### 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: {% code overflow="wrap" lineNumbers="true" %} ```css .block { display: block; width: 20%; border: none; background-color: #4CAE49; color: white; padding: 5px 5px; font-size: 20px; cursor: pointer; text-align: center; } ``` {% endcode %} * `width` changes the width of the HTML Button * `background` HTML color code * `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: `

` 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 ` Look up address ` ![](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 ` Contract Agreement ` ![](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)

New Submission