Styling

Chapter 7: Making your app look great with CSS and Bootstrap.

sparQ uses Bootstrap 5 for its UI framework, plus custom CSS variables for theming. Let's learn how to style your app consistently.

The Color System

sparQ uses CSS variables for consistent colors across the platform:

/* Primary colors */
var(--color-primary)         /* Main purple #7c3aed */
var(--color-primary-dark)    /* Hover state */
var(--color-primary-light)   /* Light backgrounds */

/* Grays */
var(--color-gray-900)        /* Dark text */
var(--color-gray-700)        /* Secondary text */
var(--color-gray-500)        /* Placeholders */
var(--color-gray-300)        /* Borders */
var(--color-gray-100)        /* Light backgrounds */

/* Semantic colors */
var(--color-success)         /* Green #10b981 */
var(--color-danger)          /* Red #ef4444 */
var(--color-warning)         /* Amber #f59e0b */
var(--color-info)            /* Blue #3b82f6 */

/* Your app's theme color */
var(--module-color)          /* Set in manifest */

Your App's Theme Color

Set your app's color in the manifest:

# __manifest__.py
{
    'name': 'Task Manager',
    'color': '#3B82F6',  # Blue theme
    # ...
}

This color appears in your app icon and can be used in your CSS as var(--module-color):

.task-header {
    border-left: 4px solid var(--module-color);
}
Image: Apps with different theme colors in the sidebar

Adding Custom CSS

Create a CSS file in your app's views folder:

myapp/ └── views/ └── assets/ └── css/ └── myapp.css

Start your CSS file by setting the module color:

/* myapp.css */
.myapp-app { --module-color: var(--color-primary); }

/* Your custom styles */
.task-card {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.task-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Using Bootstrap Classes

Bootstrap 5 is included globally. Use its utility classes for quick styling:

Spacing

<!-- Margin: m-{size}, mt, mb, ms, me, mx, my -->
<div class="mt-4 mb-2">Top margin 1.5rem, bottom 0.5rem</div>

<!-- Padding: p-{size}, pt, pb, ps, pe, px, py -->
<div class="p-3">Padding 1rem all sides</div>

Flexbox

<div class="d-flex justify-content-between align-items-center">
    <span>Left</span>
    <span>Right</span>
</div>

<div class="d-flex gap-2">
    <button>One</button>
    <button>Two</button>
</div>

Text

<p class="text-muted">Secondary text</p>
<p class="text-center">Centered text</p>
<p class="fw-bold">Bold text</p>
<p class="fs-5">Larger text</p>

Button Styles

sparQ uses Bootstrap buttons with some customizations:

<!-- Primary action -->
<button class="btn btn-primary">Save</button>

<!-- Secondary action -->
<button class="btn btn-outline-secondary">Cancel</button>

<!-- Danger action -->
<button class="btn btn-outline-danger">Delete</button>

<!-- Small button -->
<button class="btn btn-sm btn-outline-primary">Edit</button>

Badges

Use Bootstrap badges for status indicators:

<span class="badge bg-success">Complete</span>
<span class="badge bg-warning text-dark">Pending</span>
<span class="badge bg-danger">Overdue</span>
<span class="badge bg-secondary">Draft</span>

Cards

Cards are great for grouping related content:

<div class="card">
    <div class="card-header d-flex justify-content-between">
        <span>Tasks</span>
        <button class="btn btn-sm btn-primary">Add</button>
    </div>
    <div class="card-body">
        <!-- Content -->
    </div>
</div>

Responsive Design

Bootstrap's breakpoints:

/* Small devices (phones) */
@media (max-width: 576px) { }

/* Medium devices (tablets) */
@media (max-width: 768px) { }

/* Large devices (desktops) */
@media (max-width: 992px) { }

/* Extra large devices */
@media (max-width: 1200px) { }

Use responsive classes to show/hide elements:

<!-- Hidden on mobile, visible on desktop -->
<div class="d-none d-md-block">Desktop only</div>

<!-- Visible on mobile, hidden on desktop -->
<div class="d-md-none">Mobile only</div>

Key Takeaways