Bootstrap 3, SharePoint (2013 or 2010) and box-sizing

Coordinator
Sep 10, 2013 at 6:59 AM
Hi everyone,

I have been working on converting the new release of Bootstrap, Bootstrap 3, to SharePoint. I am starting with SharePoint 2013, but at this point, that is beside the point. I have run into a stumbling block that I have been waffling over, over these last few weeks. If you have encountered this issue in the past, or have any thoughts, I would like to know your opinion.

Here is the issue. in Bootstrap 2, Bootstrap set the box-sizing to border-box for a few important framework classes. This caused major havoc with SharePoint, so that first CSS fix we added was
*, *:before, *:after {
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
This fixed SP, but broke Bootstrap 2 and SP. Thus the next CSS we added was to reinstate border-box for just Bootstrap's span# classes, i.e.
* [class^="span"], * [class^="span"]:before, * [class^="span"]:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Except for a few outliers, this worked great.

Now with Bootstrap 3, that is not the case. Bootstrap 3 was built around the premise that ALL tags are reset to use box-sizing: border-box. If you look in 3's bootstrap.css, you will find the following CSS.
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
As we would expect this is breaking SharePoint. If we decide to reset back to content-box, then we would have to "turn-on" border-box for specific tags. Which ones though? considering Bootstrap 3 is expecting border-box for ALL tags.

My Question

For Bootstrap 3 and SharePoint, who should we prefer be the default box-sizing, SP or Bootstrap? If we go with Bootstrap 3 and assume a box-sizing: border-box then we will have to find each and every tag within SharePoint that needs content-box and create a new style to re-override the box-sizing. If on the other hand we reset the default box-sizing to content-box then we now have to find every Bootstrap 3 styled tag and make sure this uses border-box again.

Frustrating.

If we go with "border-box", then we can blanket large blocks of SP HTML such as the ribbon and tell the ribbon and all of its children to use content-box very easily, but we need to find each of those blocks/tags.

Or we can go with "content-box" and find where Bootstrap 3's scaffolding breaks and reset the box-sizing. We just have to find all of those tags. Time consuming as well.

What do you think?

Eric
Sep 24, 2013 at 3:26 PM
Ironically, IE6 originally used this model of calculating padding/margin inside verses outside the boxes. It's definitely a time-slug either way you look at it. Finding every place where SP requires a change might too far too difficult and you will end up with an inevitable "glitch" here and there while browsing around. I would think it to be easier to make the changes within the framework personally.
Sep 24, 2013 at 10:15 PM
I agree with Shane's comment. It maybe better to contain all the required changes to the framework than the other way around.
Sep 24, 2013 at 11:17 PM
Eric, is this issue the current roadblock that is stopping you from having a beta version. If so, ping me so I can probably assist you.
Coordinator
Sep 29, 2013 at 6:18 AM
Edited Sep 29, 2013 at 6:23 AM
I appreciate the additional feedback. I have to agree with this general line of thinking although I look at it from the perspective that I do not like "breaking" SharePoint and then looking to fix it when added bugs arise. Seems scary considering just how much code/CSS SharePoint provides OOTB.

The counter argument I heard was that the reason why we are using a framework such as B3 is because the SP interface is lacking. Therefore keep the new B3 framework and break SP. Then fix SP as needed. So far is looks like the primary bugs caused by this approach are in the ribbon, which is easy enough to fix (Thank you brunetu for your insight). It would be whack-a-mole though as I am sure this will cause more issues in less used areas.

I still prefer the approach of not breaking SP straight up. I know that there are many SP branding gurus out there that disagree with me, but I prefer as light hand approach as possible. It takes more finesse for sure, but I think a better outcome.

Anyhow, I had the code base ready to go and another few issues arose so I wanted to go through another round of testing. I am trying to get an alpha out ASAP as there have been many requests to help test.

I appreciate everyone's patience.

Eric

PS, ShanePerran, yes, you are quite right. I find it very ironic that back in the IE 5.5/6 days we used the border-box styling as that is what that browser did and then IE 7 "fixed" this to be in line with W3C and other browsers. We used to have to use a box model hack to get IE 6- to work with the new box sizing. Oh the days of browsers wars. Anyhow, the "correct" sizing method is the content box model, yet now in days of responsive we want to go back to the border-box. Funny, yet sad.
Sep 30, 2013 at 4:29 PM
Hi Eric,

Speaking only for myself, would it be possible for you to make available the pre-alpha version that you have ? That would unblock my work (and many other people's work), even taking into account that it is a pre-alpha and things might/will probably change.

Just my 0.02.

TIA,

Bruno
Oct 1, 2013 at 9:46 AM
Thanks Eric for releasing the alpha.
Coordinator
Oct 1, 2013 at 9:03 PM
Bruno,

We just moved our dev environment to a new Cloudshare enterprise environment and although it is a nice improvement, it too even more time than I had hoped. We also brought on a few more devs to this project and they offered a really cool VS solution that includes B2, B2, Foundation 3 and Foundation 4. It is already available via the project SVN but I am working to get this up with documentation asap as well. Then back to updating B3 with fixes everyone finds.

As always I appreciate everyone's patience, feedback and support.

Eric
Nov 8, 2013 at 2:32 PM
How is the progress on this? I am also interested in the SP2010 port for Bootstrap 3.0 how is that going and do you need any help?

Thanks,
Roger
Coordinator
Nov 13, 2013 at 6:20 AM
Hi All,

We will be coordinating any news on B3 for SP 2010 in the following thread.

https://responsivesharepoint.codeplex.com/discussions/467236

Eric