Get Started

Introduction to CSS Utilities

The Telerik and Kendo UI CSS Utilities are utility classes that allow you to build custom layouts without writing CSS. Each utility class changes the appearance of the target element by applying a specific CSS rule. For example, to round the corners of an element without writing any CSS code, add the k-rounded-md class to that element, and the utility will apply the corresponding rounding styles.

The CSS Utilities are bundled with the Telerik and Kendo UI Themes, so you can start using them after installing any of these themes.

Advantages

With the CSS Utilities, you don't need to create new semantic class names every time you add a new CSS rule to an element, and you don't need to write complex CSS code—adding the utility class to the element handles these tasks for you.

The following example demonstrates the advantages of the CSS Utilities. Both approaches produce the same results and will create a grid with three equal columns but the utility classes save you time:

• The conventional approach requires you to add the grid, think of a proper class name for the div, and then add the CSS code:

  HTML

  <div class="my-grid">
  <div></div>
  <div></div>
  <div></div>
  </div>
  

  CSS

  .my-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  

• The CSS Utilities approach allows you to achieve the same results with less—using the k-grid-cols-{n} utility applies the CSS code for you:

  HTML

  <div class="k-d-grid k-grid-cols-4">
  <div></div>
  <div></div>
  <div></div>
  </div>
  

Naming

The CSS Utilities follow a strict naming convention that makes them more compact and allows you to intuitively find the utility class needed for a specific task. Most utilities consist of three parts:

• Prefix—Every utility starts with the prefix k-. The prefix prevents conflicts with external classes that are not part of the Telerik and Kendo UI CSS Utilities.
• Property—Full or short name of a CSS property, for example, rounded.
• Value—The value of the property, for example, -md.

As an example, the k-rounded-md utility applies a medium-sized rounded corner.