Style Guide
Last updated
Last updated
Banner Image
Knack Naming Conventions (Pages/Views, Fields, and Objects)
Colors
Icons
Layout
Button Styles
Links
Use Gimp software 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
Banner Size: 800 x 160px
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
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'
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
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.
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
Link | HEX Code | Swatch | Name | HTML Code | Font Awesome Icons |
| Inactive/No | ------------ | ------------ | ||
| Active/Yes | ------------ | ------------ | ||
| Yellow | ------------ | ------------ | ||
| Blue | ------------ | ------------ |
Link | HEX Code | Swatch | Name | HTML Code | Font Awesome Icons |
| Need To Be Issued |
| |||
| Issued |
| |||
| On Hold |
| |||
| Needs GIS |
| |||
| Final Review |
| |||
| Closed |
| |||
| Cancelled |
|
Link | HEX Code | Swatch | Name | HTML Code | Font Awesome Icons |
| Unassigned |
| |||
| In Progress |
| |||
| Assigned |
| |||
| Submit |
| |||
| Closed |
| |||
| Cancelled | ------------ | ------------ |
Link | HEX Code | Swatch | Name | HMTL Code | Font Awesome Icons |
| New | ------------ | ------------ | ||
| In Progress | ------------ | ------------ | ||
| Repairs Completed | ------------ | ------------ | ||
------------ | ------------ | ------------ | Close (Resolved) | ------------ | ------------ |
------------ | ------------ | ------------ | Close (Duplicate) | ------------ | ------------ |
Link | HEX Code | Swatch | Name | HTML Code | Font Awesome Icons |
| Not Submitted | ------------ | ------------ | ||
| Waiting for Approval | ------------ | ------------ | ||
| Returned | ------------ | ------------ | ||
| Rejected | ------------ | ------------ | ||
| Budget Review |
| |||
| Purchase Review |
| |||
| Processing| Purchasing |
| |||
| Processing| Accounts Payable |
| |||
| Pending Invoice |
| |||
| Cancelled | ------------ | ------------ | ||
------------ | ------------ | Closed | ------------ |
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
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
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
.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
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
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
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
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
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>
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>
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>
HTML: #163f63 - Background Color (make sure Knack Header color is the same)
RGB: #163f63 - Background Color
#ADADAD
#80d07e
#367DB7
