Article
3 comments

What is inside your SharePoint CSS

What is inside the SharePoint CSS

Ever wondered what is defined in the corev15.css? Let’s take a little look to some statistics of this style sheet. Another thing I like to consider how you change the style sheets when additional frameworks such as bootstrap will be applied to SharePoint. Plus, we will take a look how SharePoint Style Sheets will be changed when an branding will be added based on Bootstrap.

Core Facts on the core15.css

During the last versions the core.css have become bigger and bigger, as functionalities did in SharePoint.
While SharePoint 2003 a small feature set with ever version new functionalities and user interface elements have been added.
Beside this improvement the style sheet has improved in the same way and was growing. By some key facts, lets see what is currently in.

CSS Statistics of Corev15.css

CSS Statistics of Corev15.css

Colors

According my statistic there are 124 unique colors and 123 unique background color definitions. These values seem to be a little bit too high. The thing is that SharePoint has some colors that have different hex, named or rgba value that look the same or differ just a little bit.

Fonts and font sizes

In the corev14.css there are several different definitions of font families that could be combined and re-grouped in the future to save space.
Another thing is that different font size declarations can be found that cover the whole spectrum of possible units. Percent, em, and pixel value can be found in the SharePoint Style Sheet. This is also something that could be optimized in the future. Personally, I like to work with ‘EM’ or at ‘REM’ values to keep the units consistent.

Unique vs. total declarations

The following diagram shows specific style sheet declarations.

Total versus unique declarations in corev15.css

Total versus unique declarations in corev15.css

This graph indicates that most of the declarations were reused throughout the corev15.css.

The Specificity Graph

Specifity Graph

Specifity Graph

This graph indicates how maintainable a style sheet is. I don’t like to go too much into detail. A blog post on csswizardry.com explain all the details how this graph is generated.

Rule set size

The last thing to take a look at is the rule set size. The following graphic shows that SharePoint has a lot of short rules.

Rule Set Size in corev15.css

Rule Set Size in corev15.css

Potentially the amount of rule sets could be reduced. The amount of rule sets defined in a have impact on the rendering performance in the browser. No big thing to a desktop, that’s what this style sheet is made for, but on mobile devices.

Overall

SharePoint is a huge platform, but the style sheets is well crafted. When you  Sure, some improvements could be made by grouping various classes, reducing font family, font size and color declarations.
May be we will see a further approved style sheet and html structure in the upcoming version.

SharePoint plus Bootstrap

May developer that brand SharePoint love to use bootstrap. Personally, I don’t use it because even large, responsive brandings are mostly smaller that the bootstrap itself.
To be honest, I was a little bit astounded that the file size of Twitter Bootstrap in the minified version is 123kb. The last time I take a look into it had only 86kb.
The current version of this framework adds additional 33% of the file size of the corev15.css.

Corev15.css and bare Bootstrap Framework included

Corev15.css and bare Bootstrap Framework included

Another thing is the amount of declarations have been increased by 3000 new declarations. The number of unique font sizes increased by 30 per cent and 25 per cent more colors were added. The problem as I see it, is that things from the framework are barely used in SharePoint.
Just by adding bootstrap you won’t get any functionality, but it makes an impact on the loading speed of SharePoint.

SharePoint plus Bootstrap plus custom branding

To get Bootstrap and custom branding running in SharePoint a lot of things needs to be customized. The master page for example that should be avoided, especially in Office 365. I saw some example of custom Bootstap-based branding that add to the framework more than 3500 extra lines of CSS to overwrite bootstrap and add SharePoint specific classes.
I found some a bootstrap branding example on the internet that I used for the following statistic to show how things changed with custom branding.

Corev15.css, Bootstrap and custom branding

Corev15.css, Bootstrap and custom branding

By applying the branding the file size of the corev15.css doubled. All style sheets together contain now more 14.000 declarations. This doubled the amount of declarations of the corev15.css. As expected additional colors was added as well as well as font-sizes and font families.

Things you should consider for your branding

From a SharePoint developer / developer perspective Bootstrap is pretty handy, easy to learn and using projects such as Responsive SharePoint easy to apply to SharePoint.
There is nothing against using such frameworks, but you should always take an eye on the file size of the overall style sheets. It might not make an impact the performance of a desktop computer, but it looks different if you are using a smart phone on a slow network connection.
Always make sure you test your Bootstrap based design on real devices or with different network connection speeds. Google Chrome as well as Internet Explorer or Edge has built in emulator to show the loading performance on different connection speeds.
Make sure the framework you use supports modularisation to reduce the file size. If you need a grid system use a flexible grid system such as Susy. Like to create a burger menu. Take a look at the sample on Office 365 Pattern and Practices by Heather Solomon.
Personally, I don’t use frameworks to create a responsive experience in SharePoint or Web Projects, as many web front end developers don’t use frameworks.
From my experience a complex responsive enterprise scaled branding weight less or slightly the same than the Bootstrap framework.
For example, I recently built a new responsive intranet on Office 365 for Microsoft Austria. The size of the style sheet is only 34kb.
Personally the web technologies have evolved and the time of such big frameworks is over. While they are still suitable for application development, they fail on web site branding. To show what can be done to replace a such framework I plan to publish the following blog posts show how making SharePoint responsive without a big framework. You don’t need to use a sledgehammer to crack a nut. Naturally, I will use SASS.

Finally I doubt that the upcoming versions of SharePoint will ever support Bootstrap. As a software vendor they won’t make themselves dependant on such community driven css framework. From my point of view one thing is sure. SharePoint will have an enhanced responsive experience.

You will also find the fully detailed reports of cssstats on lab.n8d.at: