Menu icon Foundation
Constrain foundation styles to container

I am building a template using foundation to be used within MS Sharepoint.

In the Prepare the HTML file for conversion section of the MS documentation there are a couple of recommendations -http://msdn.microsoft.com/en-us/library/office/jj822370(v=office.15).aspx#Prepare

But the most important one is:

- Be cautious about applying styles to general HTML tags like <body>, <div>, and < img>. Everything within your SharePoint design, including the ribbon, is within the <body> tag. For styles that you would usually apply to the <body> tag, consider applying them instead to <div id="s4-bodyContainer">, which is a tag that SharePoint 2013 uses for the main body of the page. Also, SharePoint 2013 uses many images that are affected by whatever styles you apply to the <img> tag.
            

         

Is there a simple way to constrain all foundation styling to be within #s4-bodyContainer or similar. I understand I can get in there and hack away but it would be great to have a scalable code base in case any new versions come out etc.

Sharepoint

I am building a template using foundation to be used within MS Sharepoint.

In the Prepare the HTML file for conversion section of the MS documentation there are a couple of recommendations -http://msdn.microsoft.com/en-us/library/office/jj822370(v=office.15).aspx#Prepare

But the most important one is:

- Be cautious about applying styles to general HTML tags like <body>, <div>, and < img>. Everything within your SharePoint design, including the ribbon, is within the <body> tag. For styles that you would usually apply to the <body> tag, consider applying them instead to <div id="s4-bodyContainer">, which is a tag that SharePoint 2013 uses for the main body of the page. Also, SharePoint 2013 uses many images that are affected by whatever styles you apply to the <img> tag.
            

         

Is there a simple way to constrain all foundation styling to be within #s4-bodyContainer or similar. I understand I can get in there and hack away but it would be great to have a scalable code base in case any new versions come out etc.

Joel Kinzel over 5 years ago

You could download the SASS files, and then wrap everything in a "foundation" class. That would name-space everything so that it had to be under the container w/that class.