Next-Gen Apps: CSS Implementation Guide

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

HTML Structure Guide

Next-Gen Apps use semantic HTML5 elements that create clear document structure.

Document Structure

<body class="kn-app">
  <header class="kn-header">
    <nav class="kn-main-nav">
      <!-- Navigation items -->
    </nav>
  </header>
  
  <main class="kn-page">
    <h1 class="kn-page-title">Page Title</h1>
    <section class="kn-page-section">
      <!-- Page content -->
    </section>
  </main>
</body>

Navigation Structure

<nav class="kn-main-nav">
  <div class="kn-main-nav-container">
    <div class="kn-brand">App Name</div>
    <button class="kn-main-nav-item">Menu Item</button>
    <button class="kn-main-nav-profile-trigger">Profile</button>
  </div>
</nav>

Form Structure

<form class="kn-form-view">
  <div class="kn-form-view-column">
    <!-- Form fields -->
  </div>
  <button class="kn-action-button">Submit</button>
</form>

View Structure

<div class="kn-view scene_123_view_456">
  <div class="kn-view-header">View Title</div>
  <div class="kn-view-toolbar">
    <button class="kn-action-button">Action</button>
  </div>
  <!-- View content -->
</div>

Styling Examples Using Documented Classes

Navigation Styling

.kn-page .kn-main-nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.kn-main-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kn-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #007bff;
}

.kn-main-nav-item {
  background: none;
  border: none;
  color: #6c757d;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.kn-main-nav-item:hover {
  background: #007bff;
  color: white;
}

Form View Styling

.kn-page .kn-form-view {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 3rem;
  max-width: 600px;
  margin: 0 auto;
}

.kn-page .kn-form-view-column {
  margin-bottom: 2rem;
}

.kn-page .kn-form-view .kn-action-button {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kn-page .kn-form-view .kn-action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Table View Styling

.kn-table-view-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.kn-table-view {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.kn-table-view th {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #6c757d;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
}

.kn-table-view td {
  padding: 1rem;
  border-bottom: 1px solid #f1f3f4;
  transition: background-color 0.2s ease;
}

.kn-table-view tr:hover td {
  background-color: #f8f9fa;
}

Chart View Styling

.kn-page .kn-pie-chart-view {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 2rem;
  margin-bottom: 2rem;
}

.kn-page .kn-bar-chart-view {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
}

.kn-page .kn-chart-view-header {
  font-size: 1.25rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 1rem;
  text-align: center;
}

List and Detail Views

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

.kn-page .kn-list-view-column {
  padding: 1rem;
  border-bottom: 1px solid #f1f3f4;
}

.kn-page .kn-details-view {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.kn-page .kn-details-view-column {
  margin-bottom: 1rem;
}

Error and Page Elements

.kn-page .kn-error-banner {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.kn-page .kn-page-error {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
}

.kn-page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #495057;
  margin-bottom: 2rem;
}

.kn-breadcrumbs {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

Mobile-First Design

Mobile Navigation

/* Desktop navigation - default state */
.kn-main-nav-toggle {
  display: none;
}

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

.kn-header-mobile {
  display: none;
}

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

Mobile Form Layout

@media (max-width: 768px) {
  .kn-page .kn-form-view {
    margin: 1rem;
    padding: 2rem;
    border-radius: 8px;
  }
  
  .kn-page .kn-form-view .kn-action-button {
    width: 100%;
    padding: 1rem;
  }
}

Mobile Views and Tables

@media (max-width: 768px) {
  .kn-page {
    padding: 1rem;
  }
  
  .kn-page .kn-view {
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  .kn-page-title {
    font-size: 1.5rem;
    text-align: center;
  }
  
  .kn-table-view-wrapper {
    font-size: 0.875rem;
  }
  
  .kn-table-view th,
  .kn-table-view td {
    padding: 0.5rem;
  }
}

Solution: Use Scene and View Classes

/* Target a specific form view */
.scene_123_view_456.kn-form-view {
  background-color: #e3f2fd;
}

/* Target all views on a specific page */
.scene_123.kn-page .kn-view {
  border: 2px solid #2196f3;
}

/* Target specific chart types */
.scene_456.kn-page .kn-pie-chart-view {
  background-color: #fff3e0;
}

Need More Help?

Developer Tools and Debugging

Using Browser Inspector Effectively:

Right-click on any element and select "Inspect"
In the Elements panel, you can see the HTML structure and applied classes
In the Styles panel, you can see which CSS rules are applied and their specificity
Look for crossed-out styles - these indicate rules that are being overridden
Use the "Computed" tab to see the final calculated values
Test changes directly in the browser by editing CSS in the Styles panel

Common Debugging Techniques:

Add temporary background colors to see element boundaries: background: red;
Use outline: 2px solid red; instead of borders (doesn't affect layout)
Check the Console tab for any JavaScript errors that might affect styling
Use the Network tab to ensure your CSS file is loading correctly

Resources and Community

CSS Reference: Return to the Quick Start + Reference for complete class listings
Specificity Calculator: Use online tools to calculate CSS specificity
Color Contrast Checker: Verify accessibility at WebAIM Contrast Checker
Browser Compatibility: Check CSS feature support at Can I Use

Testing Best Practices

Cross-Browser Testing:

Test in Chrome, Firefox, Safari, and Edge
Check mobile browsers on actual devices when possible
Use browser developer tools to simulate different devices

Performance Testing:

Use browser dev tools Performance tab to check for layout thrashing
Minimize the use of complex selectors and animations
Test with slower network connections

Accessibility Testing:

Use keyboard navigation to test all interactive elements
Test with screen readers when possible
Verify color contrast ratios meet WCAG guidelines
Ensure focus indicators are visible and clear

Remember: Start with simple customizations, test frequently, and build up your styles incrementally. The semantic HTML structure and consistent class naming in Next-Gen Apps provide an excellent foundation for creating beautiful, maintainable customizations.

Future Capabilities

Current Status: Next-Gen Apps currently support CSS customization with the semantic HTML structure and CSS classes documented in this guide.

Planned Features: JavaScript customization capabilities are planned for future releases. When available, these will work seamlessly with the semantic HTML structure and CSS classes, ensuring your current customizations remain compatible.

Preparing for JavaScript: The semantic HTML structure and consistent class naming will provide excellent hooks for future JavaScript functionality, making your current CSS work future-proof. The kn- class system is designed to be stable and will continue to work when JavaScript capabilities are added.