The tool renders the same look and feel as the look and feel of all other components in the suite. It also delivers full control over the skin elements of each component and automatically updates its composite units. After you create the skin and achieve the desired look of the theme, the Sass Theme Builder enables you to download and integrate it in your project.

Choose one of the existing skins to use as a base. The currently available built-in skins are Default and Bootsrap.

Figure 2: Selecting a base theme

Scroll down and select the controls you want to customize.

Figure 3: Selecting the widgets for customization

(Optional) After the initial selection, add or remove elements for customization.

To deliver the full set of their functionalities, some Kendo UI controls, such as the Grid, have composite structures and include child components. In such cases, the Theme Builder automatically applies the theme modification to the child components and you do not need to customize each of them separately.

When you complete the modifications and the theme is ready to be used:

Download the theme as a compact archive by clicking the Download button.

Copy the downloaded all.css file and paste it in the Content folder of your application.

Bundle the styles to render them or directly reference the styles in Layout.cshtml. For more information on CSS bundling in Telerik UI for ASP.NET MVC applications, refer to the article on CSS bundling fundamentals.

Important

Reference or bundle only the all.css file because the exported CSS file contains all styles you need.