.less (Dot Less), bootstrap 3 and font awesome in Asp.Net: configuration and workflow

Dot-less (www.dotlesscss.org), dot-less is a port of the popular LESS JavaScript library (lesscss.org) for the .NET platform.  It allows variables and mixins to define CSS styles in a more productive way.  The bootstrap (getbootstrap.com) is a flexible front end style framework based on LESS. Though there are many benefits of using bootstrap as the front end CSS framework to build a Web application, the CSS-based approach of using bootstrap requires one to write many bootstrap CSS classes in HTML. It is both ugly and not efficient for a big project and long term maintenance. Ideally we want to use bootstrap without mixing style formats and HTML code. This leads to use a LESS-only method to define all CSS styles in a Web application.

This article covers two subjects. First, we setup an ASP.NET project to use dotLess and configure it to work properly in both debug and release version. Then we define the workflow steps.

1.      Install and configure dotLess package

The following steps are based on Dino Esposito’s MSDN magazine article in http://msdn.microsoft.com/en-us/magazine/dn463774.aspx

1)      Use NuGet to install the latest DotLess package

PM> Install-Package dotLess

2)      Then add a new HttpHandler to Web.Config to support debug mode CSS file request from its LESS code.   There are two places: one for classic mode (IIS 6.0 or below) and one for integrated mdoe (IIS 7.0 and above)

<system.web><httpHandlers>

   <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />

</httpHandlers></system.web>

<system.webServer><handlers>
  <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
</handlers></system.webServer>

Optionally, we can specify a configuration section for the LESS/CSS request.

<configSections>
  <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
</configSections>

<dotless minifyCss="false" cache="true" web="false" />

3)      We need to configure bundling and minification

First, we need to use NuGet to install a LESS bundle transformer. A simple transformer described in the above MSDN article doesn’t understand file path. The System.Web.Optimization.Less package is what we want.

Then add all your less files to a bundle in your BundleConfig.cs

bundles.Add(new LessBundle("~/Content/Less").IncludeDirectory("~/Content/Less", "*.less"));

Finally, use the generated CSS file in your code Razor view file

@Styles.Render("~/Content/Less")

2.      The workflow

The bootstrap style workflow is based on the general bootstrap 3 less workflow tutorial described by Erik Flowers in his blog: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial.

We put all less files in ~/Content/Less folder. There are two sub folders: one is bootstrap and another one is local. The bootstrap folder has all the LESS files downloaded from bootstrap packages. We also need a ~/Content/fonts folder to store all fonts used by bootstrap fonts. Copy all bootstrap font files to this folder.

Then define our variables, mixins and page-specific LESS files in the local folder.

Finally, use a Style.less file to import all used LESS files in the ~/Content/Less folder.

To use font-awesome, we need to create a font-awesome folder in ~/Content/Less folder and copy all font-awesome LESS files to the folder. Then copy all its fonts to the ~/Content/fonts folder. We need to change its font path to

@fa-font-path:        "../../fonts";

To make the body use auto width and keep the bootstrap .container style, add the following styles instead of .container;

.container-fixed();