Branding SharePoint with .less

This is the first article of 6 that will be written, as always, when I have got the time for it. In this series I will first try to explain why you should use .less in SharePoint UI development and how you should do it to get all the benefits. First to get started follow the instructions in the post Dotless and SharePoint 2010 to enabled the .less deployment from Visual Studio. Now where do you go next ? You can start by reading the small post Developing SharePoint Interface to get you started with a way to think when it comes to how you can structure you front end code It is essential to separate certain artifacts to enable separation from different techniques when it comes to developing and therefore also separate pure design techniques from those that should more be used for logical purposes in the UI. ( such as JavaScript ) To really see the benefits with .less in SharePoint you have to understand the advantage of using this technique. .less uses less syntax to compile one or a set of less files into one or several css files. The most rewarding with less is that it is so similar to regular css syntax. If you know css you will know less. .less makes it easier to write css, by not having the troubles with writing long expressions over and over again, that's the main benefit of using this technique. You will get a better overview of what you are developing and people after you will have a better understanding on what you have done. Read more about less Read more about .less.

Better overview

Instead of having thousand of rows of codes in css files you will have a couple of hundred at top in each less file and that is an understatement that this will make it much easier to read. You don't have to re-write all selectors as .less supports hierarchial css structure. So instead of writing:

#s4-workspace tr.ms-WPHeader>td,  
#s4-workspace div.ms-WPHeader>td,
#s4-workspace tr.ms-WPHeader>div,
#s4-workspace div.ms-WPHeader>div{
         border:0px !important;
}

You can just write:

#s4-workspace {  
    tr.ms-WPHeader, div.ms-WPHeader {
        &>td, &>div {
            border: 0px !important;
        }
}

Separating the structure of CSS in logical files

The actual less that will set the design/brand should be separated into several files. When it comes to SharePoint I have experienced that this setup is a good first point of view as a best practice. The following files should be placed in your branding project under a folder called "less".

These are the files which I am used to order my less files in.

• framework.less
• variables/globals.less
• elements.less
• grid.less
• layout.less
• navigation.less
• ribbon.less
• menu.less
• webparts.less
• ribbon.less
• mysite.less
• search.less
• customer.less

 

framework.less

The framework less file is the base of all less files. It's the puppet master the pulls all strings to make the whole setup work as a whole. It mainly just imports the different less files to make the compiler combine all these less files into one css file when building your project. You can of course have several framework files if you for example want to have multiple css files to include on different pages. One rule is to always import the file containing your variables and functions the first thing you do to make these variables available for the rest of the less files.

// ** Example of framework less ********

// my globals
@import "Variables/globals.less";

// base html elements 
@import "elements.less";

// grid definition 
@import "grid.less";

// base SharePoint layout elements 
@import "layout.less";

// all navigation, global and quick lanch, bread crumb
@import "navigation.less";

// the SharePoint ribbon 
@import "ribbon.less";

//  menus such as site action, welcome menu, web part menu etc
@import "menu.less";

//  web parts containers and content
@import "webpart.less";

// design for elements inside of the dialog 
@import "dialog.less";

// my site design  
@import "mysite.less";

// search center and everything that has something to do with search 
@import "search.less";

// customer specific design implementation, custom elements 
@import "customer.less";

As you can see the imports of the different less files are in a specific order.  First we import the global.less which is where our most important variables are. Then we import the rest of the files where the design settings are in a falling order. You want all the customer specific implementation that is not an out of the box implementation to come in last.

Variables/Globals.less

Setting variables for things like main font, header fonts, link color, background image path makes it a lot easier to have a base design that you can change fast just by changing this variables and you do not have to go through all css to change things around. This is really really good when you for instance want to create a demo fast for a potential customer. I always have a generic graphical appealing base design where I can fast can change colors, fonts and images just for demo purposes.

// ***** Example of globals.less *********  
// sizes
@page-width: auto;
@page-max-width: 1140px;
@page-min-width: 960px;

// fonts
@main-fontfamily: "Arial";
@main-headerfont: "Arial";

// images
@image-root: '../../images/Customer';

// links
@link-color: #E37222;
@link-hover-color: #8a1020;

// global classes
.resetall {
    padding:0px !important;
    height:auto !important;
    margin:0px !important; 
    border:0px !important;
    background:transparent !important;
}

.pageWidth {

    width: @page-width !important;
    max-width:@page-max-width  !important;
    min-width:@page-min-width  !important;
}

This is just a simple example how the globals.less can look like. This one defines page sizes, fonts, images location, link colors and defines two global classes that can be reused by every other css class or element in the other less files. The power of using this is more than just use variables and classes. Implement functions that can calculate grid width's, different sizes on elements, font sizes. Make everything relatively set to one base unit.

The chains that you are entangled with using standard css development do not exist here no more. We can more freely and easily create the design we want, even in SharePoint. Everything will go much faster to develop when you don't have to search among thousands of rows of css to change things around. As you spend less time to implement it leaves more time to be creative and come up with more inventive designs.

This technique has surely changed the way I develop css based designs and I promise that it will change yours if you just give it a try.

In later posts I will go more deeper into my less files and try to explain how you can use them to bend SharePoint design at your will without breaking the SharePoint functionality.

Next Part: Branding the Ribbon  >>

//Magnus Hansson