Style Guide

Table of Contents

• Banner Image

• Knack Naming Conventions (Pages/Views, Fields, and Objects)

• Colors

• Icons

• Layout

• Button Styles

• Links

Banner Image

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

• HTML: #163f63 - Background Color (make sure Knack Header color is the same)

• RGB: #163f63 - Background Color

• 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	#ff9b9c		Inactive/No	------------	------------
#80d07e	#80d07e		Active/Yes	------------	------------
#f6fa6b	#f6fa6b		Yellow	------------	------------
#0028ff	#0028ff		Blue	------------	------------

Signs & Markings Data Tracker Colors & Icons

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

Arterial Management Data Tracker Colors & Icons

Link	HEX Code	Swatch	Name	HTML Code	Font Awesome Icons
#777777	#777777		Unassigned	<i class="fa fa-asterisk"></i>
#777777	#777777		In Progress	<i class="fa fa-wrench"></i>
#777777	#777777		Assigned	<i class="fa fa-bullhorn"></i>
#777777	#777777		Submit	<i class="fa fa-flag-checkered"></i>
#777777	#777777		Closed	<i class="fa fa-checked-circle"></i>
#777777	#777777		Cancelled	------------	------------

Service Request Colors

Link	HEX Code	Swatch	Name	HMTL Code	Font Awesome Icons
#cd7070	#cd7070		New	------------	------------
#5c68ff	#5c68ff		In Progress	------------	------------
#67b36a	#67b36a		Repairs Completed	------------	------------
------------	------------	------------	Close (Resolved)	------------	------------
------------	------------	------------	Close (Duplicate)	------------	------------

Finance and Purchasing Colors & Icons

Link	HEX Code	Swatch	Name	HTML Code	Font Awesome Icons
#ff9b9c	#ff9b9c		Not Submitted	------------	------------
#377eb8	#377eb8		Waiting for Approval	------------	------------
#ff9b9c	#ff9b9c		Returned	------------	------------
#6a6565	#6a6565		Rejected	------------	------------
#41ae76	#41ae76		Budget Review	<i class="fa fa-money"></i>
#41ae76	#41ae76		Purchase Review	<i class="fa fa-clipboard"></i>
#41ae76	#41ae76		Processing| Purchasing	<i class="fa fa-cogs"></i>
#41ae76	#41ae76		Processing| Accounts Payable	<i class="fa fa-credit-card"></i>
#f5901f	#f5901f		Pending Invoice	<i class="fa fa-clock-o"></i>
#6a6565	#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

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

HTML Buttons

CSS Code - screen shot

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

  • #80d07e

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

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

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>

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>