Menu icon Foundation
Apply Foundation Styles/Support to Specific DIV/HTML

Howdy,

I've come across a pretty interesting problem:

I'm working with some legacy site designs which I do not control the underlying HTML design for. The content is styled using Foundation - all placed withing a specific div (with a specific id). Basically the app can be skinned by a user by using an existing site design - we just inject our own HTML as the content, in this case: the content uses Foundation.

The content inside this div looks great! Foundation makes easy work styling and adding an incredible amount of functionality, with little HTML.

The problem is outside this div, where the legacy HTML lives.

Some of the layout/design is broken. I've come across this mostly with any form elements that may be present. The stylings made by Foundation can, in some cases blow out the design. For example, the text input box tries to take up as much width as possible and seem to even be scrolling off the page.

This is a longshot for sure, but I'm looking for a way to either:

* Have Foundation only take control of the layout/styling present in a specific div on my page,
-or-
* Have any easy way to disable any layout/styling from Foundation in anything *but* a specific div on my page (the opposite of the first idea, I guess). I have enough control that I can manipulate the HTML in a way to inject a new css class programmatically, but I'm not sure if there is such a thing to say, "hey, Foundation: don't touch this!"

Any leads or suggestions of similar problems?

Foundationstylescssforms

Howdy,

I've come across a pretty interesting problem:

I'm working with some legacy site designs which I do not control the underlying HTML design for. The content is styled using Foundation - all placed withing a specific div (with a specific id). Basically the app can be skinned by a user by using an existing site design - we just inject our own HTML as the content, in this case: the content uses Foundation.

The content inside this div looks great! Foundation makes easy work styling and adding an incredible amount of functionality, with little HTML.

The problem is outside this div, where the legacy HTML lives.

Some of the layout/design is broken. I've come across this mostly with any form elements that may be present. The stylings made by Foundation can, in some cases blow out the design. For example, the text input box tries to take up as much width as possible and seem to even be scrolling off the page.

This is a longshot for sure, but I'm looking for a way to either:

* Have Foundation only take control of the layout/styling present in a specific div on my page,
-or-
* Have any easy way to disable any layout/styling from Foundation in anything *but* a specific div on my page (the opposite of the first idea, I guess). I have enough control that I can manipulate the HTML in a way to inject a new css class programmatically, but I'm not sure if there is such a thing to say, "hey, Foundation: don't touch this!"

Any leads or suggestions of similar problems?

Justin J about 4 years ago

Maybe I should describe how this was solved, before moving to Foundation:

We just had the main content in a div, with a specific id. The stylesheet that we used only applied styles using that ID (for example the id would be, "appname" - so instead of,

input[type="text"] { 
     // yadda yadda
}

We would just specify it as,

#appname input[type="text"] { 
     // yadda yadda
}

That allows the design we're basically using as shell around the main content to have styles that are independent of the main content (that we're producing) - there's just two stylesheets. Wanna overload any style? Just use another stylesheet.

Wonder if something like that could be used with Foundation? (specific div that all Foundation styles would use).