使用Zurb Foundation與Kendo UI

Question

我正在使用最新的Foundation（3.x）。使用KendoUI並利用Zurb的響應功能，同時獲取Kendo的JS位（如圖表）的最佳方式是什麼？

有沒有人有這方面的經驗，特別是與移動版本的網站？我應該注意什麼？

感謝

Answer 1

我當時也確實有興趣與KendoUI和基金會工作toghether，因爲我更喜歡最後一個響應網站上面的CSS破解應保持相當必要的，而不是Bootstrap。

因此，在過去的幾天裏，我開始檢查是否有可能，KendoUI和Foundation之間沒有任何設計風格問題。那麼一些問題出現了，這裏是我如何修復它們：

使用基金會4.3。1和KendoUI網站2013 Q2：

1. KendoGrid構件：標題太高
   • 只需刪除表類風格的支持，基金會

2. KendoDropDownList部件和類似（即ComboBox，DatePicker等），並在KendoGrid中拖動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一切就OK了加（我希望，到目前爲止，我沒有發現任何gliches還）的代碼。注意最後的代碼，因爲它會將樣式應用於所有以「k-」開頭的類的標籤（這是KendoUI Team中的一個將所有名稱放入「k-」的約定）。

希望這會有所幫助！ :)

Answer 2

不知道這是你想要聽到的答案......我也不是肯定它是正確答案......但這裏是我的經驗。

我有一個現有的項目，我們一直在使用Zurb基金會3.它是一個MVC4網絡應用程序，我們正在使用VS2012。我們真的很喜歡Foundation的響應式設計......但我們想要使用一些Kendo Widgets。

在沒有Foundation的標準MVC項目中，我得到了我的腳溼學習/試驗小部件後，我決定嘗試將Kendo與Foundation融合到項目中。我花了半天的時間試圖讓它發揮作用，永遠不會讓這兩個人一起工作。如果我把基礎材料拉出來，那麼劍道的東西就可以正常工作。與其花費更多的時間努力嘗試實現這一目標，我們正在考慮轉而使用twitter bootstrap。

根據這個博客http://www.kendoui.com/blogs/teamblog/posts/13-01-18/easy_application_layout_with_twitter_bootstrap.aspx劍道的東西應該適應bootrap和我們的目的引導程序將在我們的應用程序作爲基金會的工作。

祝你好運！

Answer 3

你可能會嘗試使用基金會4 - 剛剛發佈。他們從使用jQuery轉移到Zepto，這可能會消除衝突。儘管如此，Bootstrap沒什麼問題。

Answer 4

1. 使用Zurb 4和最新的Kendo UI。
2. 進入Zurb的app.scss文件
3. 關閉（註釋掉）這些組件：形式，自定義表單和表

如果您發現任何怪事，你可以使用這個幫手CSS作爲CSS Fix，只需將該類添加到裹在您的劍道部件中的DIV中：

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

eg

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

如果按照步驟3