8. Quirks & Workarounds

Both Foundation and WordPress have their share of quirks, and together, they create some new ones. NOUVEAU includes fixes and workarounds for all known issues “out of the box”, but it is still absolutely critical that you still be aware of the known issues and their fixes to prevent any unnecessary frustration later on.

The #frame Element

Responsive layouts tend to cause unexpected problems with window margins, and Foundation is no exception. You may have seen this on various websites as mysterious extra document width and an empty right margin.

NOUVEAU includes a correction for this in the form of a #frame div, which wraps all body content. This div has only one CSS property: overflow:hidden (which is already defined for you in _foundation\scss\_wordpress.scss).

This fix works by trimming any margins that would push against the window and cause it to expand. Simply make sure that all your HTML is placed inside the #frame element and everything should simply work as expected.

Sticky Posts

There is a known conflict between WordPress and Zurb Foundation over the .sticky CSS class.

WordPress, by default, will add the .sticky class to any stickied blog posts. However, in Foundation this class is used by the “Top Bar” Javascript component to “stick” content to the top of the window when you scroll past it.

NOUVEAU remedies this by changing WordPress’ default sticky class to .status-sticky

---

This page was last updated on September 15, 2016 – it is currently considered COMPLETE.