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>

Card Container Structure

<div class="kn-card bg-card text-default shadow-md rounded-lg w-full p-4 sm:p-4" data-testid="asterisk-card">
  <div class="w-full">
    <div class="kn-list-view-column flex w-full flex-wrap gap-4 sm:flex-nowrap">
      <div class="kn-details-view-column w-full min-w-0 sm:flex-1">
        <!-- Card content -->
      </div>
    </div>
  </div>
</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;
}

Card Container Styling

.kn-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

Individual Card Items

.kn-list-view-column {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.kn-list-view-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

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 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;
  }
}

Mobile Cards

@media (max-width: 768px) {
  .kn-card {
    margin: 1rem;
    padding: 1rem;
  }
  
  .kn-list-view-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.12);
  }
}

Examples - Using 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-view {
  border: 2px solid #2196f3;
}

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

/* Target cards in a specific view */
#view_3 .kn-list-view-column {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

/* Target all cards on a specific page */
#scene_123 .kn-card {
  background-color: #fff;
}

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.

🚧
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 once this goes live:

**[https://appcdn.cloud-database.co/<your_application_id>/custom/v4/main.css **