Building Static Sites with Kit and LESS – Part I

By . in Coding. Updated on .

In this post, we are going to walk you through a project. In the project, we will create a static HTML website, and we will be using Kit Language for constructing the HTML pages, and LESS CSS as the styling language.

If you followed our previous article on “Kit” introduction, you will find that it allows us to use variables and import external files, making it easy to manage a project with a large number of HTML pages.

Since “Kit” is a Codekit proprietary language and is also the only application that supports it at the moment (of this writing), you have to first install Codekit. It is available for $28. You can give the application a try via the trial version, which generously includes all features and capabilities.

Recommended Reading: LESS CSS Tutorial — Designing A Slick Menu Navigation Bar

Getting Started

Let’s create a new folder for our project and name it, for instance, “mysite”. In the folder, we create three folders named “kit”, “less”, “assets”.

The “kit” folder will contain the .kit files. In it, create a new folder named “inc” to save partial .kit files that will later be included into other files.

Similarly, we will create an “inc” folder under the “less” folder.

Lastly, the “assets” folder will contain the project’s CSS, JavaScript, and Images. Let’s create 3 more folders in it: “css”, “js”, and “img”. At the end, the project directory structure should look like this:

  -- assets
  	  -- css
   	  -- img
  	  -- js
  -- kit
      -- inc
  -- less
      -- inc

Launch Codekit. Drag and drop the project folder on to the application window to add it as a “Codekit Project”.

Creating the Files

One of the advantages of using Kit – as well as other similar languages like Haml or Jade – is that we can slice the documents into several partial files.

We can save the document’s header in “header.kit”, or use “footer.kit” for the document’s footer. When we make a change in “header.kit”, for an example, it will reflect on other pages where “header.kit” is included. This saves us a lot of time since the files need not be edited separately.

Kit Files

In this project, we create the following Kit files and saved them in “inc” folder:

  • “doc-open.kit” – contains stuff that open HTML documents that include the DOCTYPE, and the <head> tag.
  • “doc-close.kit” – contains the stuff to close the HTML document. We will put the </html> and </body> in it.
  • “header.kit”, “footer.kit”, “sidebar.kit”, “navigation.kit” – these files respectively contain the HTML structure for the document’s header, footer, sidebar, and the menu navigation.

And we create these Kit files below directly under the “kit” folder:

  • “index.kit” – this will be the homepage of the website.
  • “page.kit” – this is the second page of the website.
  -- assets
      -- css
      -- img
      -- js
  -- kit
      -- inc
          -- doc-close.kit
          -- doc-open.kit
          -- footer.kit
          -- header.kit
          -- navigation.kit
          -- sidebar.kit
      -- index.kit
      -- page.kit
  -- less
      -- inc

We limit the website in this project to only 2 pages, so the tutorial would not be overwhelming but you can have as many pages as you want in an actual project.

LESS Files

We also create the LESS files in a similar structure. In addition, we will also utilize a LESS mixin library name LESSHat. So that we will be able to write our LESS codes faster and in simpler form. The following screenshot shows all the project’s LESS files.

.
  -- assets
      -- css
      -- img
      -- js
  -- kit
      -- inc
          -- doc-close.kit
          -- doc-open.kit
          -- footer.kit
          -- header.kit
          -- navigation.kit
          -- sidebar.kit
      -- index.kit
      -- page.kit
  -- less
      -- inc
          -- footer.less
          -- header.less
          -- lesshat.less
          -- navigation.less
          -- sidebar.less
      -- style.less

They are also listed in Codekit.

Kit SyntaxHighligting

Kit Language is basically HTML with special features. The problem is that the .kit extension is unknown by most code editors. If we open it, the code editor could not present it with proper color syntax highlighting automatically.

If you are using SublimeText, you can follow the following trick to enable syntax highlighting for Kit Language:

First, install PackageResourceViewer in SublimeText. This plugin allows us to quickly open SublimeText core packages. Once it has been installed, launch Command Palette – Cmd + Shift + P – and search “Open Resource”, without the quote.

Then, navigate to HTML > HTML.tmLanguage. In it you will see a list of extensions wrapped withing <string> tag. Add the support for .kit extension by including <string>kit</string> between the list. Save the file, and restart SublimeText.

The .kit file extension would be identified as an HTML file, and should also be given proper syntax color highlighting as HTML.

Output Path

All the files that we have created are listed in Codekit. Codekit will watch all these files and compile them when the changes are in place. By default, the compiled files will be saved at the same directory level as the source file, whereas all our project’s assets such as the CSS should be saved in the “assets” folder.

So, we need to configure the output path. Let’s enable the project-level setting.

LESS CSS output path

In the Setting page, navigate to the “Less” tab at the left sidebar. Select “To this path:” option. Enter /assets/css/ as the output path, and set the “Relative to” option to “The project’s root folder”, as follow.

Scroll-down the application window a little, and click the Apply Output Paths button to confirm the above configuration.

Kit output path

Kit compiles into HTML. We will save all HTML documents directly under the project root directory. Navigate to “Kit” tab. It is similar to the “Less” configuration that we have accomplished above. We select “To this path:” option. Enter / as the output path, and set the “Relative to” option to “The project’s root folder”.

Click the Apply Output Paths button at last.

To Be Continued

This is the end of our tutorial, Part 1. To sum up, we have set the project files, structure, and configuration. Next, we will start developing the website with Kit and LESS. So, stay tuned.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail