simple f3 bootstrap 5 multi lang site Download - simple f3 bootstrap 5 multi lang site Source code download

simple f3 bootstrap 5 multi lang site

Other categories

1.0.0

Download

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 modifying the module.js source file
For full-screen background images with modals
- Added is-fixed class to the background static image so it works with modals (Bootstrap has the function, but it's not well documented)

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.