Inconvenient Bootstrap and Sitecore Experience Management
Bootstrap is a great help when building modern websites but using it with Sitecore 8.0 XP requires additional thought.
Bootstrap - a web development accelerator
Bootstrap is a framework for building modern websites. Most known for its grid system, Bootstrap significantly simplifies building responsive websites. By leveraging the different components provided with Bootstrap you can quickly build HTML that works and looks great on the most popular devices.
Working with Bootstrap
Bootstrap is a set of CSS classes and JavaScript functions that define rules for rendering HTML in the browser. By applying the different CSS classes to your HTML you can define columns on your page or use the different components provided with Bootstrap. But this way of building HTML leads to problems when working with Sitecore 8.0 Experience Platform.
Sitecore Experience Platform
Many know Sitecore as the market-leading web content management system. Sitecore is however more than that. One of the biggest investments in its latest release was Experience Management that supports digital marketers in achieving marketing goals through digital communication channels.
Sitecore Experience Platform offers digital marketers rich capabilities but to be able to use them, Sitecore developers have to take Experience Management into account when building the website. And this is exactly when using Bootstrap becomes inconvenient.
Inconvenient Bootstrap and Sitecore Experience Management
The key concept that makes Experience Management with Sitecore possible is component-based development. The idea is that when building websites on the Sitecore platform, developers should break website into many components and use them to compose pages. This allows marketers to leverage the personalization capabilities of the Sitecore platform. By dynamically controlling content rendered on the website digital marketers can fully engage with their visitors.
The reason why Bootstrap makes this challenging is the fact that it mixes presentation with HTML markup. Since we stopped using tables for layout our goal was to build semantic HTML and define its presentation using CSS stylesheets. Such HTML is easier to parse and reuse.
Depending on where in the structure of your page you would put a block of HTML, it could look differently through CSS. This allows you to develop components once and reuse them throughout your website which not only is great from personalization point of view but also significantly lowers project complexity and development effort. Using Bootstrap however makes reusing components more difficult because Bootstrap CSS classes define exactly how a specific block of HTML looks like in a particular place on the page. So does that mean that if you want to fully benefit of the Sitecore Experience Platform you shouldn’t be using Bootstrap?
Bootstrap and Sitecore Experience Platform - better together
There are a few approaches that you could think of to support reusing components built with Bootstrap. One thing that you could think of might be dynamically appending Bootstrap classes based on when the component has been placed on the page. While this might work, you have to admit it, that it could make things very complex if a component was to be reused in different places on your website each looking slightly different and requiring different Bootstrap markup.
Another approach you could think of would be to use DisplayModes. With DisplayModes you could define different views for the different locations your component might be used in and which require different HTML to render the component. Even though this approach offers you more control and overview over the rendered HTML it still involves significant maintenance effort.
A more interesting idea, that my colleague Marnix found about, is to leverage the fact that Bootstrap is built using Less. This allows you to create your own CSS that leverages Bootstrap without requiring you to include its markup in your HTML. This approach has been described in more detail at http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html. Through this approach you would build semantic HTML which presentation is defined in CSS - where it belongs, and, what’s more important, allows you to build reusable components on the Sitecore Experience Platform without any impact on the content management system.
Summary
Bootstrap is a great framework for building responsive websites. Unfortunately by using its CSS classes in HTML it makes it difficult to build components that can be reused in different places throughout your website. Using components for building websites is essential for leveraging the Experience Management capabilities of the Sitecore 8.0 XP platform. By using alternative approaches, such as building your own stylesheets using Less, you can leverage both Bootstrap and Sitecore Experience Management at the same time.