Detaching the CSS Utilities
Until now, the CSS Utilities Classes package was considered complementary to the Telerik and Kendo UI Themes, with each component importing the entire set of utils. However, only a small portion of these utilities were used across components, resulting in an unnecessary increase in the bundle sizes of the Telerik and Kendo UI Themes.
The primary goal of the detachment process was to identify the utilities required for the Telerik and Kendo UI theme components. This involved separating the utility package from each component and importing only the necessary utilities into the components where they are needed.
Some of the immediate benefits from the detachment are:
- Significantly decreased Telerik and Kendo UI Themes bundle size.
- Faster compilation for the Telerik and Kendo UI Themes.
- Growth opportunity for the CSS Utilities Classes without affecting the Telerik and Kendo UI Themes bundle size.
- Addition of a Responsive Layout System for responsive behavior as part of the CSS Utilities Classes package.
If you have used CSS Utilities classes for custom layouts or styling, you must include them in your project by following the migration guide. However, if you haven't used any CSS utilities and are only utilizing the Telerik and Kendo UI themes, no changes are required.
Migration
To migrate to the separate CSS Utilities, simply import them below the Telerik and Kendo UI theme you are using.
To import styles in your SCSS, use the following code:
// Import a theme (for example, the default theme).@import '@progress/kendo-theme-default/dist/all.scss';
// Import the utils (separately from the default theme).@import '@progress/kendo-theme-utils/dist/all.scss';If you are using a CDN link to import your styles, refer to the following code:
<!-- Import a theme (for example, the default theme). --><link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default/dist/all.css"/><!-- Import the utils (separately from the default theme). --><link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-utils/dist/all.css" />
