Sitecore 8: Making the Experience Editor go along with Twitter Bootstrap

We are using Twitter Bootstrap for a lot of our sites and we are also using the Sitecore Experience Editor for all its worth! Now in Sitecore 8 the Experience Editor has got a long needed facelift.

(This is a follow up on my previous post regarding the Sitecore 8 Upgrade Experience.) 

Thank you Sitecore for that! After upgrading one of our ongoing Projects to Sitecore 8 and having the client working with the page in the Experience Editor, we quickly found that certian areas didn't quite look like they should. The thing is that with Sitecore 8 the Experience Editor ribbon is now inserted into the page, and not in a iframe like in earlier Versions. This means that your custom css and frameworks could mess up the Sitecore Experience Editors buttons. At least it did With us. This was some of the things we got.

1. The Navigation bar conflicts with Bootstrap styling:

 

This was how it should look:

 

 I'll come back to the solution.  

 

2. Command buttons had wrong styling

For each Field type there is a ribbon With buttons. These buttons had bugs in the styling, like this:  

When correct it should look like the image above.

 

The quick fix solution

We reported this to Sitecore support, which suggested to turn of the custom.css tags. That is not so easy when the Whole site is build on Bootstrap. So what we did to fix it quick, was to add a "experienceeditor.css" only in Page Edit mode. It looks for now like this:

.scInsertionHandleCenter, .sc-breadcrumb .sc-breadcrumb-item-path, 
.sc-breadcrumb-item-path img, .scChromeCommand
{
      -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial;
}
.sc-breadcrumb-item-path img
{
        vertical-align: initial;
}
.sc-breadcrumb-item-path span
{
    font-size: 12px; 
}

It's not much, and we add to it when we see problems.

The better solution

We think Sitecore should take these styling into the Product, so that the Experience Editor is not affected by any custom.css added or atleast major frameworks like Twitter Bootstrap and Foundation. If not it's timeconsuming to test these things. Currently Sitecore support is looking into what they want to do With the case. This whas an update on our experiences with using Sitecore 8 and the Experience Editor to build great sites!