A general overview of Dialtone's utility classes, CSS components, and Vue components.


Dialtone's CSS library offers a framework of utility-first classes. Each class is a small, atomic style declaration that, when chained together, should mitigate most situations in which custom CSS must be written. Just write these classes right in your mark-up and you're all set!

<div class="d-p16 d-bgc-black-600 d-fc-white">Box</div>

In the above example, we used:

Though an atomic CSS approach comes with many advantages, we know it also offers a notable disadvantage: reducing the CSS cascade. This is especially true for repeated UI elements, which can end up creating redundant mark-up. For these instances, Dialtone offers components.


There are two methods to implement Dialtone components: Vue (recommended) and CSS. Vue is the preferred method as it's more robust and readily accessible out-of-the-box. Get started with Vue components. In the event Dialtone Vue doesn't suit your needs, Dialtone's CSS library offers the same set of components. These may require more work to implement and make accessible, but will work in a pinch.

<button class="d-btn d-btn--primary">Primary Button</button>

Writing CSS

In the event you need to write CSS, use BEM (Block Element Modifier). This is a simple, common naming convention that helps make our CSS easier to read and understand. If you aren't familiar with the approach, here's a quick synposis:

  • Block: A parent entity that is meaningful on its own. For example: .d-input
  • Element: A child that is meaningful only in relation to its parent. For example: .d-input__label
  • Modifier: A modifying flag on a Block or Element that changes appearance or behavior. For example: .d-input--lg


For internal Dialpad projects, using Dialtone in Backbone should be rare, since most front end changes are now being implemented using Vue. Regardless, if you find yourself needing to use Dialtone in Backbone, there are a few steps:

  1. Create a .less file for your feature, if one does not yet exist.
  2. Import this .less file into the relevant base less file e.g. single.less, web.less etc.
  3. Import Dialtone into your .less file and compose your styles like shown in the example above.


In order to make Dialtone work across our supported browsers you need to manually install focus-visible polyfill and postcss-focus-visible plugin.

  1. Focus-visible adds a listener to every element that should be keyboard-focused only and when the element is focused, it adds the .focus-visible class to it, follow the focus-visibleopen in new window installation instructions.
  2. Postcss focus-visible plugin adds a .focus-visible class for every :focus-visible class found in your css, follow the postcss-focus-visibleopen in new window installation instructions.


All Dialtone components are implemented with box-sizing: border-box; applied. To understand why we prefer border-box over content-box, please visit this Stack Overflow Teams questionopen in new window.

In Vue, we apply border-box globally at the VueView level, ensuring all child elements use this style. As such, Dialtone styles will work correctly in Vue with respect to element sizing.

In Backbone we are not using border-box by default. Because Dialtone expects this, anytime we wish to use Dialtone styles in Backbone we must ensure to apply the border-box style to all affected elements.

Last Updated: