As you delve into the world of SharePoint customization, you will quickly realize that sometimes “things just pop up”. This is mostly due to the fact that there is a lot of default code we are working with and around.
I ran into this recently and thought it might help others that fall into the same trap. I leveraged the Skeleton Framework in a fairly extensively designed and responsive 2010 site. Skeleton is a responsive (fixed width) grid system that basically gives you 16 columns to work with for rapid prototyping. Rather that specifying fixed widths, you specify columns. <div class=”two columns”> <div class=”fourteen columns”>. You apply your grid over the photoshop design and can quickly translate that into an HTML design. It also translates well when you have to eventually hand the design off to someone else which was the case in this instance.
The issue I learned was that the grid system actually leverages a class named container, in fact container is the basis of the entire column based grid system. This caused issue in SharePoint when a user selected “Site Columns” from Site Settings and then tried to select the “Managed Meta Data” option. Long story short when you select that option a bunch of new options are rendered to the page. One of the other things that happens is a new style sheet is referenced, “MetaDataManager.css” and inside this style sheet lives a class with a fixed width called…. you guessed it container.
I had to go back to the Skeleton Grid System and rename all the grid system classes changing all instances of container, to clientname_container.
As a general rule, one of the best tips I could give anyone would be to prefix any custom css classes to ensure you don’t run into duplicates. I commonly use clientname_classname, but that’s a personal preference.
Good luck and hope it helps,