FCSS, HTVL AND BOOTSTRAP

Integrating Bootstrap 4.0 with FCSS

From basics to pro FCSS templating in one read

templating with HTVL, FCSS and BOOTSTRAP 4.0
templating with HTVL, FCSS and BOOTSTRAP 4.0

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:

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 to proceed. The directory is named appropriately and conveniently so as to enable you for example to view live pages by installing and running live-server or http-server from npm packages. To do this, start by installing nodejs if you don’t have it already then run:

npm init

To create the package.json file for your project. After that you can then install local test server by running:

npm install --save http-server

This will enable you to view the HTML files created upon running the compiler. Remember to add the command script to run the server in the scripts section of your package.json. Alternatively, you could install the server globally by replacing “ — save” with “-g” in the above command. Once all is set up, you can test your development environment by opening your favorite editor and typing the following commands:

$DOCTYPE_htvl
$htvl
$body
$h1 Hello world!$_h1
$_body
$_htvl

Save the file as index.htvl. When the compiler runs to completion, you will then need to run the local server command inside the same directory by executing the following lines:

bash htvl-compiler
http-server

If your environment is set up correctly, you will see something like this:

Starting up http-server, serving ./public
Available on:
http://127.0.0.1:8080
http://192.168.1.3:8080
Hit CTRL-C to stop the server

Prompting you to navigate to any of the browser addresses listed, whence you will find your web page running. In summary, the application will have created a directory called public and a file named “index.html” which is served through your request by the local development server.

General Conventions

FCSS is a generic term that encompasses hypertext variable language (HTVL) if you have ever come across that term, which also came to be known when this project begun. FCSS uses HTML tags as variables in the same way most templating languages do already, but with a little flavor. If you have used web2py, CGI, or even better some routines of WebAssembly literal code, you will grasp this one very fast. The first general principle of FCSS is to get used to the leading and trailing variables. For instance, the leading “div” element is given as $div, while the trailing one is given as $_div. As such, if you write:

$div$_div

You will end up with the following result:

<div></div>

The same principle applies for all of the following elements of HTML5:

head, body, ul, br, li, p, form, button, span, svg, nav, iframe, script, section, strong, footer, blockquote, h1-h6, img, etc.

However, there is an extended version of the “div” element that we will look at in the next sections.

Element-by-Element Deep Dive

In this section we will look at element by element, as well as display the results of the compiled output using pictures where possible. For instance an HTML “div” element may be produced in general as follows:

$(div 'class' 'id' 'style')

Where “class”, “id” and “style” represents the actual attributes of the element. So in general you could say:

$(div 'container text-center' 'container' 'width: 200px; height: 200px;')$_div

You should see a centered container with class “container text-center”, id “container”, and dimensions width = 200px, and height 200px. The HTML output will be as follows:

<div class="container text-center" id="container" style="width: 200px; height: 200px"></div>

The above routine applies to most HTML tags and thus it is worth taking a note of the order in which they appear.

1. Document declaration and Navigation bar

Let’s kick off this section with HTVL file declaration, meta tags, headings, and a navigation bar, as it is usually the first set of elements to begin your template. The code:

1 $DOCTYPE_htvl
2 $htvl
3 $(comment 'headtags')
4 $head
5 $meta
6 $(bscssCdn '4.4.1')
7 $(popjsCdn '1.16.0')
8 $(bsjsCdn '4.4.1')
9 $(jqCdn '3.4.1')
10 $(faCdn '4.7.0')
11 $(link stylesheet 'text/css' '../assets/proto.css')
12 $_head
13 $(comment 'end headtags')
14 $body
15 $(comment 'navbar')
16 $(nav 'navbar navbar-dark bg-dark')
17 $(a 'navbar-brand' '' '' 'Your Brand')$_a
18 $(form 'form-inline')
19 $(input 'form-control mr-sm-2' 'search' 'Search' 'Search')
20 $(btn 'btn btn-outline-success my-2 my-sm-0' 'submit'
21 'Search')$_btn
22 $_form
23 $_nav
24 $(comment 'end navbar')
25 $_body
26 $_htvl

The first two lines in above code effectively declares that we are about to write HTVL code. These are equivalent to writing:

<!DOCTYPE html>
<html lang="en">

Line #3 is a comment, followed by the leading “head”. Line #4 represents pre-made “meta” links which are common in most HTML documents. These are:

<meta charset="UTF-8">
<meta name="description" content="Functional CSS Founders">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="viewport" content="width=device-width, initial scale=1.0">

Lines #6–10 as you might have guessed are CDN links and scripts: bootstrap css CDN (bscssCdn), popper js CDN, bootstrap js CDN, jQuery CDN, and font awesome (faCdn). The values in single quotes simply represents the versions. Version #1 FCSS compiler uses “maxcdn” as default, cloudflare popper js, and ajax google api for jQuery, and “use.fontawesome.com” CDNs as defaults.

Meta links can also be entered as functions following the following routines:

$(metaLink 'author' 'Nicolus Rotich')

To produce appropriate meta links. The above code will result in:

<meta name="author" content="Nicolus Rotich">

Custom scripts including JavaScript files and css style links can also be entered as follows:

$(link stylesheet 'text/css' '../assets/proto.css')

To produce the following code as shown in line #11:

<link rel = "stylesheet" type = "text/css" href = "../assets/proto.css">

2. Footer

Following the same routine, the following code produces a basic footer as described in Bootstrap 4:

$(comment 'footer Elements')
$(footer 'page-footer font-small special-color-dark pt-4')
$(div 'footer-copyright text-center py-3')
$(p '' '' 'Copyright &copy; <script>document.write(new Date().getFullYear())</script>' '')
$_p
$(a '' '' './' 'https://yourcompanyname.com/')$_a
$_div
$_footer

The footer tag function takes only class as the input, paragraph element like the “div” takes “class”, “id”, “text” and “style” in addition. Links are represented with “a” tag, with “class”, “href”, “text” and “id” in that importance order. Remember the trailing variables for paragraph and links $_p and $_a respectively. The result is as follows:

<footer class="page-footer font-small special-color-dark pt-4">
<div class="footer-copyright text-center py-3" id="" style="" data-ride="">
<p class="" id="" style="">
Copyright &copy; <script>document.write(new Date().getFullYear())</script>
</p>
<a class="" id="" href="./">https://yourcompanyname.com/</a>
</div>
</footer>

3. Buttons

Finally, let’s get to some interesting stuff. Buttons are inevitable in any application, be it web, mobile or desktop. Here is how we create elegant buttons with FCSS:

$(btn 'class' 'type' 'text') $_btn

For example, run the code below and see what code produces upon compilation:

$(comment 'buttons')
$(div 'container text-center')
$(div)
$(btn 'btn btn-primary' 'button' 'Primary button') $_btn$br
$_div
$br
$(div)
$(btn 'btn btn-warning' 'button' 'Warning button') $_btn$br
$_div
$br
$(div)
$(btn 'btn btn-danger' 'button' 'Danger button') $_btn$br
$_div
$br
$(div)
$(btn 'btn btn-success' 'button' 'Success button') $_btn$br
$_div
$br
$(div)
$(btn 'btn btn-secondary' 'button' 'Secondary button') $_btn
$_div
$br
$(div)
$(btn 'btn btn-info' 'button' 'Info button') $_btn$br
$_div
$br
$(div)
$(btn 'btn btn-light' 'button' 'Light button') $_btn$br
$_div
$br
$(div)
$(btn 'btn btn-dark' 'button' 'Dark button') $_btn
$_div
$_div
$(comment 'end buttons')

4. Badges & Labels

Badges and labels are used as indicators in a web page. For instance they are used in web shops to designate prices, product specifications, and what have you. Here is a code example for badges and its output.

$(div 'container text-center' '' '')
$h1 Bandge Examples$(span 'badge badge-secondary')Badge$_span$_h1
$br
$(div)
$(btn 'btn btn-primary' 'button' 'Notification')
$(span 'badge badge-light')4$_span
$_btn
$_div
$br
$(div)
$(span 'badge badge-warning') Warning$_span
$(span 'badge badge-danger') Danger$_span
$(span 'badge badge-success') Success$_span
$(span 'badge badge-dark') Dark$_span
$(span 'badge badge-pill badge-info') Info Pill-Badge$_span
$p You can also use links to create badges$_p
$(a 'badge badge-secondary' '' '#' 'Secondary')$_a
$_div
$_div

5. Jumbotron

Jumbotrons in HTML 5 highlights the background area in which your other HTML tags are sitting on. Here is an example:

To get an idea how that was created, here is the sample code:

$(comment 'Jumbotrons')
$(div 'container text-center' '' '')
$(div 'jumbotron')
$(h 1 '' '' 'Medium')
$(p '' '' 'I write articles on' 'margin-top: 50px')$(img 'https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Medium-512.png' 'Medium icon' 'height: 100px; width: 100px;')
$_div
$_div
$(comment 'End Jumbotrons')

6. Alerts

Alerts are important HTML tags used to notify the user of what is happening on the page based on what clicks led there. Here is a FCSS code example for various alerts. The below code will produce the sample alerts output:

$(div 'container text-center' '' '')
$(ul 'pagination')
$(li 'page-item')$(a 'page-link' '' './alerts.html' '')Alerts$_a$_li
$(li 'page-item')$(a 'page-link' '' './badgesAndLabels.html' '')Badges$_a$_li
$(li 'page-item')$(a 'page-link' '' './buttons.html' '')Buttons$_a$_li
$(li 'page-item')$(a 'page-link' '' './forms.html' '')Forms$_a$_li
$(li 'page-item')$(a 'page-link' '' './grid.html' '')Grids$_a$_li
$(li 'page-item')$(a 'page-link' '' './images.html' '')Images$_a$_li
$(li 'page-item')$(a 'page-link' '' './navbar.html' '')Navbar$_a$_li
$(li 'page-item')$(a 'page-link' '' './progress.html' '')Progress$_a$_li
$(li 'page-item')$(a 'page-link' '' './tables.html' '')Tables$_a$_li
$(li 'page-item')$(a 'page-link' '' './typography.html' '')Typography$_a$_li
$(li 'page-item')$(a 'page-link' '' './wells.html' '')Wells$_a$_li
$(li 'page-item')$(a 'page-link' '' './jumbotron.html' '')Jumbotron$_a$_li
$(li 'page-item')$(a 'page-link' '' './carousel.html' '')Carousel$_a$_li
$_ul
$_div

7. Images

It is undeniable that a picture is worth a thousand words. Good web pages and applications makes use of images to portray most beauty that cannot be put into words. FCSS brings an excellent easy way to do just that. Check out these images for instance:

With FCSS you can place a picture neatly. Be it a rounded corner, circular, or thumbnail picture.

The code used to produce these stunning images is as simple as this one shown below. You can test it by pasting to your file and running the compiler as instructed:

XXXXXXXXXXXXXXXXXXX

$(comment 'Images')
$(div 'container text-center')
$(img 'https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg' 'flower photo' '' 'rounded')
$p Rounded corner image$_p
$(img 'https://images.freeimages.com/images/small-previews/70c/blue-heron-on-rock-1382247.jpg' 'flower photo' '' 'rounded-circle')
$p Rounded circle image$_p
$(img 'https://images.freeimages.com/images/small-previews/7e9/ladybird-1367182.jpg' 'flower photo' '' 'img-thumbnail')
$p Thumbnail image$_p
$_div
$(comment 'end images')

8.0 Progress Bar

We all know the impatience that can be caused when you don’t know how long a download will take if there is no indicator to track and show the progress. Progress bars and loaders are meant exactly for that job. They ease you by asking you to be patient as a process is being made in loading an item. Check out the following code produced with FCSS:

$(comment 'Progress Bar')
$(div 'container text-center')
$(div 'progress')
$(progBar '76' '76')
$_div
$_div
$(comment 'End progress bar')

As you can see. The “progBar” command takes two inputs. The valueNow, and with. The output as you would expect is as shown.

9. Carousel

Completely static sites can be boring. HTML5 carousels gives interactivity to images without much struggle to implement javascript codes. These are the things that we easily overlook when we try to remember a beautiful website we have visited and compare with the ones we are developing. FCSS and Bootstrap makes this as easy as a, b, c — check out the following code.

$(div 'container text-center' '' '')
$(h 1 '' '' 'This is an Example of a Carousel Slide')
$(div 'carousel slide' 'demo' '' 'carousel')
$(comment 'Indicators')
$(ul 'carousel-indicators')
$(data-li 'active' '#demo' '0')$_li
$(data-li '' '#demo' '1')$_li
$(data-li '' '#demo' '2')$_li
$_ul
$(div 'carousel-inner')
$(div 'carousel-item active')
$(img 'https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg')
$_div
$(div 'carousel-item')
$(img 'https://images.freeimages.com/images/small-previews/70c/blue-heron-on-rock-1382247.jpg')
$_div
$(div 'carousel-item')
$(img 'https://images.freeimages.com/images/small-previews/7e9/ladybird-1367182.jpg')
$_div
$_div
$(comment 'Left and right controls')
$(data-a 'carousel-control-prev' '#demo' 'prev')
$(span 'carousel-control-prev-icon')$_span
$_a
$(data-a 'carousel-control-next' '#demo' 'next')
$(span 'carousel-control-next-icon')$_span
$_a
$_div
$_div

If you like you may proceed to check out the hosted full project to see the carousel in action.

10. Typography

Let’s have a look at typography with FCSS. We all admire well written HTML 5 documents that are not too plain to look like HTML but with some fancy style. The text you are looking at was produced with the following minimal FCSS code in combination with the powerful tools provided by Bootstrap 4. The FCSS code used to produce the text under the image you are looking at is as simple as is shown below. You may also test it by pasting and compiling:

$(comment 'Typography')
$(div 'container text-center' '')
$(h 3 '' '' 'Miscellaneous <small>stuff</small>')
$(p 'bg-info' '' 'The Gutenberg Press 1454')$_p
$(p 'text-success' '' 'Revolutionizing Front-End Development')$_p
$(blockq)
$(p '' '' 'The only source of knowledge is experience.')$_p
$(footer '') - Albert Einstein $_footer
$_blockq
$p $kbd Enter$_kbd is a $code kbd $_code element $_p
$(p 'bg-warning' '' 'Paragraph formats')
$_div
$(comment 'end Typography')

11. Grids and Tables

Tables

Tables and grids presents an elegant way of transmitting information to the user interface. They are undoubtedly among the most useful items to have on a website or web application, as they compress information that could otherwise become cluttered and cumbersome to interpret. Despite this importance, it can be tiring to key in while writing HTML code in the conventional way. FCSS provides a better way to create these, with a touch of bootstrap to eliminate the need for further styling. Tables and grids follow the following conventions in FCSS:

$(comment 'Grid system with htvl')
$(div 'container text-center')
$(div 'row')
$(div 'col')
1 of 3
$_div
$(div 'col-5')
2 of 3 (wider)
$_div
$(div 'col')
3 of 3
$_div
$_div
$_div
$(comment 'end grid')

Grids

Unlike grids, tables make use of head, rows and columns in addition. Grids are used when all you want to do is to divide the HTML into sections where your contents will occupy. Check out the code below. Feel free to paste it to your source code and compile to see the output.

$(comment 'Tables')
$(div 'container text-center')
$(table 'table table-striped table-dark')
$thead
$tr
$(th 'col' '#')
$(th 'col' 'First')
$(th 'col' 'Last')
$(th 'col' 'Handle')
$_tr
$_thead
$tbody
$tr
$(th 'row' "1")
$td Mark$_td
$td Otto$_td
$td @mdo$_td
$_tr
$tr
$(th 'row' "2")
$td Nicolus$_td
$td Rotich$_td
$td @theRotich$_td
$_tr
$tr
$(th 'row' "3")
$td Larry$_td
$td The Bird$_td
$td @twitter$_td
$_tr
$_tbody
$_table
$small Table 1.0: Your table caption goes here$_small
$_div
$(comment 'End tables')

12. Forms

Forms are important for capturing user information for signing in, registration, survey, contact emails etc. To create a form with FCSS and bootstrap, all you need to do is key in the code and run the compiler as is done in all other HTML 5 components. The following routine applies to HTML forms and inputs. As you can see FCSS produces elegant forms with minimal struggle to style further with conventional CSS once bootstrap is integrated to the routine.

XXXXXXXXXXXXXXXXXXXX

$(comment 'Forms and inputs')
$(div 'container text-center' '' '')
$(form '' '' '' '')
$(div 'form-group')
$(label 'exampleInputEmail' '' 'Email Address')$_label
$(input 'form-control' 'email' )
$(small 'form-text text-muted' 'emailHelp')We'll never share your email with anyone else.$_small
$_div
$(div 'form-group')
$(label 'exampleInputPassword' '' 'Password')$_label
$(input 'form-control' 'password' )
$_div
$(div 'form-group form-check')
$(input 'form-check-input' 'checkbox' )
$(label 'exampleCheck' 'form-check-label' 'Check me out')$_label
$_div
$(btn 'btn btn-primary' 'submit' 'Submit')$_btn
$_form
$_div
$(comment 'End Forms')

That is it. We have presented the 12 most common HTML 5 tag elements to make you a pro FCSS coder in one read. Feel free to check out the full project hosted here for future references.

I am a Software/Algorithmic Developer, Science Writer and Systems Thinker. Most of my content is freshly distilled from up-to-date information.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store