Kendo UI CSS Classes

Unfortunately, the CSS classes used in Kendo UI are not very well documented. Based upon my prior communications in the forums with Telerik in the past, Terik seems reluctant to fully document the Kendo UI classes as they fear that folks may use it to reverse engineer the functionality of the commercial Kendo UI widgets with their open-sourced project, Kendo Core.

Although I disagree with their decision, I am not surprised. in previous versions, I have used the various Kendo CSS classes to replicate some of the basic functionality of the Kendo UI grid. If Telerik fully documented the Kendo UI classes, there very well may be less incentive for folks to purchase the commercial version of Kendo UI.

That said, I still contend that Kendo UI is an amazing product, and opening up and fully documenting the classes would increase the proliferation of KendoUI.

Common Kendo CSS Classes

Primitive Kendo UI Classes to Create Forms, Buttons, Icons and Panels

The most common Kendo classes are the 'primitive' Kendo classes. These classes are used to create input forms, buttons, sprites, and icons. I am not going to cover every Kendo primitive class as many of them are only used internally by Kendo UI.

• The k-textbox class is used to create the look and feel for most of the form elements and is used by appending a k-textbox to the forms.
• The k-input class is typically only used for autocompletes and Kendo UI combo boxes. 
• The k-button class can be used to create a button from an element by simply appending class="k-button" to a span or div. 
• The k-icon class is typically appended to a span to create an icon. A list of icons for Kendo UI for jQuery can be found at https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons. See Teleriks Iconography site for a list of icons for other Kendo UI Frameworks.
• k-block is used to apply notification classes to a panel. This Kendo class is not documented by Telerik, but I have found it quite useful to highlight status messages. 

Kendo UI Appearance Related Classes

The k-primary, k-content, k-alt, and k-selected classes are used to create alternating blocks and highlight specific elements.

• The k-primary class is used to set the main accent color. In this blog, for example, the month and last breadcrumb element at the top of the page uses this class to set the primary color.
• I use the k-content class most frequently to set the theme appearance and apply this class to parent containers. The k-content class will set the font properties and the color of the containers.
• I also use the k-alt class to create separate UI elements that use the k-content class.
• The k-selected class is used to highlight the selected row.

There are several notification related classes are used to apply color to notifications that signify status, these classes are:

• k-notification-info
• k-notification-success
• k-notification-warning
• k-notification-error

Additionally, there are status-related classes that are used to color other UI elements, such as a panel, div, button, etc. These classes are:

• k-info-colored
• k-success-colored
• k-error-colored

There are other less-used appearance-related classes, such as the k-header and k-widget classes.

• The k-header class sets the default properties for headers. I use this class when creating a custom UI to set the color of the header, menus, and title bars.
• The k-widget class sets properties on the outer container of the various widgets. the challenge using this class is that it is often overridden. I rarely use this class but sometimes find it useful to get the default font properties.

All of these appearance-type classes can be used with the primitive classes to change the appearance of the elements on the page, such as an icon, button, or form. See the examples below for more information.

Kendo State Classes

Like many of the other theme settings, the state classes have undergone revision in Kendo R1 2023. The original and new state-related classes can be found at https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview#state-classes 

 I am not including a full set of examples as I rarely use these classes in my projects, however, I have included an example of the k-state-disabled class in the Input Elements SSN form below.

Kendo Classes for Input Elements

Input Elements
<table border="0" cellpadding="0" cellspacing="2">
	<tr>
		<td width="33%">Username:</td>
		<td width="66%">
			<input type="text" id="userName" name="userName" value="" class="k-textbox" />
			k-textbox (Used for text inputs)
		</td>
	</tr>
	 <tr>
		<td width="33%">Posted:</td>
		<td width="66%">
			<input id="datePosted" name="datePosted" data-role="datetimepicker" type="text" class="k-input" role="combobox" />
			k-input (Used for comboxes and autocomplete forms)
		</td>
	</tr>
	<tr>
		<td width="33%">SSN:</td>
		<td width="66%">
			<input id="ssn" name="ssn" type="text" class="k-input k-state-disabled" />
			k-input k-state-disabled (disabled form)
		</td>
	</tr>
</table>

k-icon Class

<span class="k-icon k-i-arrow-chevron-left"></span>
<span class="k-icon k-i-arrow-chevron-right"></span>
<span class="k-icon k-i-info"></span>
<span class="k-icon k-i-success"></span>
<span class="k-icon k-i-error"></span>
<span class="k-icon k-i-warning"></span>

k-button Class

k-button k-primary
k-button k-content
k-button k-alt

<span class="k-button k-primary">k-button k-primary</span>
<span class="k-button k-content">k-button k-content</span>
<span class="k-button k-alt">k-button k-alt</span>

k-primary, k-content, and k-alt Class

<div class="k-primary">k-primary</div> 
<div class="k-content">k-content</div> 
<div class="k-alt">k-alt</div> 

Table With Alternating Rows

<table border="2" cellpadding="0" bordercolor="#chr(35)##buttonAccentColor#">
	<tr>
		<td class="k-primary">k-primary</td>
	</tr>
	<tr>
		<td class="k-content">k-content</font></td>
	</tr>
	<tr>
		<td class="k-alt">k-alt</td>
	</tr>
	</tr>
</table>

k-notification Classes

<div class="k-notification-info">k-notification-info</div>
<div class="k-notification-success">k-notification-success</div>
<div class="k-notification-warning">k-notification-warning</div>
<div class="k-notification-error">k-notification-error</div>

k-info-colored, k-success-colored and k-error-colored classes

<div class="k-primary k-info-colored">k-primary k-info-colored</div>
<div class="k-primary k-success-colored">k-primary k-success-colored</div>
<div class="k-primary k-error-colored">k-primary k-error-colored</div>

Stylizing Buttons

<div class="k-button k-info-colored">info</div>
<div class="k-button k-success-colored">success</div>
<div class="k-button k-error-colored">error</div>

Styling Panels Using the k-block Class

<div class="k-block k-info-colored"> 
<strong>Note: Please fill out all of the fields in this form (k-block k-info-colored)
</div><br/>
<div class="k-block k-success-colored"> 
Your order was completed! (k-block k-success-colored)
</div>
<div class="k-block k-error-colored"> 
You're missing a required field (k-block k-error-colored)
</div>

Where to Find the Properties for These Kendo CSS Classes

The majority of the Kendo UI CSS classes are either in the kendo.common.min.css file or the theme-specific CSS file that you incorporated when loading Kendo UI (kendo.default.min.css for example). You can inspect the CSS properties by opening up the CSS files. The non-minified file is much easier to inspect as the minified files are compressed

Further Reading

For more information see https://docs.telerik.com/kendo-ui/styles-and-layout/less-themes/overview

• Less Themes Overview
• Styling Forms Like A Pro With Kendo UI
• Button Styling