FCSS, HTVL AND BOOTSTRAP

Integrating Bootstrap 4.0 with FCSS

From basics to pro FCSS templating in one read

HTML templating plays a crucial role in software development. It not only determines the speed of your development, but also the quality of the output upon project completion. In our last few blogs on automating front-end development, we have mentioned functional css (FCSS) a number of times to refer to our in-house templating language. In this article we will explore the general principles of FCSS, some routines and conventions followed, as well as element-by-element code examples for most bootstrap components. The article will therefore not only bring you to speed with what has been happening with FCSS in general, but you if you follow along you will be an expert yourself on completion.

Environment setup

You will need the ability to run nodejs and the latest bash on your desktop to completely follow along this tutorial. As such, if you are on a Windows machine you will want to get gitbash or an equivalent environment that will enable you to execute bash. You also have an option to activate Windows Subsystem for Linux (WSL). If you are on Linux or Mac, it is most likely that you are used to running bash scripts and your system is well set for that. Otherwise make sure that you have the latest bash — especially Mac users. With that, let’s dive deep to FCSS. You will then want to head to github and download the compiler from the link below:

Inzpiro-gaming/HTVL-compiler

Writing the HTVL files and running the compiler inside the same project root directory will compile HTML files and write them to a “public” directory crated if it doesn’t exist already. If it exists, you will get a notification to remove, rename or move it in order…