Skip to main content

Development considerations for Bootstrap v5 based Pelican starter theme

code
Key considerations for creating a Bootstrap v5 based starter theme for Pelican, exploring how to push the boundaries of what's possible with this static site generator.

Introduction

I've been exploring the idea of creating a Bootstrap v5 based Pelican theme. The aim is to develop a starter theme that harnesses the power of the latest version of Bootstrap. Ideally, such a theme can serve both simple blogs/smaller websites while still allowing for the generation of more complex websites when needed. Pelican is an excellent Static Site Generator, and we'll push its boundaries to achieve our aims.

This article outlines the key considerations that have gone into creating a Bootstrap v5 based Pelican starter theme.

Prerequisites

Before diving into the details, you should have:

  • Basic familiarity with Pelican as a static site generator
  • Understanding of how themes work in Pelican
  • Knowledge of Bootstrap v5 fundamentals
  • Experience with Jinja2 templating

Summarised list of considerations

A quick summary of matters we have taken into consideration when crafting the Bootstrap v5 based starter theme:

  • No requirement for a small footprint
  • YAML frontmatter implementation
  • Advanced templating capabilities
  • Sophisticated navigation systems
  • Utilising Bootstrap v5's native utilities
  • Layout enhancements for content-light pages
  • Touch device optimisations
  • Building upon existing Pelican theme foundations

In further detail

No requirement for a small footprint

Pelican, straight out of the box, is somewhat too limited for our purposes. For this reason, we'll happily attach a list of dependencies for this theme. Since Pelican is a Static Site Generator (SSG), we don't really have to worry about its resource utilisation: processing is handled by the developer's workstation, rather than the server a CMS would run on.

Note

While file size optimization is always good practice, our primary goal is functionality and developer experience. The static nature of the final output means we can prioritise features over minimal footprint.

YAML frontmatter implementation

YAML frontmatter feels more natural, is easier on the eye, and allows more complex data structures than plain old Markdown frontmatter. While setting YAML as the default, it introduces non-default behaviour that can be potentially non-compatible with other plugins.

---
title: "My article title"
date: 2025-03-09
category: code
tags: ["bootstrap", "pelican"]
custom_data:
  - item1: value1
  - item2: value2
---

This approach enables us to define nested data structures that would be cumbersome or impossible with standard Markdown metadata.

Advanced templating capabilities

One of our primary goals is to push the boundaries of what's possible with Pelican theme development. This includes:

  • Creating templates that can process complex data structures
  • Implementing conditional rendering based on metadata
  • Developing reusable components for consistent design patterns
  • Supporting custom content types beyond standard articles and pages

By leveraging Jinja2's full capabilities, we can create a theme that adapts to various content needs while maintaining design consistency.

Sophisticated navigation systems

Navigation is a critical component of any website. Our approach includes:

  • Dynamically generated navigation with support for multiple languages
  • Using the same HTML structure for both desktop and mobile menus
  • Building the theme with a universal off-canvas menu
  • Implementing scroll lock that prevents scrolling while mobile menu is active

Here's an example of how navigation might be configured in pelicanconf.py:

MAIN_MENU = [
    {
        "name": "Home",
        "url": "/",
        "translations": {
            "fr": "Accueil",
            "es": "Inicio"
        }
    },
    {
        "name": "Blog",
        "url": "/blog/",
        "translations": {
            "fr": "Blog",
            "es": "Blog"
        }
    },
    {
        "name": "Projects",
        "url": "/projects/",
        "translations": {
            "fr": "Projets",
            "es": "Proyectos"
        },
        "children": [
            {
                "name": "Web Development",
                "url": "/projects/web-dev/",
                "translations": {
                    "fr": "Développement Web",
                    "es": "Desarrollo Web"
                }
            }
        ]
    }
]

This structure allows for rich, multilingual navigation that can be easily extended.

Utilising Bootstrap v5's native utilities

Bootstrap v5 provides an extensive set of utilities that we can leverage for our theme:

  • Using Bootstrap's responsive grid system for adaptive layouts
  • Implementing dark mode support with Bootstrap's color utilities
  • Leveraging Bootstrap's animation and transition classes for UI enhancements
  • Creating custom components that extend Bootstrap's base styles

This approach allows us to maintain a consistent design language throughout the theme while keeping the flexibility that makes Bootstrap so powerful.

Layout enhancements for content-light pages

For pages with minimal content, we've implemented:

  • Sticky footer option for more elegant looking pages short on content
  • Flexible content areas using Bootstrap's flex-fill utilities
  • Minimum height constraints to prevent awkward short pages
  • Contextual background styling based on content type

These enhancements ensure that even pages with little content maintain a polished, professional appearance.

Touch device optimisations

Modern websites must work seamlessly across all devices. Our considerations include:

  • Deciding whether to animate elements for touch devices
  • Implementing mobile-friendly navigation with Bootstrap's offcanvas component
  • Ensuring proper viewport settings for responsive design
  • Optimising hover states for touch interactions

These optimisations help create a consistent user experience regardless of the device being used.

Building upon existing foundations

We're not completely reinventing the wheel. This theme draws inspiration from several excellent existing Pelican themes, including:

  • Simple
  • Flex
  • Brutalist
  • Pelican-Bootstrap3

By building on these foundations, we can focus on innovation while maintaining compatibility with the broader Pelican ecosystem.

Next steps

As development continues, we'll be focusing on:

  1. Creating a comprehensive documentation site
  2. Developing plug-and-play content components
  3. Expanding multilingual support capabilities
  4. Building a showcase of sites using the theme

We welcome contributions and feedback as we work to create a theme that pushes the boundaries of what's possible with Pelican.

Conclusion

Creating a Bootstrap v5 based starter theme for Pelican involves balancing flexibility, functionality, and usability. By addressing the considerations outlined in this article, we're working toward a theme that can serve as a solid foundation for a wide range of websites while remaining adaptable to specific needs.

Stay tuned for updates as development progresses, and feel free to contribute to the project on GitHub.