[February 6, 2018] Update to Bootstrap 4 final

Major changes in the current update:

 

1. Migration to Bootstrap-v4.0.0 final

Migration to the actual Bootstrap-v4.0.0 final was implemented according to the detailed instructions and recommendations of the Bootstrap team. You can get to know with them by the following links:

https://getbootstrap.com/docs/4.0/migration/

https://www.eduonix.com/blog/web-programming-tutorials/learn-sass-variables-customizing-bootstrap-4/

All changes (variables and their values) and corrections were done in the separate files called ..\Bootstrap\scss\_custom.scss and ..app\sass\theme-styles\_bootstrap-customization.scss (styles of the standard form elements, headings, paragraphs, lists etc). It's worth of noting that upon Bootstrap-v4.0.0 installation the file ..\Bootstrap\scss\_custom.scss isn't enabled by default in the files intended for SCSS compilation, namely in: 

app/Bootstrap/scss/bootstrap.scss
app/Bootstrap/scss/bootstrap-grid.scss
app/Bootstrap/scss/bootstrap-reboot.scss

Thus, once Bootstrap-v4.0.0 is installed, you have to enable ..\Bootstrap\scss\_custom.scss file in the above mentioned files right AFTER the  ..\Bootstrap\scss\_variables.scss file:

@import "variables";
@import "custom";

Changes in the HTML markup:  there were added new classes and renamed the existing ones in accordance with the documentation on migration to the final version. 

 

 

2. Migration of Font Awesome 4.5.0 to Font Awesome 5.0.6.

Migration on the actual version of the Font Awesome was implemented basing on the official Font Awesome documentation. More about usage of 5 version you can read here:

https://fontawesome.com/get-started

https://fontawesome.com/how-to-use/svg-with-js

It is important to note that the old version was removed completely and replaced by the new one. One of the main peculiarities of the Font Awesome 5 is possibility to choose font format between <i> and <svg>. Our choice fell on SVG-icons usage in our template (it is implemented with help of the JS-script <script defer src="fonts/fontawesome-all.js"></script> according to the above mentioned documentation). This choice resulted in necessity to edit some styles, in particular those ones that referred to the <i> tag. 

In the HTML markup there were edited icons classes. The standard class "fa" was renamed into the class of the corresponding font face («fas», «far», «fal», «fab») for proper icons display:

Solid - fas - <i class="fas fa-camera-retro">
Regular - far - <i class="far fa-camera-retro">
Light - fal - <i class="fal fa-camera-retro">
Brands - fab - <i class="fab fa-font-awesome">

 

 

3. Fixed bugs, that were found while template testing.

- Fixed type number inputs on mobile

- Fixed comments list on mobile

- Fixed buttons position on FriendsBirthday.html page

- Fixed logo position on sticky header

- Fixed post meta display on mobile devices.