Styling Overview
Kendo UI for Angular provides themes that you can use to style your application.
Currently, the suite ships the following themes:
Theme name | Theme package NPM module |
---|---|
Kendo UI Default theme | @progress/kendo-theme-default |
Kendo UI Bootstrap theme | @progress/kendo-theme-bootstrap |
Kendo UI Material theme | @progress/kendo-theme-material |
Installation
To start using a theme, install its package through NPM. For example, to install the Default theme, run the following command:
npm install --save @progress/kendo-theme-default
After the theme package is installed, include it in your project.
Including Themes in Your Project
Each theme package provides two ways for including the theme in your project:
- By using a precompiled CSS file - this approach does not require a build step and is therefore faster, or
- By compiling the theme from SCSS source files - this approach reduces the CSS output and allows you to customize the theme.
Using Precompiled CSS
Each Kendo UI theme includes a precompiled dist/all.css
CSS file that contains the styles for all Kendo UI components. To use dist/all.css
, reference it in the angular.json
file of the application.
As of the Angular 6 release, the
.angular-cli.json
file is renamed toangular.json
.
{
"apps": [
{
"styles": [
"node_modules/@progress/kendo-theme-default/dist/all.css"
]
}
]
}
While using the precompiled CSS file is faster than compiling the theme from the source code, the approach has the following drawbacks:
- It includes CSS for components that may not be used in the application.
- It does not allow theme customization through SCSS variables (which is possible when you build a theme from the source code) because the theme is already compiled.
Compiling the theme from SCSS source files
Angular CLI supports the compilation of SCSS files. To compile the theme in your application, import the style files for the components in use.
// 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";
It is also possible to include all available component styles. However, this will significantly increase the build time and bundle size of the application.
// styles.scss
@import "~@progress/kendo-theme-default/dist/all.scss";
For more information on how to compile and customize the themes, refer to the Customizing Themes section.
Removing Themes from angular.json
The ng add
schematics for the Kendo UI packages adds the precompiled CSS file to angular.json
. When you use the SCSS files, you have to remove these references.