<p>I don't use Foundation 5. I've been using Foundation 6, but I'll offer a suggestion based on Foundation 6 usage. </p>

<p>It looks like your Foundation CSS is overriding the base Craft control panel CSS, specifically the button classes. </p>

<p>My guess is that because you're including <strong>all</strong> the Foundation classes available. If you're using the SASS version, you can comment out the parts you aren't using to minimize the size of what you're using from the base Foundation code. For example, you can try to exclude the button classes from Foundation.</p>

<p>Specifically, if you remove the .button styling rules from your foundation.css file, the Craft buttons would go back to normal.</p>

CC BY-SA 3.0
2016-09-18T17:11:03.460Z
Thanks for the comment. I would try and reduce Foundation.css, but I wouldn't be able to remove the .button styling rules as they are being used in the plugin.
Prashanth
CC BY-SA 3.0
2016-09-18T17:11:54.020Z
So is this a bug in craft then? shouldn't craft's CP css have the highest priority in its styling?
Prashanth
CC BY-SA 3.0
2016-09-18T18:25:06.283Z
@Prashanth: No, because then it would be impossible to customize the CP.
Lindsey D
CC BY-SA 3.0
2016-09-20T14:46:49.117Z
Ideally, I try to "contain" any custom styling rules. Like if you could contain your rules in a parent id like "mypluginname" (`<div id='mypluginname>your code here</div>`). Make the rules for your plugin the more specific rules... know what I mean?
John Morton
CC BY-SA 3.0
2016-09-22T18:19:57.287Z
I understand that. Its just that I am lazy to edit Foundation.css. I just want to import it and work on it out of the box. Guess that's what bootstraps are for. What I don't get is why CP reacts to foundation. Ofcourse there would be conflicting classes in CP's HTML. Thanks anyway, will work it out.
Prashanth
CC BY-SA 3.0
2016-09-18T17:04:33.543Z
2016-09-18T17:04:33.543Z
John Morton
<p>I am trying to embed a Google Map widget as a field in Craft. I am doing plugin development to achieve it.</p>

<p>Adding a foundation 5 css in a <code>PluginName_FieldType.php</code> file into the <code>getInputHtml()</code> function results in changes is Craft Control panel.</p>

<p><code>craft()-&gt;templates-&gt;includeCssResource('pluginhandle/foundation.css');</code></p>

<p>I apologise if it is something silly. I am a newbie to Craft.</p>

<p><a href="https://i.sstatic.net/S9QzW.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/S9QzW.png" alt="Craft_Foundation5_messup"></a></p>

<css><bootstrap-craft>
Plugin development - Adding Foundation 5 CSS changes Craft CMS control panel
# Plugin development - Adding Foundation 5 CSS changes Craft CMS control panel

(Asked by: username_0 on 2016-09-18)

I am trying to embed a Google Map widget as a field in Craft. I am doing plugin development to achieve it.

Adding a foundation 5 css in a `PluginName_FieldType.php` file into the `getInputHtml()` function results in changes is Craft Control panel.

`craft()->templates->includeCssResource('pluginhandle/foundation.css');`

I apologise if it is something silly. I am a newbie to Craft.

[![Craft_Foundation5_messup](https://i.sstatic.net/S9QzW.png)](https://i.sstatic.net/S9QzW.png)

**Tags:** css, bootstrap-craft


---

## 1 answers

### Answer by username_1 on 2016-09-18. Score: 2

I don't use Foundation 5. I've been using Foundation 6, but I'll offer a suggestion based on Foundation 6 usage.

It looks like your Foundation CSS is overriding the base Craft control panel CSS, specifically the button classes.

My guess is that because you're including **all** the Foundation classes available. If you're using the SASS version, you can comment out the parts you aren't using to minimize the size of what you're using from the base Foundation code. For example, you can try to exclude the button classes from Foundation.

Specifically, if you remove the .button styling rules from your foundation.css file, the Craft buttons would go back to normal.

> **Comments:**
> **username_0**: Thanks for the comment. I would try and reduce Foundation.css, but I wouldn't be able to remove the .button styling rules as they are being used in the plugin.  
> **username_0**: So is this a bug in craft then? shouldn't craft's CP css have the highest priority in its styling?  
> **username_2**: @username_0: No, because then it would be impossible to customize the CP.  
> **username_1**: Ideally, I try to "contain" any custom styling rules. Like if you could contain your rules in a parent id like "mypluginname" (`<div id='mypluginname>your code here</div>`). Make the rules for your plugin the more specific rules... know what I mean?  
> **username_0**: I understand that. Its just that I am lazy to edit Foundation.css. I just want to import it and work on it out of the box. Guess that's what bootstraps are for. What I don't get is why CP reacts to foundation. Ofcourse there would be conflicting classes in CP's HTML. Thanks anyway, will work it out.  

---

