Configure Site to Run Kickstrap and Less in IIS

As I already stated previously that LESS will not run locally when you click on your HTML file, I will show you how to configure a site in IIS 8 that will load Kickstrap pages which contains LESS.

This post assume you have created a new site. And also, I am running IIS 8.

Basically, it’s very simple to run Kickstrap and LESS in IIS. All we need to do is add new MIME type for .less and .ks

Go to IIS and select the Web Site you want to configure. Double click on MIME Types under IIS section.

On the right side menu, Actions, click Add.

On Add MIME type window, type in following information and click OK:

File name extension: .less
MIME type: text/css

Do the same thing for Kickstrap configuration file:

File name extension: .ks
MIME type: text/plain

My First Hand on Kickstrap and Less

Kickstrap is cool and all, make your life easy when it comes to installing app, theme and ui widget. It allows you to drop in a folder (depend on its purpose, it contains CSS file, JavaScript file, and a Kickstrap configuration file) to add an app / theme / bootstrap UI to your site. All you need to do to activate this app / theme / bootstrap UI is edit the Kicktrap setting file and it will show up in your site. No more need to add each app / theme / bootstrap UI ‘s CSS and JavaScript files to your HTML markup.

One downside of using Kickstrap is it’s using .less extension. LESS is a new way to write CSS, introducing variables, operations, and functions. Think about programming language to generate CSS. LESS is compiled to .css in browser using {less} JavaScript. You can also compile .less file to CSS using third party app like (Mac OS) and WinLess (Windows).

Although .less is promising, the application and usage in developer community is still yet to be proven. I myself encounters problems with .less file extension when trying to run Kickstrap. Firstly, you can’t run your HTML file, that contains link to LESS, locally anymore. This is because, to compile LESS to CSS, a browser will need LESS JavaScript (LESS.js) and LESS JavaScript will not run locally. In another words, you have to set up a web server (IIS, Apache, etc) to see how your HTML page looks like.

“That’s ok.”, I convince myself. “I will set up my IIS to host my HTML file that contains link to LESS”. Well, after setting up the a web server (IIS in my case), the default site’s settings are not set to take LESS file extension. To do this, I have to add new MIME type to my site. See this post on how to solve this problem.

The same thing happens to .KS file, a configuration file for each app / theme / bootstrap UI in Kickstrap. I had to set my site’s MIME type to take .KS as well.

I mentioned before that you can compile LESS to CSS with third party tools. The idea is to develop CSS in LESS-way, easier and faster, then compile it to CSS to be included in HTML file. Some developers choose to include LESS file the HTML files instead and have LESS JavaScript to compile it on the browser, but this adds another point of failure, in addition to page load time. The decision is yours to make. Although you can compile LESS to CSS, you can’t do this with Kickstrap’s LESS files. Kickstrap is depended upon LESS file, mainly to set its root directory and apps to run (see this Kickstrap Setting link).

Kickstrap is still in beta version (as of this writing) but it’s already look very nice and bright. Whether to use this in your production environment is another question.