Reinoud van Dalen

December 14, 2015

Get started with Sitecore and Bootstrap

Lately I found myself adding the same templates and renderings over and over again because I wanted to add Bootstrap to my Sitecore solution. But not anymore, now there’s a Nuget package for that!

How to install

1. Install the Sc.Mvc.Bootstrap package from nuget

Just go to the Package Manager Console and execute:

PM > Install-Package Sc.Mvc.Bootstrap.

It will automatically try to resolve the following dependencies:

  • Microsoft.AspNet.Mvc ≥ 5.1.1
  • Microsoft.AspNet.Web.Optimization ≥ 1.1.3
  • Bootstrap ≥ 3.3.5

2. Install or use DynamicPlaceholders implementation of choice

This package actually depends on a DynamicPlaceholders implementation that has the ‘DynamicPlaceholder’ extension on the SitecoreHelper class. I did not want to tie this project to a specific implementation. And since the methods are only used in views I was able to compile the project without the implementation.
You could, for instance, install the Sitecore.Support.DynamicPlaceholder package but I can imagine you might already have a custom solution since it is such a well known one within the community.

Caution! Make sure you add the namespace for the DynamicPlaceholder extension in the web.config of the views folder. For Sitecore.Support.DynamicPlaceholder it would look like:

<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="Sitecore.Mvc" />
<add namespace="Sitecore.Mvc.Presentation" />
<add namespace="Sitecore.Support"/>
</namespaces>
</pages>

3. Update Newtonsoft.Json

I noticed that Sitecore 8.1 uses Newtonsoft.Json 6.0.5 but the bootstrap package will install a lower version. Sitecore does not sit well with that so my advice is to run an update command (if you havent got the right version installed already):

PM > Update-Package Newtonsoft.Json -Version 6.0.5

4. Install the Sitecore package located in /App_Data/Sitecore packages/Sc.Mvc.Bootstrap-1.0.0.zip

Finally install the package delivered in the App_Data folder. This package contains: a layout, placeholder settings, renderings, module content, templates and a custom control for selecting css classes.

And that's it!

How to use

When you have the package installed and running you can add a new page using the ‘Bootstrap page’ template. When you open the new page in the xEditor you can add your container, rows and columns.

Add a Bootstrap page

undefined

Open the xEditor and add a container to the body placeholder

undefined

undefined

Add a row

undefined

Add a column, open the properties and set the size to col-md-8 and push to col-md-push-2

undefined

undefined

undefined

Add more rows and columns (ie. 3x col-md-4)

undefined

This setup is very flexible and allows you to compose your layout and even makes sure you do not have multiple column sizes per segment using the custom Bootstrap Css Treelist control.

undefined

You can manage the classes available in the /system/modules/Mvc Bootstrap folder:

 undefined

Notes and thoughts

This is a humble first release of the package and beholds a basic implementation, exposing the Bootstrap Grid.

Views included

I might include the compiled views in the future. That would be nice, but I think it’s easier to just include them as content.

This does mean that upgrading after you modified the views you will have some comparing to do. But I suspect it will be minimal.

Too flexible, need presets

This setup is so very flexible that creating a page and adding a content component requires you to first add 3 bootstrap components. A lot of work you probably do not want to do every time. So I’m looking for an additional solution allowing you to define a preset of partial layouts and inject precompiled combinations. This challenge is somewhere at the top of my list.

Edit: I just released another package and blog for this: http://reinoudvandalen.nl/blog/sitecore-partial-layout-presets/

Multisite placeholder settings

So probably the column placeholder is the place where you’ll add the content components, but if you have a multi site setup you cannot separate the allowed controls to add. For that you could use the Sc.Commons.SitePlaceholders package.

Editing the parameters/properties

If you want to edit the parameter values you need to perform 3 clicks before the properties modal window is opened. And even then the modal window is polluted with cache settings and other stuff you do not want the editor to see regularly. I think there are several blogs about making something for this and I know the Jetstream demo includes a custom window for editing parameters. The company I work with actually has a private package for it. So that’s something I would definitely install to get that editor experience a bit better.

To be continued

As you can see there is definitely room for improvement and I guess the next step could be to create packages for content component as well. I would really like a presets solution so that’s where I will probably be blogging about the next time.

Would love to hear your thoughts though and hope this is useful to anyone.

Nuget: https://www.nuget.org/packages/Sc.Mvc.Bootstrap/1.0.0
GitHub: https://github.com/RvanDalen/Sc.Mvc.Bootstrap

TAGS: sitecore bootstrap accelerate dynamicplaceholders


Comments
Mark Ursino

This is a great module, thanks for sharing! I just tested it out on Sitecore 8.1 and after fixing a few assembly redirects I was able to get Experience Editor up. I tried to add a container and save but I'm getting a generic error. The log is saying 'Sitecore.Mvc.Helpers.SitecoreHelper' does not contain a definition for 'DynamicPlaceholder' even though I do have Sitecore.Support.MvcDynamicPlaceholders.dll in place. Any thoughts? Thanks again


Reinoud van Dalen

Hi Mark, thanks man. Let me sort that out for you ;) Edit: fixed it. Need to add the namespace for the DynamicPlaceholder extension in the view's web.config. Also added a step for updating Newtonsoft.Json