Sass organization

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.

Diagram of the Sass files used to construct the site CSS

Development setup

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:

Bootstrap using npm i --save-dev bootstrap
jQuery (to support Bootstrap) using npm i --save-dev jquery
Popper.js (to support Bootstrap) using npm i --save-dev popper.js (Popper.js has a V2 version, but Bootstrap 4 wants the older V1 version).
Webpack for bundling JavaScript using npm i webpack webpack-cli --save-dev

Visual 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.

Off-canvas navigation

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).

Mobile menu toggler

Bootstrap 4’s menu toggler for mobile devices (shown on the left in the image above) has low color contrast and there’s no animation.

I changed the color for more contrast (shown in the middle in the image above) and animated the hamburger (shown on the right in the image above) to make it clearer to users that they need to tap the toggler again to close the menu (tapping a link or tapping anywhere on the page will also close the menu).

Toggler HTML code

<button class="navbar-toggler" type="button" data-toggle="offcanvas"
    data-target="#navbar" aria-controls="navbar"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="sr-only">({{ @dictMenuToggle }})</span>
    <span class="navbar-toggle-icon">
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
    </span>			
</button>

The sr-only span tag is just for screen readers.

Toggler CSS code (for the hamburger)

.top-bar {
    transform: rotate(0);
}
.middle-bar {
    margin-top: 0.375rem;
    opacity: 1;
}
.bottom-bar {
    margin-top: 0.375rem;
    transform: rotate(0);
}

.off-canvas-active .top-bar {
    transform: translate(0.25rem) rotate(45deg);
    transform-origin: 1.5% 1.5%;
}
.off-canvas-active .middle-bar {
    opacity: 0;
}
.off-canvas-active .bottom-bar {
    transform: translate(0.25rem) rotate(-45deg);
    transform-origin: 1.5% 98.5%;
}

The toggler adds and removes an off-canvas-active class to the overall containing division to show the menu when the toggle button is clicked or tapped. I use the addition/removal of that class to animate the hamburger (the center bar drops out and the top and bottom bars pivot to form the ✕).