ShareBoot – Responsive SharePoint 2013 Theme

Since the first release of Bootstrap a couple of years ago, I’ve been very keen to port it to SharePoint but too reluctant to do it on SharePoint 2010 due to countless design flaws, but once I had SharePoint 2013 ready to play there was nothing to stop me. And here it is, ShareBoot theme, a very clean and sleek responsive SharePoint 2013 theme powered by the most popular front-end toolkit for rapidly developing web applications.

But what is Bootstrap? Bootstrap is an open-source JavaScript framework developed by a bunch of Twitter geeks. It is a mixture of HTML/HTML5, CSS/CSS3, and JavaScript code and its purpose is to help web developers build responsive websites and web applications.

ShareBoot theme is designed to help you kickstart the development of a proper responsive SharePoint 2013 theme and to help you discover the workaround of a modern, intuitive, and powerful mobile first front-end framework. ShareBoot theme is not a “ready to go live” theme. More branding customization is required from you.

Installation

Download the ShareBoot.zip file and extract the files.

Go to “Site Settings” and under “Web Designer Galleries” area click on “Master pages and page layouts”. Create a new folder called ShareBoot. Of course you could call it whatever you like, which I don’t recommend until you’re familiar with the theme because you’ll have to change all the reference links in the theme, but for the purpose of this tutorial I will refer to as ShareBoot folder.

Inside ShareBoot folder create four folders called: css, images, fonts and js. Next, upload the necessary files provided in the ShareBoot package.

As you could see, there is another folder called html, which hold just the dummy content. Do not upload these files.

First, upload the main CSS file, ShareBoot.css under the newly created css folder. Click on the Files tab on the ribbon, and click “Upload Document”. On the pop-up window make sure you select “Design File” for the Content Type and hit Save button.

Same rules for all the design files (css, images, fonts and js).

Make sure you publish each updated design file by selecting from the drop-down menu “Publish a Major Version”.

Next, upload ShareBoot.master right under ShareBoot folder by selecting Files tab on the ribbon and then “Upload Document”. On the pop-up window make sure you select “ASP NET Master Page” for the Content Type, give your master page a name and a title, select version 15 and hit Save button.

Now, you need to upload the four page layouts provided in the ShareBoot package. (ShareBoot-Home.aspx, ShareBoot-Main.aspx, ShareBoot-Contact.aspx and ShareBoot-LeftNav.aspx)
Make sure you’re under ShareBoot folder, click on the Files tab on the ribbon, and click “Upload Document”. On the pop-up window select “Page Layout” Content Type, give your page layout a name and a title. For the Associated Content Type select “Page Layout Content Types” for the Group and “Article Page” for Content Type Name. Do the same for all four of them. After uploading all the files make sure you publish them!

Once all ShareBoot files were uploaded and published, go to your site and click on Settings >> “Site Settings” from the drop-down menu.

On the “Site Settings” page click on “Master page” link under “Look and Feel”. Once on the “Site Master Page Settings” make sure you have ShareBoot master page selected as Default and click OK. I don’t recommend changing the System Master Page, just leave the default on.

Next, go back to Site Settings and under “Look and Feel” click “Page layouts and site templates” and add all ShareBoot page layouts as preferred page layouts. See screenshot below.

Select “ShareBoot Main” as your new page layout default and hit OK.

To assign ShareBoot page layouts edit the page and from the “Page Layout” option under Page tab select the necessary page layout.
For home page select “ShareBoot Home”. For Contact page select “ShareBoot Contact”. For all other pages select “ShareBoot Main”.

NEW! The new version of ShareBoot theme has been updated with an extra page layout to include left navigation (ShareBoot-LeftNav.aspx).

To modify home page dummy content you need to play with the ShareBoot-Home.aspx page layout. As I mentioned before, ShareBoot theme is designed to help you get started with SharePoint 2013 branding. If you want to polish this theme you need to spend a bit more time on it.

Also included in the ShareBoot.zip package an optional “html” folder where you will find the HTML code used as dummy content for the mock-up pages.
If you want to see what I used for testing the theme and play with some Bootstrap features, just copy the HTML code and paste it in to the necessary content editor web part.

If you like the theme don’t forget to share or leave a comment and if you would like to show your appreciation a beer would do me nicely! Thank you and stay tuned for more SharePoint branding goodies!