Bootstrap... Experience editor few fixes

I am sure you all love Bootstrap. We are using the framework quite a lot here and save us quite a lots of time in development for Responsive. It offers banner carousel and plenty of other things that gives you a good quick and easy start... If you don't know it yet, you can check it out: http://getbootstrap.com/
Another great thing about it is it works with Sass and Less.

Well one thing I noticed when putting it all into Sitecore 8 is that the some element on the Experience Editor was a little off. For instance, on the Nav Bar when selecting a child page you will see the following:

There is also a few missaligned buttons, and the Add Here buttons when selecting "Components" are displaying a little funny:

Well those are not really too annoying as it does not affect the functionalities but it make the User experience a bit better. So a quick solution is to create a specific Stylesheet for the Experience Editor in which we will be able to add any style specific for displaying the pages on the experience editor. Having those in a separate Stylesheet will means that those will not increase the size of the CSS file for the Live website. Well not that this file will be too big though. So here we go:

The first thing to do is to create a CSS file:

Now on our layout, lets make sure this file is loaded only when the page is in Editor mode

All good, well know what can we put in there to make it better in Experience editor:

.scInsertionHandleCenter{box-sizing: content-box !important;  -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; }
.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; }