Using the Dot Less Framework to Implement Real Time Styling in SharePoint

Dynamics 101 29 August 2013 0




In this article we will see how we can use the highly scalable and cool .less framework in SharePoint branding. Dot less (as it is pronounced) has become the new mantra of web designers and its logical way of implementation is going to make it a big hit going ahead. Hence, SharePoint branding needs to adapt to using .less more and more in future.

We will proceed with the following assumptions:

  • Reader is aware of .less concepts (for details visit this link). It is recommended that the user goes through the documentation of .LESS once.
  • Reader is aware of SharePoint branding concepts and knows how to make css changes.
  • Reader has visual studio installed to build the branding solution for SharePoint using .less (dot less framework).

Ideally to ease the deployment process and to follow best practise we should create separate projects for branding files and UI logic.

Let us define the separate projects:

  • Branding (it will contain the branding elements like images, css, .less etc.)
  • UI Components (it will contain the UI components like master page, page layouts, js (for UI), user controls etc.)

We are assuming that you have already downloaded the .less compiler (MSDN link). Put the executable (dotless.compiler.exe) in a folder (name it as LESS). The main function of the executable compiler is to take the .less files and minify them to one .css which will be referred in our SharePoint master page for universal branding.

You can use .LESS extensions for visual studio for familiar and user friendly syntax highlighting.

The important part of the less compilation is to add the compiler to the visual studio build event. For achieving the same we will create a pre-build event command line which will look similar to this:

$(ProjectDir)LESS\dotless.compiler.exe -m $(ProjectDir)LESS\framework.less $(ProjectDir)Styles\branding\framework.min.css

The above command minifies the framework.less file to a file called framework.min.css which will be under folder Styles\branding.

Here we need to keep one important thing in mind. We can combine many .less files to a single .css file. Some developers might think that this is not the right approach as we are losing logical demarcation between .css files. But in a .less scenario this is the best practise. The .less files give the developer logical demarcation of all implementations. Then we have one single minified .css file to refer in our master pages. In this process we save the multiple requests to the server (in the case of multiple .css files) to improve performance.

To follow best practices and fast deployments we should create a deployment configuration. In the project properties navigate to SharePoint -> navigate to new active configuration -> provide a name -> then select a deployment step -> copy to SharePoint root  -> set this as an active configuration .

Refer to the screenshot below:

SharePoint real time styling using .less framework

In case you do not have the CSK development tool kit installed, you can refer to this link.

Now, whenever we modify with the less file and make certain changes to it, we need to build the Branding project only and deploy the same without touching the UI Components project. The Branding project build event will create the minified .css from the .less files and place it in the location mentioned (in this case styles library) which is referred in the master page.

Any comments or questions? Would love to hear them.

Research for this post was provided by Dynamics101.com, which provides SharePoint Online Training.




Dynamics 101 (2 Posts)

Leave A Response »