What is the Knack Standard theme?

The Knack Standard theme is our latest design theme which focuses on responsive and mobile performance for the Live App. This theme includes a CSS system where classes and styles are easy to adapt and customize.

This article addresses:

• Live App page components that have visible updates over the Classic and Flat themes
• Areas to consider if your app has current CSS customization and you'd like to update it to the Knack Standard theme
• New CSS modifier styles available

Where do I access the Knack Standard theme?

The theme is set under the Live App Design area of the Knack Builder. Instructions on this set up are further outlined below.

Head over to the gear icon for your app, and choose “Live App Design.”

On that page, choose “Knack Standard” theme under the Theme option.

Please see the main Live App Design help article: “Page Menu Style” and “Page Width” sections for details on set up options for this theme.

Using the theme with existing custom CSS or JavaScript

The Knack Standard theme has significant changes to markup from the Classic and Flat themes. This means that your custom CSS selectors may need to be updated. We are able to assist in updating custom JS or CSS to accommodate the Knack Standard theme - this does not mean we'll update your code for you, but we can give pointers on what to update to get your code working again.

We strongly encourage first testing out this Knack Standard theme on a copy of your app before using on your live, production app.

Live App updates

Mobile Menu

The mobile menu has been updated to facilitate a more mobile-native feel.

Page Widths

All views (tables, reports, etc.) are constrained by the page width. This allows these elements easier to scale on devices of all sizes. This is a behavioral change for some apps that have large elements (like tables) for users viewing your app on large monitors.

Two options are currently provided:

• I want my pages to be full-width, even on really wide monitors
  Scrollbar is at bottom of records displayed. This works well where the record count is small per page and fits within the window height, or where your users will be viewing with a touch screen.
• I want my pages to have a max-width, so they don’t stretch too wide (default)
  This new display allows for tables to be constrained to the monitor size and creates both vertical and horizontal scroll bars when the table is wider than the page, along with 'sticky' table headers as you scroll. This option displays multiple tables on a page cleanly and allows for many records to be displayed, but not take up too much of the page.

Form Input Sizing

Form input fields now match column width.

Popup Modals

This applies to pages where the Setting option “Display page in a modal popup” is enabled.

Popup modals updates with the Knack Standard theme:

• If the modal is longer than the screen height, the header of the modal will stay put and the content will scroll below it.
• Modals now better fit within screen sizes on different devices.

Add to Home Screen

iOS and Android users on their mobile browser can choose to add a Knack app to their home screen, it will now open and behave more like a native app (will remove the browser/url bars, etc.).

Plans are also underway for users to be able to customize the app icon.

CSS Selector updates

The Knack Standard theme has significant changes to markup. This means that custom CSS selectors may need to be updated. You may find that very specific markups, no longer correctly target the element you'd like. We suggest, where possible, making your selectors a little less specific.

New CSS Styles

Along with updated markup, the Knack Standard theme has a completely new class and style framework that is more consistent and easier to use to add customization to your live apps.

We’re listing a few of these classes below and will be adding further documentation to our developer docs.

Viewport breakpoints

Our updated CSS has several viewport breakpoint classes which can be used on any element inside your Live App. Our breakpoint classes are determined based on the viewport (or window) width, and are defined as follows:

• mobile: less than 769px wide
• tablet: 769px or wider
• desktop: 980px or wider
• widescreen: 1180px or wider

Modifier classes

There are several new CSS styles available in the Knack Standard theme:

Specific known updates

• Any references to .kn-scene .kn-crumbtrail should be update to .kn-info-bar .kn-crumbtrail