A simple, multi-language website using Fat-Free

A frontend / backend setup for a simple, multi-language website using Bootstrap 5 and the Fat-Free PHP framework (but no database — this is not a CMS).

Overview

Combining Bootstrap 5 with the Fat-Free php framework to build websites that:

• use templates for assembling the pages
• provide clean URLs
• support automatic language selection
• work on a shared server
• are easy to install (just copy and paste, no package manager required)

Previously, to gain experience with Fat-Free and Bootstrap 4, I created a demo site using Bootstrap 4 and Fat-Free, and shared the files through a GitHub repository.

For the release of Bootstrap 5.3, which supports dark mode (and no longer supports Internet Explorer), I created a new demo site and repository.

Demo

The code from this repository is in operation at https://sbf-bootstrap5.alwaysdata.net/, running on a free hosting service that provides PHP and Apache. The intent is for the code to be an as-complete-as-possible package, rather than just a bare-bones starting point for building a site.

This design is not a CMS. There is no database. All of the content is in the configuration file, the controller files, and the content templates, which works well for static sites.

Applying the setup

All of my files for the demo site, Fat-Free configuration, controller, and template files, and the associated SCSS, image, and JavaScript files are in this GitHub repository. The Bootstrap and Fat-Free files are available from Bootstrap and Fat-Free.

It should be possible to replace my site specific content with content for a different website.

What's included (not a comprehensive list)

Fat-Free

• config.ini
• routes.ini
• all of the controller files
• all of the templates for the pages

The Fat-Free files are not included – those files are available from Fat-Free

Bootstrap

Bootstrap is easy to structure with its available classes and using Sass. There are a few things I changed from the standard Bootstrap code:

• For Bootstrap's offcanvas menu:

  • Use the navbar toggle-button to both open and close the menu (eliminates the need for a close button on the menu)
  • Automatically close the menu when a same-page link is clicked
  • Added an option for focus to be on the target rather than the menu button – requires replacing the offcanvas.js source file
    • I did fork Bootstrap and applied the offcanvas changes to the fork

• For full-screen background images with modals

  • Added is-fixed class to the background static image so it works with modals (Bootstrap has the class, but its availability and use are not included in the documentation – it's only referenced in the scrollbar.js file: SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').

• For updating to Bootstrap 5.3.7, I update my webpack.sass.js file to switch from the deprecated legacy JavaScript API to the modern Sass API and silenced warnings about SASS depreciations.

The Bootstrap files are not included – those files are available from Bootstrap

General website stuff

• Dynamic sitemap generation with xhtml:links for alternate languages
• Utilize preload and picture to provide a selection of hero images (4 smartphone, 4 tablet, and 5 laptop/monitor) for the browser to select from to improve page loading speed
• Uses Fatfree's SMTP plug-in for email messages
• Custom error response pages

Multi-language support

While the content for the demo site is in English, the demo does have Chinese and Korean pages to demonstrate the multi-language operation. The Chinese and Korean home pages were created from the English home page using Google Translate. The remainder of the Chinese and Korean pages, which are provided only to demonstrate the navigation, just have Google translations of the English pages' titles and descriptions.

Using system fonts

Font styles use system-ui, the same font the operating system uses to display text. This provides a similar look to what the user sees on the system screens, and it speeds up page startup time as there are no fonts to download.

Dark mode

Comply with the user's prefers-color-scheme: dark setting (when set) using Bootstrap's color mode structure.

Compatibility

The demo site works with the latest versions of:

• Edge (desktop & Surface)
• Chrome (mobile & desktop)
• Firefox (mobile & desktop)
• Android (Samsung) Internet Browser
• Opera (mobile & desktop)
• Safari (mobile & desktop)

The site does not work with Internet Explorer, other than to show general content.

Licensing

This code is provided under an MIT license. See the LICENSE file for details.

Fat-Free is provided under a GNU Public License (GPL v3)

Bootstrap is provided under an MIT license

Updates

2023/07/09 – Initial release for Bootstrap 5.3 version.

2024/01/27 – Verified use with Bootstrap 5.3.2, changed to an offcanvas-custom.js file, and modified the navbar toggler.

2024/07/23 – Verified use with Bootstrap 5.3.3 and made some changes to the demo website.

2025/07/21 – Verified use with Bootstrap 5.3.7 and Fat-free 3.9, made some changes to the demo website, and updated the files using AI.