Bootstrap 4
This site uses the general Bootstrap 4 layout (i.e. navbar at the top).
The site specific appearance is generated through Sass:
I did modify a couple of the Bootstrap 4 code snippets:
This site uses the general Bootstrap 4 layout (i.e. navbar at the top).
The site specific appearance is generated through Sass:
I did modify a couple of the Bootstrap 4 code snippets:
Most languages can be displayed using one of the available system font-families, so I generally use a common CSS file. I created a special CSS file for Korean that includes a word-break: keep-all; setting as a way to demonstrate how to have multiple CSS files. If an additional font family is needed, such as Meiryo and Osaka for Japanese, it would be easy enough to create an additional CSS file. (Note: setting word-break for Korean pages could also be done by using the lang atribute.)
I also use Sass to generate the CSS file for the overlay slider.
For building Bootstrap/Fat-Free based websites, I’m using:
Windows PC – with a PC, I can test pages on Chrome, Firefox, Edge, Internet Explorer, and Opera using my own machine. I borrow a Mac, iPhone, and iPad to test with Safari.
For testing with older versions of Internet Explorer (IE9 and IE10), I have IE11 installed on my machine, which will run IE9 and 10 in emulation mode, and I run IE9 and 10 with Windows 7 on a virtual machine running on Oracle VM VirtualBox.
I’m still seeing visitors to my sites using IE 9 & IE 11, which means I won’t switch to Bootstrap 5 for a while, as the next version of Bootstrap does not support Internet Explorer. Visitors using IE 8 or older receive a message letting them know the site does not support older browsers.
Samsung Galaxy – smartphone for testing mobile browsers.
To see what’s happening on the phone, I have Android’s SDK Platform-Tools installed on my PC. Platform-Tools includes the Android Debug Bridge (adb), which connects Chrome on my PC to Chrome on my phone for Remote Debugging.
Note: The Android debug bridge needs to be started first by opening a command window, going to the platform-tools directory, and running adb devices.
WAMP software stack – localhost using Apache, MySQL, and PHP (I don’t use the database) – Apache & PHP are needed for Fat-Free.
npm package manager – for installing packages:
npm i --save-dev bootstrapnpm i --save-dev jquerynpm i --save-dev popper.js (Popper.js has a V2 version, but Bootstrap 4 wants the older V1 version).npm i webpack webpack-cli --save-devVisual Studio Code (A.K.A. VS Code) for writing the code.
Glenn Marks’ Live Sass Compiler – for compiling Sass code into CSS. I originally used Ritwick Dey’s Live Sass Compiler extension for VS Code but I was getting errors with line numbers and source file references in the sourcemaps, so I switched to using gulp-sass as it generated correct sourcemaps. I recently found node-sass has been depreciated, so I switched to Glenn Marks’ extension for VS Code.
Webpack 5 for bundling multiple JavaScript files into a single file. As using CDNs for providing JavaScript files (e.g. jQuery) are out due to privacy concerns, I am now combining jQuery, Bootstrap, the jQuery easing plugin, and the site-specific common JavaScript into one file using Webpack. Webpack could also combine the Sass files, but the Live Sass Compiler does what I need.
Bootstrap 4’s standard is to have the hamburger icon on the right (which I like) and to have the menu drop down from the top with the menu items listed on the left, which puts the menu items on the other side of the screen from the hamburger icon (which I don’t like, especially for tablets).
I’m using a version of Pascal Müller’s Off-canvas Nav (Pascal’s version was for Bootstrap 4 - Alpha 6 – I updated it to work with Bootstrap 4.0 to 4.6).