Style Guide

PreviousFunctionality Guide NextSingle Sign On (SSO)

Last updated 4 years ago

Was this helpful?

Style Guide

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

Banner Image

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

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

Inactive/No

------------

#80d07e

Active/Yes

------------

#f6fa6b

Yellow

------------

#0028ff

Blue

------------

Signs & Markings Data Tracker Colors & Icons

Link

HEX Code

Swatch

Name

HTML Code

Font Awesome Icons

#E41A1C

Need To Be Issued

#367DB7

Issued

#ADADAD

On Hold

#974DA2

Needs GIS

4CAE49

Final Review

#777777

Closed

#777777

Cancelled

Arterial Management Data Tracker Colors & Icons

Link

HEX Code

Swatch

Name

HTML Code

Font Awesome Icons

#777777

Unassigned

#777777

In Progress

#777777

Assigned

#777777

Submit

#777777

Closed

#777777

Cancelled

------------

Service Request Colors

Link

HEX Code

Swatch

Name

HMTL Code

Font Awesome Icons

#cd7070

New

------------

#5c68ff

In Progress

------------

#67b36a

Repairs Completed

------------

Close (Resolved)

------------

Close (Duplicate)

------------

Finance and Purchasing Colors & Icons

Link

HEX Code

Swatch

Name

HTML Code

Font Awesome Icons

#ff9b9c

Not Submitted

------------

#377eb8

Waiting for Approval

------------

#ff9b9c

Returned

------------

#6a6565

Rejected

------------

#41ae76

Budget Review

#41ae76

Purchase Review

#41ae76

Processing| Purchasing

#41ae76

Processing| Accounts Payable

#f5901f

Pending Invoice

#6a6565

Cancelled

------------

Closed

------------

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

Out of the box "buttons"

Add Menu>Link to a new page
Add Menu>Link to a existing page
Choose icon for button

HTML Buttons

CSS Code:

.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

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

Enter into Link Text field:

<h2><button class="block> New Submission</button></h2>

Looks like this in the live app

Table of Contents

Banner Image