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:
- Our padding utility class
.d-p16to add 16px of padding
- Our background color utility class
.d-bgc-black-600to add a purple background
- Our font color utility class
.d-fc-whiteto change the font color to white
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>
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:
- Element: A child that is meaningful only in relation to its parent. For example:
- Modifier: A modifying flag on a Block or Element that changes appearance or behavior. For example:
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:
- Create a
.lessfile for your feature, if one does not yet exist.
- Import this
.lessfile into the relevant base less file e.g.
- Import Dialtone into your
.lessfile 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.
- 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-visible installation instructions.
- Postcss focus-visible plugin adds a .focus-visible class for every :focus-visible class found in your css, follow the postcss-focus-visible installation instructions.
All Dialtone components are implemented with
box-sizing: border-box; applied. To understand why we prefer
content-box, please visit this Stack Overflow Teams question.
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.
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.