Dialtone
GitHub Repo
Codepen Template

Layouts

Common grid layout patterns used throughout Dialpad and UberConference.

Use .d-gl-sidebar to create a simple 2-column layout with a sidebar and main content area.

CSS Variables

CSS VarOutput
var(--sidebar-width)minmax(20rem, 30rem);
var(--content-width)minmax(32rem, 90ch);

Example

<div class="d-d-grid d-gg16 d-gl-sidebar">
  <div class="d-ga-sidebar">...</div>
  <div class="d-ga-content">...</div>
</div>

Use .d-gl-header to create a simple 2-row layout with a header area and main content area. Usually this is nested within a .d-gl-sidebar content area.

CSS Variables

CSS VarOutput
var(--header-height)minmax(6.4rem, min-content);
var(--content-height)minmax(64rem, max-content);

Example

<div class="d-d-grid d-gg16 d-gl-sidebar">
  <div class="d-ga-sidebar">...</div>
  <div class="d-ga-content">
    <div class="d-d-grid d-gg16 d-gl-header">
      <div class="d-ga-header">...</div>
      <div class="d-ga-content">...</div>
    </div>
  </div>
</div>

Columns

Use .d-g-cols{n} to create a multi-column layout.

Classes

ClassOutput
.d-g-cols1grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
.d-g-cols2grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
.d-g-cols3grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
.d-g-cols4grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
.d-g-cols5grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
.d-g-cols6grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
.d-g-cols7grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
.d-g-cols8grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
.d-g-cols9grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
.d-g-cols10grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
.d-g-cols11grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
.d-g-cols12grid-template-columns: repeat(12, minmax(0, 1fr)) !important;

Example

<div class="d-d-grid d-gg16 d-g-cols4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Nesting Grids

Unlike some CSS, CSS grid does not cascade beyond the parent and its direct children (parent-element > *). We can use this to our advantage by being able to nest grids within each other without cascade errors.

<div class="d-d-grid d-gg16 d-g-cols2">
  <div>1</div>
  <div class="d-d-grid d-gg16 d-g-cols2">
    <div>3</div>
    <div>4</div>
  </div>
</div>
Last Updated: