Site Construction

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 5

The Bootstrap framework provides a responsive grid that adjusts across different display sizes, and, because of its popularity, there are a large number of code snippets available on the internet.

In 2021, Bootstrap released version 5 of the framework, which utilizes CSS properties such as variables (--sc-navbar-bg: #0024a7;), calc functions (width: calc(100% - 80px);), and many of the pseudo-classes (:is(section, article, aside, nav)). CSS variables are especially helpful for supporting dark mode in Bootstrap 5.3.

In making the switch to utilizing the newer CSS properties, Bootstrap dropped support for Microsoft Internet Explorer (IE), which doesn’t support the properties. Support for IE is becoming less important as in 2022, Microsoft ended support for IE and in Q1 2023, they started permanently disabling Internet Explorer on some versions of Windows 10.

World-wide, there are still more that 45 million desktop systems running Windows 7 or Windows XP (as of May 2024) that may be using Internet Explorer. For sites that need to support those users, Bootstrap 4 is still available.

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.

Constructing a website with
Bootstrap 5
and the
Fat‑Free Framework

Learning

Bootstrap 5

Fat-Free Framework

Overview

Bootstrap 5

Fat-Free Framework