使用Zurb Foundation和Kendo UI

Question

我正在使用最新的基金会(3.x).什么是使用KendoUI并利用Zurb的响应功能同时获得剑道的JS位(如图表)的最佳方式.

有没有人有这方面的经验,尤其是移动版网站？我应该注意什么？

谢谢

Answer 1

1. 使用Zurb 4和最新的Kendo UI.
2. 进入Zurb的app.scss文件
3. 关闭(注释掉)这些组件:表单,自定义表单和表格

如果你发现任何怪异,你可以使用这个帮助CSS作为CSS修复,只需将类添加到缠绕在你的剑道小部件周围的DIV:

.foundation-kendo *, .foundation-kendo *:before, .foundation-kendo *:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

例如

<div class="foundation-kendo">
    <div id="grid"></div>
</div>

如果您按照步骤3,上面的CSS hack应该仍然是不必要的.

Answer 2

我也非常有兴趣与KendoUI和Foundation合作,因为我更喜欢最后一个用于响应式网站,而不是Bootstrap.

所以我开始检查过去几天是否有可能并且KendoUI和Foundation之间没有任何设计风格问题.好了一些问题出现了,这就是我修复它们的方法:

使用Foundation 4.3.1和KendoUI Web 2013 Q2:

1. KendoGrid小部件:标题太高
   • 只需删除Foundation中的Table类样式支持

2. KendoDropDownList小部件和类似的(即ComboBox,DatePicker等等)和KendoGrid中的Drag n'Drop:弹出窗口离文字太远,拖得离指针太远了

   body {
       position: static;
   }
   
   
   *[class*="k-"] {
       -moz-box-sizing: content-box !important;
       -webkit-box-sizing: content-box !important;
       box-sizing: content-box !important;
   }
   table {
       margin-bottom: 0px!important;
   }
   

这是你必须添加的代码,以便几乎所有东西都可以用于KendoUI(我希望,到目前为止我还没有找到任何gliches).小心最后一个代码,因为它会将样式应用于所有具有以"k-"开头的类的标签(这是KendoUI Team中的一个约定,即对所有名称添加"k-").

希望这可以帮助!:)