Forums

Prevent Zurb Foundation from interfering with .ccm-ui

Permalink
Howdy! How do you best prevent Foundation styles from interfering with concrete5's user interface?

For example, there's a height defined for 
[type="text"]
elements, which messes up the Search input field when adding blocks. Then there's 
box-sizing: inherit;
defined on *, which messes up the Redactor Save&Cancel buttons.

I found some pointers in this discussion:https://www.concrete5.org/community/forums/themes/concrete5foundatio... and added some override accordingly:

/* CCM UI Fixes 
 * Elements in the CCM forms are styled by the Foundation CSS and we need to restore the default CCM styling here
 */
 .ccm-ui input,
 .ccm-ui textarea,
 .ccm-ui select,
 .ccm-ui
 .uneditable-input,
 [type="text"] {
    height: inherit;
 }
 div#ccm-block-fields select {
    background-color: #ffffff !important; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
Viewing 15 lines of 25 lines. View entire code block.


Since there are a lot of points where Foundation styles interfere with the ccm-ui (in 5-7.5.13), I'm wondering if there is a smarter way to prevent this from happening on a more global level?
 
Steevb replied on at Permalink Reply
Steevb
Are you using a custom theme?

Have you used a 'wrapper' around your page code?
publicb replied on at Permalink Reply
Cheers! Yes, it's a custom theme. So far I only have the usual .ccm-page wrapper.

Do you suggest adding another wrapper div around the page? Or adding a .foundation class to the existing wrapper?

What's the best way to wrap the Foundation css so it only applies to elements within the wrapper?
Steevb replied on at Permalink Reply
Steevb
I have my own framework and wrap my code: 
<body>
<div class="<?php echo $c->getPageWrapperClass()?>">
<div class="wrapper">


CSS is: .wrapper .header{stuff}, .wrapper .logo{stuff}, .wrapper .content{stuff}, etc.
publicb replied on at Permalink Reply
Thanks for replying.

The problem with my current setup is that I import Foundation in my header_top like so.

<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/foundation.min.css">    <?php echo $html->css($view->getStylesheet('main.less'))?>

When imported that way, it applies to everything, including ccm-ui elements.

I'm not sure how to load Foundation so that is applying only to elements within the wrapper. I see the following possibilities, but I'm not quite sure which is the best way.

- rename foundation.css to foundation.less and then wrap everything in the .wrapper-class or something like :not(.ccm-gui)
- import foundation.less into my main.less like so
div.ccm-page {
   @import "foundation.less";
}
Steevb replied on at Permalink Reply
Steevb
Maybe try just using 
<?php echo $html->css($view->getStylesheet('main.less'))?>


Then in main.less 
@import "foundation.less";
.ccm-page {
/*Theme css stuff without any wrapping. */
body {
background-color: @body-background-color;
}
/*etc*/
}


In foundation.less
Try not wrapping either: 
input{stuff}
textarea{stuff}
select{stuff}
foundation{stuff}