Base Template and Theme Integration
SailPilot’s frontend utilizes a base template, base.html, which serves as the foundational layout for the web interface. This template integrates the Tabler theme, a popular open-source dashboard template built on top of Bootstrap.
Base Template Structure
DOCTYPE and Language: Specifies HTML5 doctype and language setting.
- Head Section:
Character set, viewport, and compatibility meta tags.
Dynamic title block with a default “SailPilot” suffix.
CSS files from the Tabler theme, ensuring consistent styling across the platform.
- Body Section:
An optional body_class block for custom body class definitions.
The main content area is wrapped in a page-wrapper div.
- Dynamic content blocks (navbar, content, footer, modals, scripts) to inject specific parts of the page:
navbar: Includes the navigation bar (header).
content: The main content area for each page.
footer: The footer of the site.
modals: For including modal dialogs.
scripts: For custom JavaScript scripts.
Tabler Theme
Source: [Tabler on GitHub](https://github.com/tabler/tabler)
Description: Tabler is an open-source, Bootstrap-based dashboard theme with responsive and high-quality UI components. It offers a clean and modern design, ideal for dashboard-style interfaces.
- Implementation:
CSS files from the Tabler theme are linked in the head section of base.html.
Custom style rules and theme-specific JavaScript files are included to enhance the look and functionality of the web interface.
Summary
The base.html template in SailPilot, coupled with the Tabler theme, provides a robust and visually appealing foundation for the web interface. Its modular structure allows for flexible content management and ensures a consistent user experience across different pages of the application.