Learning

I built this site to get experience with Bootstrap 4 and the Fat-Free Framework.

Bootstrap 4

Bootstrap is a popular front-end framework for building responsive websites.

Fat-Free Framework

Fat-Free is ranked in the top ten PHP frameworks.

Overview

It’s easy to create a professional looking website using WordPress or other content management systems (CMS), but if you want your site to look a little different from a stock theme, you have to customize the design. That can get complicated. (I find it easier to modify straight HTML code than to modify a WordPress theme.)

If you’re creating an e-commerce site, or need users to login, then WordPress is a good option as it includes the security you’ll want.

But, if the most complicated interaction you require with users is a contact form, and you want pages built from shared templates, clean URLs, automatic language selection, and more flexibility in the site design, then the setup demonstrated here could be a good solution.

I’ve provided explanations for how I setup the site in the Detail sections, and all of my files are on GitHub.

Bootstrap 4

Bootstrap 4 provides a responsive grid that adjusts across different display sizes, and, because of its popularity, there are a large number of code snippets available at Bootstrap and on GitHub. There’s also plenty of information about using Bootstrap 4 available via Google.

In May 2021, Bootstrap released version 5 with new features, but dropped support for older browsers, such as Internet Explorer 10 & 11. Microsoft ended support for IE11 on June 15, 2022 and in Q1 2023, they started permanently disabling Internet Explorer on some versions of Windows 10. As I’m still seeing some visitors using Internet Explorer (< 1%), I’ll keep supporting it on my existing sites for a while longer, but I’ll not support Internet Explorer on new sites I create. I suspect that a few people at home as well as some schools are still using old PCs with Windows XP or 7 that use Internet Explorer.

Fat-Free Framework

While the Fat-Free Framework isn’t the most popular PHP framework (that would be Laravel), it does work on shared hosting plans (Laravel doesn’t, at least not easily) and Fat-Free is considered to have a fast learning curve.

The main Fat-Free components I’m using are:

Routing engine – Routes a user’s request to the appropriate control function.
Template engine – Combines HTML templates with data that has been stored in Fat-Free’s “hive”, the array in memory that holds variables in the form of key / value pairs, to form web pages.
Multi-language support – Fat-Free supports multiple languages through a dictionary lookup function using key/value pairs. Dictionary files for each language are located in the dict directory and Fat-Free selects the desired language string from the dictionary files based on a token in the template and the LANGUAGE setting.
- I use Fat-Free language support for content that is the same across all pages (e.g., the Scroll-to-top button) or for pages that are common across all languages and that have limited text (e.g., the contact page).
Language detection – Fat-Free captures the Accept-Language string from a user’s GET request, which I use for selecting the appropriate language subdirectory when a user requests the root directory.