A look Into: The Kit Language
Let’s say you were building prototypes for a website with HTML files. You have about 10 HTML pages or so, and these pages share some common components such as Header, Sidebar, and Footer.
Now here comes the problem: if you make a change in these shared components, you may end up having to change them in the other files as well. It is counterproductive and a big waste of time.
To avoid this, you can try out templating engines. There are a number of templating engines out there, each with its distinctive features. In this post, we are going to walk you through one that we have found to be the simplest yet still powerful: Kit.
Using Kit Language in Windows and Linux
In the previous post, we have discussed about Kit, a very simple HTML templating language. If you had... Read more
What is Kit?
Kit is a proprietary language of Codekit that brings variable and file import ability to HTML. It is written with a .kit file extension. Using Codekit, it can then be compiled into an HTML file upon a file save.
Variables
Kit variables are not set in stone; they can be defined with the $ or @ notation. So, if you use Kit along with LESS, you can name your variables with the @ notation to follow the LESS convention. Similarly, you can use the $ for Sass. The values can be assigned with colon, equal sign, or space. Below are some examples:
<!-- $var: variable value --> <!-- @var: variable value --> <!-- $var = variable value --> <!-- @var = variable value --> <!-- $var variable value -->
However, it is worth noting that you may only set one variable per comment, so the following example won’t work as a variable.
<!-- $var1: variable value, @var2: variable value -->
Import
With the Kit language, you can import any type of file including .html, .txt, .kit, and even .php. To import files, you can use @import or @include.
<!-- @import "file.kit" --> <!-- @include "file.html" -->
Furthermore, unlike defining variables, you can import multiple files in one line, like so:
<!-- @import file1.kit, file2.html, inc/file3.txt -->
Upon saving, Codekit will grab the content in these files and append them to the file.
Using Kit
So we have seen what Kit has to offer. They may not be much, but they are certainly powerful enough to make life easier when handling a bunch of HTML files.
In a practical scenario, we can break our document down into several files, for example: header.kit, sidebar.kit, footer.kit, head.kit, opening.kit, and closing.kit. We will import these files into our pages so that when we make a change, it will apply on all the pages.
Document Opening and Closing
I’m sure the file names are pretty self-explanatory as to what the files are carrying, except (perhaps) the opening.kit, and the closing.kit.
In our example below, the opening.kit file contains the Doctype, the HTML opening tag, and the opening body tag. In this file, we also import the head.kit which contains anything that is wrapped within the <head> element, and can also define several global variables that can be inherited through all the files, like so:
<!DOCTYPE html>
<html lang="en-US">
<!-- @path_js : js/ -->
<!-- @path_css : css/ -->
<!-- @path_img : img/ -->
<head>
<title><!-- @page_name --> — Hongkiat.com</title>
<link href="<!-- @path_css -->style.css" rel="stylesheet" media="screen">
<script src="<!-- @path_js -->jquery.js"></script>
</head>
<body class="<!-- @body_class -->">
Note that I also added two variables: @body_class in the body tag and @page_name in the title tag. These variables will allow us to set different classes and page names across the pages. If we have two pages named index.kit and about.kit, in each of these files we can set the values of those two variables like so:
index.kit
<!-- @page_name: Homepage --> <!-- @body_class: home blog --> <!-- @include inc/opening.kit -->
about.kit
<!-- @page_name: About --> <!-- @body_class: about page page-template --> <!-- @include inc/opening.kit -->
When we have saved the files, Codekit will replace the variables that we have put in the body tag and the title with those values. One thing to note though, is that the variables have to come before the inclusion of opening.kit, otherwise they will not be picked up.
Conclusion
As previously mentioned, Kit could be the simplest templating language available. It only uses the HTML comment tag, and gives great flexibility in defining variables and importing files.
Being able to use variables and import files in HTML means that we can increase our producivity, as we no longer have to change our codes multiple times in multiple files, which is very time-consuming. In addition, it also allows us to make our project modular, and thus more manageable.