What is the Knack Beta theme?
The Knack Beta theme is a new design theme which focuses on responsive and mobile performance. This theme includes a new CSS system where classes and styles are easy to adapt and customize.
The theme is set under the Layout & Colors area of the Knack Builder. Instructions on this set up are further outlined below.
This article addresses:
- Live App page components that have visible updates
- Areas to consider if your app has current CSS customization and you'd like to update it to the new them
- New CSS modifier styles available
What does Beta mean?
We're testing out a new theme! 🎉
Beta = The theme has passed through the internal testing, as well as several rounds of testing with our Knackstars users. But we're still tweaking things here and there, so expect some updates when using this theme, which may only surface when being used in everyday conditions of Knack apps.
How to use the new theme
Head over to the gear icon for your app, and choose “Layout & Colors.”
On that page, choose “Knack beta” under the Design Theme option.
You’ll be shown some information about the new theme:
Please see the main Layout & Colors help article: “Page Menu Style” and “Page Width” sections for details on set up options for this new theme.
The new theme has significant changes to markup. This means that your custom CSS selectors may need to be updated. Unfortunately we will not be able to assist in updating custom JS or CSS to accommodate the new theme.
We strongly encourage first testing out this new 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 (default)
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
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. 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.
The power of Knack allows for many use cases; we’d love to hear how these options work for you!
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 beta 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 new 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 new markup, the new 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 new 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 beta 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|