Next-Gen Apps: Quick Start + CSS Reference

Toggle to Enable or Disable Custom CSS

You can control whether your app’s custom CSS files are loaded using a simple toggle in Settings: API & Code: CSS

How it works

• Off by default for all new apps
• When disabled, custom CSS will not load in the Live App
• Great for troubleshooting - you can quickly check if an issue is caused by your custom code or the platform
• To edit code, the toggle must be enabled

To use:

• Go to App Settings: API & Code in the Builder
• Go to CSS
• Turn the toggle on to enable custom code or off to disable it

📝

The toggle must be enabled to edit CSS

Switching Between Light and Dark Mode in the Code Editor

The Code Editor includes an option to switch between light and dark themes.

Why use dark mode?

• Reduces eye strain during long work sessions.
• Improves readability in low-light environments.

To switch themes:

• Open the Code Editor
• Locate the Theme selector in the editor toolbar
• Choose Light or Dark mode based on your preference

Key Features of Next-Gen CSS

Semantic HTML: Uses proper HTML5 elements like <main>, <nav>, <section>, and <header> for good structure and accessibility.

Consistent CSS Classes: All classes use the kn- prefix with descriptive, logical names that make targeting elements intuitive.

Better Maintainability: The structured approach makes it easier to maintain and update your customizations over time.

Your First Customization

Here's a simple example to get you started. Note that these examples use higher specificity patterns to ensure they override Knack's default styles:

/* Change the main navigation background */
.kn-page .kn-main-nav {
  background-color: #007bff;
}

/* Style all action buttons */
.kn-page .kn-action-button {
  background-color: #28a745;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
}

/* Customize a specific page */
#scene_123 {
  background-color: #f8f9fa;
  max-width: 1200px;
  margin: 0 auto;
}

Key Concepts

Scene and View Classes: Knack automatically adds IDs like #scene_123 #view_456to target specific pages and views.

Specificity Matters: Since Knack's CSS loads first, you need to use higher specificity selectors to override defaults. See the Implementation Guide for detailed override techniques.

Semantic Targeting: Use the semantic HTML structure to create more maintainable selectors.

Quick Tips

• Always use higher specificity patterns (like .kn-page .kn-action-button) for reliable overrides
• Use scene/view classes for specific customizations
• Test your changes across different screen sizes
• Use browser developer tools to inspect and debug
• Start with small changes and build up incrementally

CSS Classes Reference

Application Structure

Navigation Elements

Page Elements

Views and Content

Table Elements

Chart Elements

Map Elements

Interactive Elements

CSS Class Naming Convention

Understanding the naming convention helps you predict class names and write more maintainable CSS:

Prefix System

All Next-Gen classes use the kn- prefix to create a clear namespace and avoid conflicts.

Descriptive Names

Class names clearly describe the element's function:

• kn-page-title - The main page heading
• kn-form-view - Form containers
• kn-main-nav-item - Navigation menu items

Hierarchical Structure

Related elements use consistent naming patterns:

• kn-main-nav - The navigation container
• kn-main-nav-item - Individual navigation items
• kn-main-nav-toggle - Navigation toggle button

Semantic Clarity

Names correspond to the element's meaning rather than appearance, making styles more maintainable as designs evolve.

Note: The examples in this guide are illustrative. Actual class names, HTML structure, and element relationships may vary in your specific Knack application. Always use developer tools to inspect your actual application structure.

Quick Examples

Style All Forms

.kn-page .kn-form-view {
  background: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Customize Navigation

.kn-page .kn-main-nav {
  background-color: #2c3e50;
}

.kn-page .kn-main-nav-item {
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}

.kn-page .kn-main-nav-item:hover {
  background-color: #34495e;
}

Target a Specific Page

#scene_123.kn-page {
  background-color: #f8f9fa;
  max-width: 1000px;
  margin: 0 auto;
}

Style Action Buttons

.kn-page .kn-action-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.kn-page .kn-action-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

Style Different View Types

/* Style list views */
.kn-page .kn-list-view {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style detail views */
.kn-page .kn-details-view {
  padding: 2rem;
  background: #f8f9fa;
}

/* Style chart views */
.kn-page .kn-pie-chart-view {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

Desktop & Mobile Design Example

/* Desktop styles */
.kn-main-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kn-main-nav-toggle {
  display: none;
}

/* Mobile styles */
@media (max-width: 768px) {
  .kn-main-nav-container {
    display: none;
  }
  
  .kn-header-mobile .kn-main-nav-toggle {
    display: block;
    background: transparent;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 0.5rem;
    border-radius: 4px;
  }
  
  .kn-header-mobile .kn-main-nav-toggle:hover {
    background-color: #007bff;
    color: white;
  }
}

Next Steps

Ready to implement more advanced customizations? Check out the CSS Implementation Guide for:

• CSS override techniques and specificity strategies
• Detailed HTML structure explanations
• Advanced styling examples and techniques
• Troubleshooting common issues
• Best practices for maintainable code

Need Help?

• Browser Inspector: Use F12 to inspect elements and see which classes are applied
• CSS Specificity: If styles aren't applying, you may need higher specificity
• Testing: Always test across different devices and screen sizes

❗️

The Knack Support team is unable to test, troubleshoot, or write code for you

🚧

Custom code added in the code editor will be stored within Knack’s internal servers, and available via CDN, rather than directly in the app’s schema. Do not include sensitive keys or IDs in custom code.

If you require access to your code outside of the builder or live app, you’ll be able to access it through the CDN:

https://appcdn.cloud-database.co/\<your_application_id>/custom/v4/main.cs