This is a migrated thread and some comments may be shown as answers.

Mapping kendo theme scss files to components/modules

2 Answers 36 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
esp
Top achievements
Rank 1
Veteran
esp asked on 13 Apr 2021, 01:47 AM

According to https://www.telerik.com/kendo-angular-ui/components/styling/ we should be only importing the scss that is required by the components we use. For instance:

// Import only the PanelBar and Grid styles.
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

 

How do we know which styles are used by which components? If we have imported the charts module for instance, which styles would need to be imported?

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 14 Apr 2021, 07:12 AM

Hi,

The Kendo UI SASS themes are shared between the different Kendo UI suites (for Angular, jQuery, React, and Vue), and typically all components/widgets have a dedicated folder, containing the SCSS files required for the given component:

https://github.com/telerik/kendo-themes/tree/develop/packages/default/scss

Complex components often use other components and have dependencies on them, for example - the Grid. In such cases the dedicated Grid SCSS imports the SCSS for all other components it uses internally, e.g.:

https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/grid/_index.scss

The Charts are somewhat of an exception due to the fact that the Charts and Gauges all have specific SVG or Canvas - based rendering, thus there is no separate SCSS file for all different types of Charts and Gauges, but instead they are grouped under the DataViz folder:

https://github.com/telerik/kendo-themes/tree/develop/packages/default/scss/dataviz

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
esp
Top achievements
Rank 1
Veteran
answered on 16 Apr 2021, 03:36 AM
I see, makes sense. Appreciate your help.
Tags
General Discussions
Asked by
esp
Top achievements
Rank 1
Veteran
Answers by
Dimiter Topalov
Telerik team
esp
Top achievements
Rank 1
Veteran
Share this question
or