Warning: This article is several years old. You can find an updated list of the Kendo UI CSS files you should use in the Kendo UI documentation.
The following is a quick guide to using the CSS files within Kendo UI. We'll look at which stylesheets to include in your Web, Mobile, and DataViz applications - and also how to use Kendo's built in themes. Let's get started.
Kendo UI Web requires two stylesheets: kendo.common.css and kendo.[theme].css. The [theme] corresponds to one of Kendo UI's 11 themes, listed below:
The common stylesheet applies theme agnostic styling like positioning, size, and spacing. The theme stylesheet applies theme-specific styles like colors and backgrounds.
The following example shows the imports needed to use the default theme:
<link rel="stylesheet" href="/styles/kendo.common.css">
<link rel="stylesheet" href="/styles/kendo.default.css">
The following example uses the moonlight theme:
<link rel="stylesheet" href="/styles/kendo.common.css">
<link rel="stylesheet" href="/styles/kendo.moonlight.css">
Additionally, each CSS file in Kendo UI has a minified version so users don't have to download the full source. By convention, each of the minified files is suffixed with ".min" (before the ".css"). The following shows the minified imports needed for the default theme:
<link rel="stylesheet" href="/styles/kendo.common.min.css">
<link rel="stylesheet" href="/styles/kendo.default.min.css">
Note: Kendo UI Web utilizes image assets and assumes they are stored within the same directory the stylesheets are served from. Theme specific files are stored in a directory with the theme's name and theme agnostic files are stored in a textures
directory. Therefore, if you're using /styles/kendo.moonlight.css
, ensure that /styles/Moonlight
and /styles/textures
are available.
Finally, Kendo UI Web also features full support for RTL (Right-To-Left) languages. Support is added by included kendo.rtl.css and applying a k-rtl
class name to a containing element. For example the following shows an application that uses RTL for an entire page:
<head>
...
<link rel="stylesheet" href="/styles/kendo.common.css">
<link rel="stylesheet" href="/styles/kendo.default.css">
<link rel="stylesheet" href="/styles/kendo.rtl.min.css">
...
</head>
<body class="k-rtl">
<!-- the app -->
</body>
For more information on Kendo UI's built in support for RTL check out our guide on supporting RTL languages.
Kendo UI Mobile requires just one CSS file - kendo.mobile.all.css - that contains all styling and themes needed by the framework.
<link rel="stylesheet" href="/styles/kendo.mobile.all.min.css">
By default Kendo UI Mobile will detect the platform your app is running on - iOS, Android, Windows Phone, or Blackberry - and apply the appropriate theme automatically.
You can however configure the default display by passing platform
or skin
properties when creating your kendo Application.
Kendo UI Mobile has six skins, each with a corresponding CSS file that includes only the styling for that skin. The following lists all skins and their corresponding CSS file:
As an example, the following creates an app that always uses Kendo UI Mobile's flat skin:
<head>
...
<link rel="stylesheet" href="/styles/kendo.mobile.flat.min.css">
...
</head>
<body>
<div data-role="view">
...
</div>
<script>
new kendo.mobile.Application(document.body, { skin: "flat" });
</script>
</body>
Note: Kendo UI Mobile stores assets it uses in an images
directory that is assumed to be in the same directory stylesheets are served from. Therefore, if your stylesheet is served from /styles/kendo.mobile.all.min.css
, ensure that /styles/images
is available.
Finally, if you want to create your own Kendo UI Mobile skin you can include just kendo.mobile.common.css - which includes the functional, size, and positioning CSS without any of the theming - and build your own theme on top of that. The following shows the boilerplate for building a custom theme:
<head>
...
<link rel="stylesheet" href="/styles/kendo.mobile.common.min.css">
<!-- Your styles here -->
</head>
Like Kendo UI Web, Kendo UI DataViz requires two stylesheets: kendo.dataviz.css and kendo.dataviz.[theme].css. Again [theme] corresponds to one of Kendo UI's 11 themes:
Unlike Kendo UI Web, you need to specify a theme on each DataViz widget you create. For example the following creates a kendoChart
widget using the silver theme:
<link rel="stylesheet" href="/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.silver.min.css">
<div id="chart"></div>
<script>
$( "#chart" ).kendoChart({
// Other options
theme: "silver"
});
</script>
Because the theme is an option of DataViz widgets, you can apply different themes to different widgets on the same page. The following example creates two kendoChart
widgets with different themes:
<link rel="stylesheet" href="/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.metro.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.silver.min.css">
<div id="chart-1"></div>
<div id="chart-2"></div>
<script>
$( "#chart-1" ).kendoChart({
// Other options
theme: "metro"
});
$( "#chart-2" ).kendoChart({
// Other options
theme: "silver"
});
</script>
Of course, you can also use DataViz within a Kendo UI Web or Mobile application. To do so, include both sets of stylesheets as shown below:
<link rel="stylesheet" href="/styles/kendo.common.min.css">
<link rel="stylesheet" href="/styles/kendo.default.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="/styles/kendo.dataviz.default.min.css">
This concludes our look at the various CSS files provided in the Kendo UI libraries. Have any other questions? Let us know in the comments.
TJ VanToll is a frontend developer, author, and a former principal developer advocate for Progress.