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.

BetterForms 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

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

Where to Configure Styling in the IDE

Site-Level Styling (Global)

Open App Settings in the BetterForms IDE
Navigate to Environment section
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)

Open any page in the BetterForms IDE
Navigate to Page Builder tab
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

Go to App Settings → Environment → CSS
Add your custom CSS styles
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

Navigate to App Settings → Environment → Theme Settings
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

Go to App Settings → Environment → Slots
Select Header slot
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:

Go to App Settings → Environment → DOM Header Insertions
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/[email protected]/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:

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

Issue: Responsive Layout Breaking

Solution:

Test with different screen sizes
Use proper Bootstrap grid classes
Avoid fixed widths
Test on real devices

Issue: Styling Conflicts

Solution:

Use more specific CSS selectors
Check for conflicting Bootstrap classes
Use !important sparingly
Organize CSS logically

Next Steps

Now that you understand basic styling, you can:

Explore advanced customization - Custom components and themes
Learn about authentication - See Users & Authentication
Optimize performance - See Advanced Configuration

Resources

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

Previous4.3 Displaying Data in Tables (Page Builder & Element Config)Next5. Mastering the BetterForms Environment & Advancing Your Skills

Last updated 4 days ago