Next-Gen Apps: Quick Start + CSS Reference

🚧

COMING SOON! We're putting the finishing touches on this feature.

Key Features of Next-Gen CSS

Semantic HTML: Uses proper HTML5 elements like <main>, <nav>, <section>, and <header> for better 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.kn-page {
  background-color: #f8f9fa;
  max-width: 1200px;
  margin: 0 auto;
}

Key Concepts

Scene and View Classes: Knack automatically adds classes like scene_123 and scene_123_view_456 to 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.

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