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.
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
The mobile menu has been updated to facilitate a more mobile-native feel.
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.
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.
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
There are several new CSS styles available in the Knack Standard theme:
|.is-pulled-left||will float the element left|
|.is-pulled-right||will float the element right|
|.is-hidden-mobile||hides element if viewport width is smaller than 769px|
|.is-hidden-tablet||hides element if viewport is wider than 769px|
|.is-hidden-desktop||hides element if viewport is wider than 980px|
Specific known updates
- Any references to
.kn-scene .kn-crumbtrailshould be update to