Telerik blogs

Which CSS Files To Use In Your Kendo UI Project

TJ VanToll by TJ VanToll
October 09, 2013 Web 0 Comments


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.


Which CSS Files To Use In Your Kendo UI Project

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.

Web

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:

  • default
  • black
  • blueopal
  • bootstrap
  • flat
  • highcontrast
  • metro
  • metroblack
  • moonlight
  • silver
  • uniform

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.

Mobile

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:

  • android --> kendo.mobile.android4.min.css
  • blackberry --> kendo.mobile.blackberry.min.css
  • flat --> kendo.mobile.flat.min.css
  • ios --> kendo.mobile.ios.min.css
  • meego --> kendo.mobile.meego.min.css
  • wp (Windows Phone) --> kendo.mobile.wp8.min.css

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>

DataViz

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:

  • default
  • black
  • blueopal
  • bootstrap
  • flat
  • highcontrast
  • metro
  • metroblack
  • moonlight
  • silver
  • uniform

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>

Combinations

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:

Kendo UI Web + DataViz

<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">

Kendo UI Mobile + DataViz

<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.

Data Visualization, Kendo UI
TJ VanToll
About the Author

TJ VanToll

TJ VanToll is a frontend developer, author, and a former principal developer advocate for Progress.

Comments

Comments are disabled in preview mode.