Today I figured i would mention a topic that comes up a lot with SharePoint, especially with designers that are just starting out and just need something basic to build upon to create a nice looking SharePoint site: basic bootstrap design.
Now if all you wish is to make SharePoint more responsive, then there might be a simpler option at hand from the hands of the PnP team: https://github.com/OfficeDev/PnP-Partner-Pack/tree/master/OfficeDevPnP.PartnerPack.SiteProvisioning/OfficeDevPnP.PartnerPack.SiteProvisioning/Templates/Responsive
However if you want the simplest, cheapest way to introduce true bootstrap design on your SharePoint site, then check out BindTuning’s free Bootstrap theme:
BindTuning is a company of designers out of Lisbon that build design packages for a lot of platforms, including SharePoint, and their model is simple:
An important note here is that this will introduce a custom masterpage to your site, which may not be a great option for collaboration sites (team sites and similar, where the above mentioned responsive design may be better suited), however for publishing portals (intranets and similar) it might actually be a good thing because it gives you another layer of control before Microsoft updates hits your users and introduces design changes.
Ok, so on to my little guide to show you how to deploy the theme in SharePoint Online:
Right away you will see a live preview with a side panel for customizations.
In the first tab, select a base color scheme (with current trends, less is more as they say, so try selecting one with one or just a few base colors)
Now if you already have a public web site with a company color scheme that you wish to use, BindTuning does have a “Magic wand” tool that allows you to fetch the design and apply it to your preview, try it if you want with any web site you wish, here I have selected the color scheme from http://www.ferrari.com/:
Next just drill down into the “customize” tab to set colors/width/sections/text/tokens etc.. If you are familiar with design these things should be quite familiar, and if not then there’s a live preview to show you what changing settings does. Easy right?
Once you are done, try resizing your page width or emulating different devices using the preset bottom buttons for desktop/tablet/mobile and if everything looks good, save your configuration (it’ll get saved to your bindtuning account), then hit the Get theme button on the bottom:
Your theme will now enter a queue to be processed, so depending on the current load it should be ready within ten to fifteen minutes (they will also send you an email notification once it’s ready):
Before you upload it, there are a few things that you need to take care of on the site collection where you upload your theme:
So now we’re ready to deploy our solution and activate our bootstrap package, but first we might want to just have a look inside our solution to see what we will deploy, and for this we can use any archive program that supports cab files.
The package you download will be a .zip file with a wsp package, but a wsp file is basically just a compressed container that contains all the files we will deploy (plus some manifest files that tells SharePoint how to deploy these things, but that is not important).
I made a copy of the file, renamed it to .cab and unpacked it. The results are shown here:
As you can see, it will deploy a bunch of page layouts and 3 masterpages in addition to css/image and js files that will be deployed to the Style Library. Once the package is deployed, you will be able to open and edit these files as you wish (there are also uncompressed css files for your theme that you can modify and edit, unless you want to just make your own, that is).
You can also make changes right here, then compress the files back to cab and rename the file to wsp if you want a quick and dirty way of editing a wsp package.
Once your solution is deployed and activated you should see something like this:
Now to use the new solution, you need to change out the default masterpage with the bootstrap page.
Go to Site Settings -> Master page, then select your new masterpage in the drop down menu.
You should now see that the layout changes, and you can start using your theme - to try out some of the page layouts, just go to the Page library and create a new Article page, then select one of the page layouts (I’ve chosen (Article Page)Image on left below).
This is just scratching the surface a bit though, as you can now fully use all the bootstrap functionality within SharePoint - including the grid, the classes, the modals and all other features.
If you go back to the live preview page on BindTuning, you will notice that the preview functions is an interactive documentation on how to use bootstrap features, if you want to e.g. add a slider to your front page, just go to Widgets -> Sliders and select “view code” on the example you want to use.
This concludes this mini-tutorial, but if you have any questions you can ask them in the comments below or just contact BindTuning themselves.