Foundation Breaks Design Dialogs

Problem: The popular CSS library Foundation causes conflicts with some of the author mode dialog widgets. Here is an example of the broken checkboxes in a parsys design dialog after foundation.css is loaded:

Solution: Add a one-line css rule to fix it.

Within your project’s etc/design css files, add the following:

#CQ label
{
display: inline;
}

After a page refresh, the formerly-broken dialog will be back to normal:


Summary: Libraries like Zurb Foundation are great for CQ projects, but can cause minor issues with the automatic author controls that AEM injects into pages. Most of these can be fixed with some quick CSS hacks.

Source: http://aem.matelli.org/foundation-breaks-design-dialogs/