4.4 Basic App Styling (Site Styling UI)

Styling is what transforms a functional BetterForms app into a polished, professional application. This section covers the fundamentals of styling your app using the Site Styling UI and Bootstrap CSS framework.

Klai Studio Styling Foundation

Built on Bootstrap CSS

BetterForms is built with Bootstrap 3.3.7 as the core UI framework, providing:

• Responsive grid system for layout
• Pre-built components (buttons, forms, tables)
• Utility classes for spacing, colors, and typography
• Mobile-first design principles

Two Main Styling Approaches

1. Bootstrap Classes - Use existing Bootstrap classes
2. Custom CSS - Add your own styles for unique designs

Where to Configure Styling in the IDE

Site-Level Styling (Global)

1. Open App Settings in the BetterForms IDE
2. Navigate to Environment section
3. Find styling-related tabs:
   • CSS - Custom CSS styles
   • Theme Settings - Built-in themes and layout options
   • Slots - Header, footer, and other page sections
   • DOM Header Insertions - External CSS libraries

Page-Level Styling (Individual Elements)

1. Open any page in the BetterForms IDE
2. Navigate to Page Builder tab
3. Use styleClasses property on individual elements

Basic Element Styling

Using Bootstrap Classes

Every element in BetterForms supports the styleClasses property:

{
  "type": "input",
  "label": "Customer Name",
  "model": "customerName",
  "styleClasses": "col-md-6 col-sm-12"
}

Common Bootstrap Layout Classes

Column Widths:

• col-md-12 - Full width (12 columns)
• col-md-6 - Half width (6 columns)
• col-md-4 - One-third width (4 columns)
• col-md-3 - One-quarter width (3 columns)

Responsive Breakpoints:

• col-xs-* - Extra small devices (phones)
• col-sm-* - Small devices (tablets)
• col-md-* - Medium devices (desktops)
• col-lg-* - Large devices (large desktops)

Button Styling Classes

{
  "type": "button",
  "text": "Save Record",
  "buttonClasses": "btn btn-success btn-lg",
  "styleClasses": "col-md-4 text-center"
}

Button Classes:

• btn-primary - Blue (default)
• btn-success - Green
• btn-danger - Red
• btn-warning - Yellow
• btn-info - Light blue
• btn-secondary - Gray

Button Sizes:

• btn-lg - Large
• btn-sm - Small
• btn-xs - Extra small

Site-Wide CSS Customization

Where to Add Custom CSS

1. Go to App Settings → Environment → CSS
2. Add your custom CSS styles
3. Save changes

Basic Custom CSS Example

/* Custom button style */
.btn-custom {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
}

.btn-custom:hover {
    background-color: #0056b3;
    color: white;
}

/* Custom input styling */
.form-control-custom {
    border: 2px solid #007bff;
    border-radius: 6px;
    padding: 12px;
}

/* Custom container spacing */
.section-spacing {
    margin-top: 30px;
    margin-bottom: 30px;
}

Using Custom CSS in Elements

{
  "type": "button",
  "text": "Custom Button",
  "buttonClasses": "btn btn-custom",
  "styleClasses": "col-md-4"
}

Page-Specific Styling

Adding Page-Level Classes

You can add classes to entire pages for targeted styling:

{
  "schema": {
    "styleClasses": "dashboard-page",
    "fields": [
      // Your page elements
    ]
  }
}

Page-Specific CSS

/* Styles that only apply to dashboard pages */
.dashboard-page .btn {
    border-radius: 12px;
}

.dashboard-page .form-control {
    border-color: #28a745;
}

.dashboard-page h1 {
    color: #007bff;
    font-weight: 300;
}

Theme Settings and Layout Options

Built-in Theme Options

1. Navigate to App Settings → Environment → Theme Settings
2. Select from available themes:
   • Default theme
   • Dark theme
   • Light theme
   • Custom color schemes

Layout Control Options

Navigation Options:

• Show/hide left sidebar navigation
• Navigation position (top or side)
• Navigation width

Header Options:

• Show/hide header
• Header height
• Header background color

Page Layout:

• Container width
• Page background
• Content padding

Advanced Styling with Slots

What are Slots?

Slots are predefined areas where you can inject custom HTML and CSS:

• Header slots - Top of the page
• Footer slots - Bottom of the page
• Navigation slots - Within the navigation menu

Adding Custom Header Content

1. Go to App Settings → Environment → Slots
2. Select Header slot
3. Add your HTML content:

<div class="custom-header">
    <img src="{{app.logoURL}}" alt="Company Logo" class="logo">
    <h1>{{app.companyName}}</h1>
    <div class="user-info">
        Welcome, {{app.user.firstName}}!
    </div>
</div>

Styling Slot Content

.custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.custom-header .logo {
    height: 40px;
    width: auto;
}

.custom-header h1 {
    margin: 0;
    font-size: 24px;
    color: #007bff;
}

.user-info {
    font-size: 14px;
    color: #6c757d;
}

External Libraries and Fonts

Adding External CSS Libraries

Use DOM Header Insertions to add external libraries:

1. Go to App Settings → Environment → DOM Header Insertions
2. Load First section for critical CSS:

<!-- Custom fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- Custom CSS framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Using Custom Fonts

/* Apply custom font to entire app */
body {
    font-family: 'Inter', sans-serif;
}

/* Apply to specific elements */
.page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
}

Responsive Design Considerations

Mobile-First Approach

{
  "type": "input",
  "label": "Customer Name",
  "model": "customerName",
  "styleClasses": "col-xs-12 col-sm-8 col-md-6 col-lg-4"
}

Responsive Utilities

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* Stack buttons on mobile */
@media (max-width: 768px) {
    .btn-group .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}

Common Styling Patterns

Card-Style Containers

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 24px;
    margin-bottom: 24px;
}

.card-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

Form Styling

.form-section {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-section h3 {
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 8px 12px;
}

Status Indicators

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.status-active {
    background-color: #d4edda;
    color: #155724;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

Integration with FileMaker Data

Dynamic Styling Based on Data

{
  "type": "html",
  "html": "<div class=\"status-badge status-{{model.record.status}}\">{{model.record.status}}</div>",
  "styleClasses": "col-md-2"
}

Conditional Styling

{
  "type": "button",
  "text": "Edit",
  "buttonClasses_calc": "model.user.canEdit ? 'btn btn-primary' : 'btn btn-secondary'",
  "styleClasses": "col-md-2"
}

Best Practices for App Styling

1. Consistent Design System

• Use a limited color palette
• Maintain consistent spacing
• Use the same fonts throughout
• Apply consistent button styles

2. Performance Optimization

• Minimize custom CSS
• Use external libraries judiciously
• Optimize images and assets
• Test loading times

3. Mobile-First Design

• Design for mobile first
• Use responsive breakpoints
• Test on various devices
• Consider touch interactions

4. Accessibility

• Ensure sufficient color contrast
• Use semantic HTML elements
• Provide alternative text for images
• Test with screen readers

Common Styling Issues and Solutions

Issue: Custom CSS Not Applying

Solution:

1. Check CSS syntax for errors
2. Ensure CSS is in the correct section (Site CSS)
3. Use browser developer tools to inspect elements
4. Check CSS specificity (be more specific)

Issue: Responsive Layout Breaking

Solution:

1. Test with different screen sizes
2. Use proper Bootstrap grid classes
3. Avoid fixed widths
4. Test on real devices

Issue: Styling Conflicts

Solution:

1. Use more specific CSS selectors
2. Check for conflicting Bootstrap classes
3. Use !important sparingly
4. Organize CSS logically

Next Steps

Now that you understand basic styling, you can:

• Explore advanced customization - Custom components and themes
• Learn about authentication - See Authentication
• Optimize performance - See Environment Deep Dive

Resources

• Bootstrap 3.3.7 Documentation
• CSS Grid Guide
• Responsive Design Basics

INFO

Testing Tip: Use your browser's developer tools to test CSS changes live before adding them to your site settings.