Tuesday, August 20, 2013

Integrating DotLess CSS with DotNetNuke(DNN)

As front-end developers and designers, we’re constantly in search more techniques to make the web more optimized. In this article I would like to share you some CSS optimization frameworks and integration of DotLess with Dot Net Nuke (DNN).





Dot Net Nuke (DNN):
The leading open source ASP.NET CMS, content management system and .NET web application development framework.
Learn more about DNN

What is LESS CSS ?
I have been hearing one of the CSS frameworks called LSScss framework. LESS - The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side  or client-side. Which is awesome.
Learn more about LESS Css .

Dot-LESS - Dynamic CSS for .NET
.less (pronounced dot-less) is a .NET port of the funky LESS JavaScript libary

How to Integrate Dot-LESS css with Dot Net Nuke (DNN) ?
These are the steps to integrate .less with DNN:

1. Download latest .less files from http://www.dotlesscss.org/

2. Unzip Downloaded Files.

3. Copy "dotless.Core.dll" from unzipped files  and paste in  "\bin" folder of DNN.
Location: C:\Users\Web\Documents\My Web Sites\dotnetnuke\bin

4. Find web.config file in your dotnetnuke folder and add following 

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

In <handlers>
<add name="dotless" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.LESS" verb="*" />

5. Download Less Javascript file from http://lesscss.org/
Add the javascript to your skin js folder and call the javascript in AddScripts.ascx 
<script src="js/less.js" type="text/javascript"></script>

6. Linking LESS css file to Dot Net Nuke
Create a .less file by just changing your .css file to .less file: styles.less
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />

That's it you are all set with integration of dot-less with dotnetnuke.

If you have any questions mail me at info@nithinchandrasr.com

Know me more : www.nithinchandrasr.com