Monday, June 24, 2013

why twitter bootstrap breaks sharepoint design

one of the reasons i found is:

Twitter bootstrap in its CSS uses attribute filter like this:
.row-fluid [class*=span] {....}
that fit all elements with classname containing "span", while bootstrap uses only span1...span12 class names.

And this rule is is often applyed to sharepoint native dom elements like
<span class="ms-siteactions-imgspan">...</span>
Workaround is to replace all [class*=span] places for [class^=span] - this will fit all tags class="spanX"