CSS zurb foundation and dhtmlx

Question

I have a project that requires zurb foundation css and dhtml scheduler and the css is not playing very nicely.

There are two issues in particular.

The monthly calendar is misaligned because of the .56em .62em padding on the table.

A bit more complicated is the appointments on the calender. this is what it looks like. notice the hole in the side menu.

The styles by default that are the problem.

And I need to remove them to properly render the page.

We are using scss version of foundation but I'm not very familiar with its capabilities and the dhtmlx controls do not use it.

So my basic question is how should i change these styles with the least amount of impact to foundation or dhtml?

I'm sure I could use java script but I think that would be a pain as the calender changes having to find all the elements to apply styles again, and i'm really hopping there is a nifty css trick. =)

Thanks!

******* EDIT ***********

The table issue was quickly fixed for chrome and IE by adding another style sheet after foundation to override the conflicting styles. Short and simple.

  <style type="text/css" media="screen">
    #scheduler_here table tr td, #scheduler_here table tr th
    {
        padding: 0;
    }
    #scheduler_here *, #scheduler_here *:before, #scheduler_here *,after {
        box-sizing: content-box;
       -webkit-box-sizing: content-box;
    }
    </style>

Answer 1

If you use Foundation 4 (F4) you can pick and choose which parts of foundation CSS are generated by Compass / Sass. Don't forget to run compass compile after you make the change.

edit -> sass/app.scss

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
// @import "foundation";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
@import "foundation/components/visibility";
@import "foundation/components/block-grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/forms"; // *requires components/buttons
@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
@import "foundation/components/button-groups"; // *requires components/buttons
@import "foundation/components/dropdown-buttons"; // *requires components/buttons
@import "foundation/components/split-buttons"; // *requires components/buttons
@import "foundation/components/flex-video";
@import "foundation/components/section";
@import "foundation/components/top-bar";  // *requires components/grid
@import "foundation/components/orbit";
@import "foundation/components/reveal";
@import "foundation/components/joyride";
@import "foundation/components/clearing";
@import "foundation/components/alert-boxes";
@import "foundation/components/breadcrumbs";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/inline-lists";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/side-nav";
@import "foundation/components/sub-nav";
@import "foundation/components/switch";
@import "foundation/components/magellan";
// @import "foundation/components/tables";  // prevent Table CSS from loading
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/dropdown";

Another option, if you know how you would like to change the padding, borders, etc. to match your other included elements is you could edit the _settings.scss, lines 1064 - 1097 where it has variables for tables. I am showing the variables here unmodified to illustrate what can be changed.

//
// Table Variables
//

//// Background color for the table and even rows

// $table-bg: #fff;
// $table-even-row-bg: #f9f9f9;

//// Table cell border style

// $table-border-style: solid;
// $table-border-size: 1px;
// $table-border-color: #ddd;

//// Table head styles

// $table-head-bg: #f5f5f5;
// $table-head-font-size: emCalc(14px);
// $table-head-font-color: #222;
// $table-head-font-weight: bold;
// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);

//// Row padding and font styles

// $table-row-padding: emCalc(9px) emCalc(10px);
// $table-row-font-size: emCalc(14px);
// $table-row-font-color: #222;
// $table-line-height: emCalc(18px);

//// Display and margin of tables

// $table-display: table-cell;
// $table-margin-bottom: emCalc(20px);

If you have time and want to go even further, you can pull the foundation/components/tables.scss file into your local project, modify it however you like and link to the modified version as above. You can find the original files by running gem which zurb-foundation I have installed with rvm so I get something like ~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rb from the zurb-foundation-4.1.5 directory the file is located in scss/foundation/components and called _tables.scss