Home
Developer Documentation
Start typing to search…

Next-Gen Apps: CSS Implementation Guide

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:

  1. Right-click on any element and select "Inspect"
  2. In the Elements panel, you can see the HTML structure and applied classes
  3. In the Styles panel, you can see which CSS rules are applied and their specificity
  4. Look for crossed-out styles - these indicate rules that are being overridden
  5. Use the "Computed" tab to see the final calculated values
  6. 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 **

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.