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!
Just go to the Package Manager Console and execute:
PM > Install-Package Sc.Mvc.Bootstrap.
It will automatically try to resolve the following dependencies:
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>
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
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!
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
Open the xEditor and add a container to the body placeholder
Add a row
Add a column, open the properties and set the size to col-md-8 and push to col-md-push-2
Add more rows and columns (ie. 3x col-md-4)
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.
You can manage the classes available in the /system/modules/Mvc Bootstrap folder:
This is a humble first release of the package and beholds a basic implementation, exposing the Bootstrap Grid.
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.
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/
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.
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.
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.