Best way to style Native Kendo components when the project already uses kendo.common & kendo bootstrap CSS

[Vincent]

I'm currently working in a project that works with Kendo UI Vue wrapper components which are styled by :

kendo.common-boostrap.css 

kendo.bootstrap.css

Found here: https://docs.telerik.com/kendo-ui/intro/installation/hosting-kendoui

 

But now I want to add some Native Vue components, which as far as I can tell, are styled by the themebuilder: https://themebuilder.telerik.com/kendo-vue-ui 


Am I supposed to use the themebuilder css file alongside kendo.common-bootstrap and kendo.bootstrap? Or does it replace one or both of them? I'm currently a bit confused and some clarification would be a great help

 

Thanks in advance

[Petar]

Hi Vincent,

Talking about the Native Vue component, the correct styling article you should be looking at is this one. The link describes the themes that can be used with the Kendo UI for Vue Native components.

The mentioned kendo.common-boostrap.css and kendo.bootstrap.css files that you currently use are the files of the LESS-based Kendo UI Bootstrap Theme. The theme I can recommend you to change the two files with one is the SASS-based Bootstrap Theme. 

To answer your question if you need to use the Theme Builder, the answer is NO, you don't need to use it if you don't want to modify the default Bootstrap(or other) theme. If want to change the default colors of the selected theme, then you can use the Theme Builder. Apply the modifications you want and download the archive with your configuration. 

I hope the above details will help you. Let me know if you have additional questions related to the Kendo UI Themes.

Regards,
Petar
Progress Telerik