Usage

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

Utility-First

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!

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.

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.

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

Backbone

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.

Box-Sizing

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

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.