Basker Themes Overview

A theme determines how your Basker site looks, feels, and functions for end-users. Themes are the presentation layer that transforms your CMS content into a fully-rendered website.

What Themes Control

Themes are responsible for:

Visual presentation - Colors, typography, spacing, and overall design
Page structure - HTML markup, layouts, and responsive behavior
Content rendering - How pages, events, and other content types are displayed
Interactive elements - Navigation, forms, and JavaScript-powered features
SEO and metadata - Document structure, meta tags, and structured data

Theme Architecture

A Basker theme consists of several types of files that work together:

Layouts

Layouts are the foundation of your theme. They define the base HTML structure that wraps all pages, including the <head> and <body> elements. Every page renders through a layout.

layouts/
└── default.liquid    # Required base layout

Templates

Templates define how specific content types are rendered. Each content type (pages, events, venues, etc.) has a corresponding template that controls its presentation.

templates/
├── page.liquid       # Renders pages
├── event.liquid      # Renders events
├── venue.liquid      # Renders venues
└── ...

Blocks

Blocks are reusable content components that editors can add to pages. They provide flexible, modular content sections like hero banners, feature panels, and image galleries.

blocks/
├── hero.liquid
├── content.liquid
├── feature-panel.liquid
└── ...

Snippets and Components

Snippets are reusable Liquid partials for common UI elements. Components are similar but typically represent more complex, self-contained elements.

snippets/
├── header.liquid
├── footer.liquid
└── nav-item.liquid

components/
├── card.liquid
└── modal.liquid

Assets

Static files including stylesheets, JavaScript, images, and fonts.

assets/
├── css/
├── js/
├── images/
└── fonts/

Theme Settings

Themes can define configurable settings that allow site administrators to customize appearance and behavior without editing code.

Global Settings

Global settings are defined in settings_schema.json and apply across the entire theme. These might include brand colors, typography choices, or feature toggles.

{# Accessing global settings #}
<body style="background-color: {{ settings.colors.background }}">

Template Settings

Individual templates can define their own settings that appear as custom fields when editing content of that type.

{# Accessing template-specific settings #}
{% if page.theme.settings.show_sidebar %}
  {% render 'snippets/sidebar' %}
{% endif %}

How Themes Work

When a visitor requests a page:

Basker determines which template to use based on the content type
The template specifies which layout to use
Content blocks are rendered within the template
Snippets and components are included as needed
The final HTML is sent to the browser along with linked assets

Next Steps

Create a Theme Build your first Basker theme from scratch

Theme Architecture Deep dive into layouts, templates, and blocks