KIT files

What is the KIT language

The KIT language brings a couple of enhancements to standard HTML, imports and variables. Both variables and imports are useful if you have some common structures in your code that are often repeated, for example a header or footer, with kit you can create one header file import it into 20 different pages, and only have to edit that header in the original file. the KIT language is included with the software Codekit, but is also supported in Prepros, and released under an open source license, by the time you have read this there may be completely free KIT compilers too.

Use of KIT files in any of our themes is completely optional, you do not have to buy additional software to use any of our themes. The KIT files included with your theme may still prove useful even if you do not have software to compile it. The KIT files contain standard HTML and can be used as a reference to copy/paste from when building a new page, keep in mind though, that any variables or imports wont show up in uncompiled kit files.


You can import any file, of Any type, into a Kit file. The syntax is just like CSS. The syntax is flexible. You can use @include instead of @import if you prefer. Quotes and spaces are totally optional (except for the space after the @import statement; that one you need). All of the examples opposite are valid.

You may import more than one file at a time by using a comma-separated list. Each one's contents will be inserted into the compiled HTML in the same order as the import list

<!-- @include someFile.kit -->
<!-- @import '../../someFileAtRelativePath.html' -->
<!--@include no_spaces_at_beginning_or_end.txt-->


Kit follows the "partial" convention from SASS. Whenever you have a file that is ONLY meant to be imported into others, you can add a leading underscore to the filename. (This helps you quickly recognize "import-only" files in your file manager.) You do NOT, however, need to include the underscore in any @import statements.

Your partial may be named _my-file.kit but could be imported like this:

<!-- @import 'my-file' -->


You can declare and use string variables in any Kit file. When you compile the Kit file, it will replace these special comments with the value of the variables. The original declaration comments will not appear in the HTML output.

Depending on which languages you already use, you've probably got a favorite syntax. Good news: Kit supports all of them. You can use either $ or @ to denote a variable name and you can use equals signs, colons or just a space to assign a value. All of the opposite are valid variable declarations:

You may only declare or use a single variable per special comment. Attempting to declare or use multiple variables in a single comment will result in undefined behavior.

<!--$myVar:This text is amazing-->
<!--@var2=Some other incredible text-->
<!-- @width = 40px -->
<!-- $manifesto Who needs colons and equals signs? -->

Creating a new page

Ensemble includes a useful KIT based page template for speedy creation of new pages, first open up the directory kit-files you should see a file called _PAGE.kit duplicate this file, giving it a new name and fill in the available variables with your new pages details.

Once you have filled out the variables, compile the page to HTML, you will see that the variables have filled out the pages title meta tag, description meta tag, charset, and language. There are also variables to use for filling in a theme name, and giving your page a body class. This KIT based page will also import, a variables file which you can add more variables to, the boilerplate header, boilerplate footer and links to the javascript files used by Ensemble. The space between <!--@import includes/generic-header --> and <!--@import includes/generic-footer --> is where you should insert your markup.

<!--$page-title = Ensemble :: Kit files-->
<!--$page-desc = Learn how to use the Ensemble CSS framework KIT language files -->
<!--$page-char = utf-8-->
<!--$page-lang = en-->
<!--$theme-name = docs-->
<!--$page-class = ensemble-kit-files-->
<!--@import includes/VARIABLES -->
<!--@import includes/generic-header -->
<!--@import includes/generic-sub-header -->

<!--@import includes/generic-footer -->
<!--@import includes/scripts -->