All classes can have responsive variations. Using our plugin @dialpad/postcss-responsive-variations and configuring the breakpoint constants, you can create media queries represented in conditional prefixes. These prefixed classes allow you to apply a style or property within a specific breakpoint.


To create the responsive variations of classes we use postcss and our custom plugin @dialpad/postcss-responsive-variations. This plugin takes the breakpoints and the classes you need to have responsive variations as arguments.


To help keep prefixes concise, we use abbreviations. This syntax is used consistently across all responsive classes. As the viewport size grows, you can change an elements properties. For example, you can set an element to display normally, but be hidden at smaller sizes: .d-d-block .sm:d-d-none.

Class PrefixMedia QueryDescription
.xl:{class}max-width: 1264pxThe class is applied on extra large browser widths and below.
.lg:{class}max-width: 980pxThe class is applied on large browser widths and below.
.md:{class}max-width: 640pxThe class is applied on medium browser widths and below.
.sm:{class}max-width: 480pxThe class is applied on small browser widths and below.

Note: These breakpoints may change.


<div class="d-d-none xl:d-d-block">...</div>
<div class="d-d-none lg:d-d-block">...</div>
<div class="d-d-none md:d-d-block">...</div>
<div class="d-d-none sm:d-d-block">...</div>
Last Updated: