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).
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.
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.
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.
- 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 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 modifying the module.js source file
- For full-screen background images with modals
- Added
is-fixedclass to the background static image so it works with modals (Bootstrap has the function, but it's not well documented)
- Added
The Bootstrap files are not included – those files are available from Bootstrap
- Dynamic sitemap generation with xhtml:links for alternate languages
- Utilize
preloadandpictureto 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
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.
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.
Comply with the user's prefers-color-scheme: dark setting (when set) using Bootstrap's color mode structure.
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.
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
2023/07/09 – Initial release for Bootstrap 5.3 version.
2024/01/25 – Modified navbar toggler and verified use with Bootstrap 5.3.2.