{"id":19716,"date":"2014-04-01T18:01:12","date_gmt":"2014-04-01T10:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19716"},"modified":"2022-09-02T18:21:16","modified_gmt":"2022-09-02T10:21:16","slug":"kit-static-website","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/kit-static-website\/","title":{"rendered":"Building Static Sites with Kit and LESS – Part I"},"content":{"rendered":"

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<\/a> for constructing the HTML pages, and LESS CSS as the styling language.<\/p>\n

If you followed our previous article<\/a> on \u201cKit\u201d introduction, you will find that it allows us to use variables and import external files<\/strong>, making it easy to manage a project with a large number of HTML pages.<\/p>\n

Since \u201cKit\u201d is a Codekit<\/a> 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<\/strong>. You can give the application a try via the trial version, which generously includes all features and capabilities.<\/p>\n

Recommended Reading:<\/strong> LESS CSS Tutorial \u2014 Designing A Slick Menu Navigation Bar<\/a><\/p>\n

Getting Started<\/h2>\n

Let\u2019s create a new folder for our project and name it, for instance, \u201cmysite\u201d. In the folder, we create three folders named \u201ckit\u201d, \u201cless\u201d, \u201cassets\u201d.<\/p>\n

The \u201ckit\u201d folder will contain the .kit<\/code> files. In it, create a new folder named \u201cinc\u201d to save partial .kit<\/code> files that will later be included into other files.<\/p>\n

Similarly, we will create an \u201cinc\u201d folder under the \u201cless\u201d folder.<\/p>\n

Lastly, the \u201cassets\u201d folder will contain the project\u2019s CSS, JavaScript, and Images. Let\u2019s create 3 more folders in it: \u201ccss\u201d, \u201cjs\u201d, and \u201cimg\u201d. At the end, the project directory structure should look like this:<\/p>\n

\r\n  -- assets\r\n  \t  -- css\r\n   \t  -- img\r\n  \t  -- js\r\n  -- kit\r\n  \u00a0   -- inc\r\n  -- less\r\n      -- inc\r\n<\/pre>\n
Launch Codekit. Drag and drop the project folder on to the application window to add it as a \u201cCodekit Project\u201d.<\/p>\n
\"\"<\/figure>\n
Creating the Files<\/h2>\n
One of the advantages of using Kit \u2013 as well as other similar languages like Haml<\/a> or Jade<\/a> \u2013 is that we can slice the documents into several partial files.<\/p>\n
We can save the document\u2019s header in \u201cheader.kit\u201d, or use \u201cfooter.kit\u201d for the document\u2019s footer. When we make a change in \u201cheader.kit\u201d, for an example, it will reflect on other pages where \u201cheader.kit\u201d is included. This saves us a lot of time since the files need not be edited separately.<\/p>\n
Kit Files<\/h3>\n
In this project, we create the following Kit files and saved them in \u201cinc\u201d folder:<\/p>\n