Future Plans for the Telerik and Kendo UI LESS Themes

Learn more about how the Telerik and Kendo UI LESS themes will be deprecated a year from now and how it will affect you.

Today we are announcing that a year from now, with R1 2023, the Telerik and Kendo UI LESS themes will officially stop receiving updates. With this announcement, we are recommending that any customer using the LESS themes migrate to an equivalent Sass-based theme instead—an effort that may be as simple as changing a single CSS file reference.

In this blog post, we will go into details of what the LESS themes actually are, why this change is happening, and how this may potentially affect you.

Table of Contents

1. What are the LESS Themes? Am I using the LESS Themes?
2. What is happening to the LESS themes?
3. Why are the LESS themes deprecating in 2023?
4. How does this affect me?
5. How do we migrate from the LESS themes to the Sass themes?
6. What about the Kendo UI for Mobile LESS themes?
7. Moving Forward

What Are the LESS Themes? Am I Using the LESS Themes?

The Telerik and Kendo UI LESS themes were the original themes for Kendo UI, released with the library in 2010. During this time, developers had a few options for CSS pre-processing, with LESS and Sass being at the forefront. Upon the initial release of Kendo UI, LESS was the most popular solution, which is why it was chosen as the approach to style and theme Kendo UI and Telerik UI web components.

The LESS themes are only available to style a subset of the available Telerik and Kendo UI component libraries. Specifically, the LESS themes are only available when using the following products:

• Kendo UI for jQuery
• Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET Core

If you are not using one of those products, then the information in this blog post will not affect you.

If you are using one of the above products, then there is a way to understand if you are using the LESS themes by reviewing the format of the CSS files you have included in your applications. If you are using multiple CSS files related to Kendo UI, you are most likely using the LESS themes. These files use the following naming patterns:

• kendo.common.min.css
• kendo.[theme-name].min.css
• kendo.mobile.min.css
• kendo.rtl.min.css

If you aren’t using a combination of files named like above and instead use a single CSS file like kendo.default.min.css, then you are using the Sass themes and this blog post can be ignored.

What Is Happening to the LESS Themes?

The LESS-based themes will receive the updated rendering options in a similar fashion to the Sass-based themes throughout 2022—I mentioned these rendering options in the “Improvements Coming to Telerik and Kendo UI Themes in 2022” blog post.

However, after 2022, our plans are to officially deprecate the LESS-based themes with the R1 2023 release (January 2023). After R1 2023, the LESS themes will still function, but new UI components and features will not be reflected in the themes, which can prevent upgrades in the future.

With this announcement, we recommend our users plan a migration from the LESS themes to the Sass themes where applicable.

Our goal with this effort is to ensure that anyone using the LESS themes has enough time to migrate to the Sass themes, while simultaneously delivering big improvements to the LESS themes to leave them in a good place for folks who are unable to migrate away, so they can take advantage of the improvements we are working on during 2022.

Throughout 2022, we will introduce migration guides and resources to help customers migrate from LESS to Sass, but in many cases the migration may be as simple as changing a single CSS reference.

For those who have created more customized themes based on the LESS themes, these migration resources, as well as our support staff, should help plan and execute any migration effort throughout 2022 and into 2023.

Why Are the LESS Themes Deprecating in 2023?

Since we introduced the Sass-based themes, we have seen more and more of our customer base migrate their themes to use this newer and more popular format. We have also seen the industry shift away from LESS and toward Sass.

Beyond the natural shift within the industry, we have also come to a point where maintaining the LESS-based themes becomes more and more time- and resource-consuming. Initially these LESS-based themes were all unique and created from the ground up, which has created over 12 unique themes. The themes were architected in such a way that they do not share much in common, which means that the introduction of a new feature, a new component or just an updated design of a UI component has to be recreated 12+ times to ensure each LESS theme can appropriately render this new addition.

When we created the Sass-based themes, we understood that re-creating 12+ themes was not sustainable, and instead we wrote the Sass-based themes to share common code and built them to handle more designs per theme. This introduced the concept of a “swatch” which can let the Default theme cover several of the existing LESS-based themes with an equivalent look and feel by just tweaking Sass variables instead of creating an entirely new theme.

We also see more requests for new themes and design languages from our customers—including Fluent and Tailwind CSS. Creating a new theme requires new rendering for over 100+ components, which is also time- and resource-consuming. We want to be able to free up resources to ensure that we can cover current— as well as future—theme and design language support.

With all this in mind, we believe this is the best time for both our customers and our teams to move toward using the Sass-based themes.

How Does This Affect Me?

When it comes to themes usage within the Telerik and Kendo UI web UI libraries, most users fall under one of three categories, and I’ll address what you can expect when looking at moving from LESS to Sass.

Our recommendation is to plan in a migration from the LESS themes you are using today to one of the Sass themes. We hope that given the full year ahead, plus the fact that the LESS-based themes will continue to be updated throughout 2022, will give plenty of runway for users to migrate from one theme format to the next.

Developers Who Use the LESS Themes As-Is (No Additional Customization)

If you are a developer who just includes one of our themes out of the box without any changes at all, this transition will be easy. Switching to a Sass theme can be done just through changing the included CSS file that you have within any of your applications. If you are using one of the LESS themes beyond Default, Bootstrap or Material, you can use the available color swatches of a Sass theme to get the same look and feel. Our online demos all feature these swatches, so feel free to use the theme picker in any demo to compare and contrast themes to select your favorite.

Some of you may be using the Kendo UI CDN in order to include the LESS themes, and the good news for you is that we will continue to add new versions of the CSS files that you already are including and updating with every release. However, instead of being generated by the LESS themes, you are instead using CSS generated by our Sass themes. This should just be a question of updating a string name to include the new theme, just like you’ve done in the past.

Developers Who Have Customized the LESS Themes To Create a Custom Theme

For folks who have worked within the LESS files to customize their look and feel using the available variables within these themes, you will have to do the same thing to any Sass theme. Since customizations like this can be extensive, I cannot say exactly what this effort entails, but our recommendation is to document the changes you have made and start the migration by implementing the same changes to one of our Sass-based themes.

Developers Who Customize Kendo UI Components by Overriding CSS Classes

If you are a developer who writes in-line CSS or have added in a custom CSS file that customizes our UI components by overriding the styles that are generated on the page, or even looking at the HTML structure of the page, you will have to budget additional time around the migration. The whole effort around adding additional options for all components does require our team to update the rendered HTML and CSS classes, which means that, depending on exactly how you did this customization, you need to rewrite these rules with the new rendering.

Our hope is that between the updates that we are doing to the options of the components, as well as the documentation we are rolling out, you will not need to take the overriding approach in the future. Instead, you can work with the available Sass variables and options and avoid inspecting all our rendered HTML.

How Do We Migrate From the LESS Themes to the Sass Themes?

Throughout 2022, we will publish additional resources to help customers migrate from LESS-based themes to Sass-based themes. These resources will evolve over the year and will also be built based on customer feedback along the way.

As I mentioned above, many of these changes may not even affect you and your team if you just use any one of our themes as-is. Migration in this case would just be a question of changing a CSS file reference. For anyone else, the resources we will be rolling out throughout the year should help prepare migration down the road.

What About the Kendo UI Mobile LESS Themes?

Kendo UI Mobile, for those not familiar, is a collection of separate UI components targeting hybrid mobile application UI development through frameworks like Cordova. These were intended to only be used when creating hybrid mobile applications or the now outdated method of serving a mobile-specific website (e.g., mywebsite.com/m/ or m.mywebsite.com) that attempted to replicate the look and feel of a native application for iOS or Android. These UI components were also themed using LESS themes that attempted to replicate the look of native iOS and Android components.

To get straight to the point: The Kendo UI Mobile LESS themes will officially be deprecated with R1 2022, which means they will stop receiving updates.

This means that the Kendo UI Mobile hybrid UI LESS themes will continue to work in their current state, but we will not be adding new features or fixes to these components. We will continue to provide information about what can be done with the hybrid UI components for future development, but the short and sweet recommendation is to migrate to one of the equivalent “Kendo UI Web” components with their built-in responsiveness to recreate the same functionality in your applications.

Moving Forward

The story of the Telerik and Kendo UI themes in 2022 and beyond is an exciting one. Last week I posted about the Improvements Coming to Telerik and Kendo UI Themes in 2022, which is an evolution of the styling for Telerik and Kendo UI web components that will make the Sass-based themes better suited for modern UI and UX development.

The deprecation of the LESS themes that I discussed in this blog post will help streamline the theming options and give focus to our customers and the Telerik and Kendo UI teams themselves.

Combining these two efforts, as well as the continued evolution of the Telerik and Kendo UI Figma Kits and other design resources, the future looks bright for designing and styling all web-based Telerik and Kendo UI component libraries!