将 Zurb Foundation 与 Kendo UI 一起使用

Question

我正在使用最新的 Foundation (3.x)。什么是同时使用 KendoUI 并利用 Zurb 的响应功能同时获得 Kendo 的 JS 位（例如图表）的最佳方式。

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

谢谢

Answer 1

1. 使用 Zurb 4 和最新的 Kendo UI。
2. 进入 Zurb 的 app.scss 文件
3. 关闭（注释掉）这些组件：表单、自定义表单和表格

如果你发现任何奇怪的地方，你可以使用这个辅助 CSS 作为 CSS Fix，然后将这个类添加到一个包裹在你的 kendo 小部件周围的 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 中拖动 n'Drop：弹出窗口离文字太远，拖动 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 几乎一切正常（我希望，到目前为止我还没有发现任何故障）。小心最后的代码，因为它会将样式应用于所有类以“k-”开头的标签（这是 KendoUI 团队的惯例，将“k-”放在所有名称中）。

希望这会有所帮助！ :)

Answer 3

您可以尝试使用刚刚发布的 Foundation 4。他们从使用 jQuery 转移到了 Zepto，这可能会消除冲突。不过，Bootstrap 并没有什么问题。

Answer 4

不确定这是您想听到的答案...我也不确定这是正确的答案...但这是我的经验。

我有一个使用 Zurb Foundation 3 的现有项目。它是一个 MVC4 网络应用程序，我们使用的是 VS2012。我们真的很喜欢 Foundation 的响应式设计……但我们想使用几个 Kendo Widget。

在没有 Foundation 的情况下使用标准 MVC 项目中的小部件进行学习/实验后，我决定尝试将 Kendo 放入有 Foundation 的项目中。我花了半天的时间试图让它工作，但从来没有让两者一起工作。如果我把基础的东西拿出来，剑道的东西就很好用。与其花更多时间尝试让这项工作正常工作，我们正在考虑可能只是转向 twitter bootstrap。

根据这个博客http://www.kendoui.com/blogs/teamblog/posts/13-01-18/easy_application_layout_with_twitter_bootstrap.aspx，Kendo 的东西应该可以很好地与 bootrap 配合使用，并且就我们的目的而言，bootstrap 在我们的应用程序中的工作效果与 Foundation 一样。

祝你好运！