Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-18T17:11:03.460Z
Answers.Text: 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.
Answers.UserDisplayName: Prashanth
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-18T17:11:54.020Z
Answers.Text: So is this a bug in craft then? shouldn't craft's CP css have the highest priority in its styling?
Answers.UserDisplayName: Prashanth
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-18T18:25:06.283Z
Answers.Text: @Prashanth: No, because then it would be impossible to customize the CP.
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-20T14:46:49.117Z
Answers.Text: 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?
Answers.UserDisplayName: John Morton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-22T18:19:57.287Z
Answers.Text: 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.
Answers.UserDisplayName: Prashanth
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-18T17:04:33.543Z
Answers.LastActivityDate: 2016-09-18T17:04:33.543Z
Answers.UserDisplayName: John Morton
Body: <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>
  
Tags: <css><bootstrap-craft>
Title: Plugin development - Adding Foundation 5 CSS changes Craft CMS control panel
ThreadText: # 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.  
  
  ---
  
  