Scoping SCSS / CSS to avoid issues v9.0

I am in the process of testing/updating an existing site from v8 to v9 using a theme built with the Zurb Foundation framework. The theme used the old tried and tested ‘.ccm-page’ scoping method to avoid any css clashing with the Concrete Dashboard and block controls etc…

This method was fine in V8 but in V9 style clashing occurs in places. Is there a new scoping method or CSS class required to avoid this in V9?

I am assuming if the original theme was built in Bootstrap this wouldn’t happen but I am trying to avoid re-creating a new theme for an old existing project.

Have you got some examples of the kinds of styles that are clashing?

Hi Mesuva,

I have managed to tweak and solve most issues apart from the Layouts UI.

If you inspect the elements that aren’t displaying correctly, can you spot what CSS styles are impacting them?

It appears to be Foundation’s Form (foundation-forms) Classes that now clash with the UI when previously in v8 they didn’t.

Even wrapped in the .ccm-page class they still interfere with the Concrete UI.

That sounds a little bit like your theme isn’t properly wrapping the page contents, and that the interface is still being output within the .ccm-page div. It could be as simple as a missing closing div somewhere.

If your foundation forms CSS is prefixed by .ccm-page, there should be no way for those styles to impact the actual Concrete interface, as those elements will not be output within the page div with the .ccm-page class. Or at least they shouldn’t be.

So it’s either foundation is including styles that aren’t being prefixed correctly, or there’s an issue with the theme’s nestings as described above.

Thanks Mesuva.

This issue has only started to occur running my theme on v9 it was fine when running on v8. I will continue digging about to see what is causing the issue.