Objects

Objects are design patterns that have no inherit visual design, like a grid or a media / flag object.

Icons

An icon object is designed for the Just a Few Icons project. It forces a width and height to the object and gives the <svg> a value of currentColor so that the fill of the icon can be changed with a color utility class.

Small Icon

Medium Icon

Large Icon

Small Icon

Medium Icon

Large Icon

View sourceHTML + CSS

HTML

<div class="o-Flex o-Flex--j--sa u-mb3 u-ltgray">
  <div class="u-center u-p1">
    <h6 class="small u-w400">Small Icon</h6>
    <svg viewBox="0 0 650 650" class="o-Icon o-Icon--sm u-blue">
      <g>
        <path d="M462.4,201.1c-4.8-53.3-43.9-100.6-96-117.2c-52.1-16.5-110-0.2-145.6,41.2 c-38.2,44.3-44.5,104.4-16.1,157.6c18.1,33.9,35.4,68.1,44.2,105.8c2.9,12.4,5,25.1,8.2,37.5c3.5,13.8,10.3,19.5,24.3,20 c14.4,0.5,28.8,0.1,43.2,0.1c0,0,0,0,0,0.1c14.4,0,28.8,0.4,43.2-0.1c15-0.6,21.8-6.5,25.5-21.2c2.2-8.7,3.7-17.5,5.4-26.3 c8.1-41,25.7-78.2,45.7-114.4C458.7,258.2,465.1,230.5,462.4,201.1z M301.8,121.2c-1.5,7.3-8.7,12-16,10.5 c-1.2-0.2-7.8,1-18.9,10.3c-16.7,13.9-29.3,33.6-29.4,42c-0.1,7.4-6.2,13.3-13.5,13.3c-0.1,0-0.1,0-0.2,0 c-7.5-0.1-13.5-6.3-13.3-13.8c0.3-20.5,21.3-48.2,40.9-63.9c15.1-12.1,28.6-17,40.1-14.6C298.6,106.7,303.3,113.9,301.8,121.2z">
        </path>
        <g>
          <rect x="256.5" y="457" width="137" height="22.5">
          </rect>
          <rect x="256.5" y="488" width="137" height="22.5">
          </rect>
          <rect x="256.5" y="519" width="137" height="22.5">
          </rect>
          <polygon points="382.2,549.9 267.8,549.9 276.2,572.5 373.8,572.5">
          </polygon>
        </g>
      </g>
    </svg>
  </div>
  <div class="u-center u-p1">
    <h6 class="small u-w400">Medium Icon</h6>
    <svg viewBox="0 0 650 650" class="o-Icon o-Icon--md u-blue">
      <g>
        <path d="M462.4,201.1c-4.8-53.3-43.9-100.6-96-117.2c-52.1-16.5-110-0.2-145.6,41.2 c-38.2,44.3-44.5,104.4-16.1,157.6c18.1,33.9,35.4,68.1,44.2,105.8c2.9,12.4,5,25.1,8.2,37.5c3.5,13.8,10.3,19.5,24.3,20 c14.4,0.5,28.8,0.1,43.2,0.1c0,0,0,0,0,0.1c14.4,0,28.8,0.4,43.2-0.1c15-0.6,21.8-6.5,25.5-21.2c2.2-8.7,3.7-17.5,5.4-26.3 c8.1-41,25.7-78.2,45.7-114.4C458.7,258.2,465.1,230.5,462.4,201.1z M301.8,121.2c-1.5,7.3-8.7,12-16,10.5 c-1.2-0.2-7.8,1-18.9,10.3c-16.7,13.9-29.3,33.6-29.4,42c-0.1,7.4-6.2,13.3-13.5,13.3c-0.1,0-0.1,0-0.2,0 c-7.5-0.1-13.5-6.3-13.3-13.8c0.3-20.5,21.3-48.2,40.9-63.9c15.1-12.1,28.6-17,40.1-14.6C298.6,106.7,303.3,113.9,301.8,121.2z">
        </path>
        <g>
          <rect x="256.5" y="457" width="137" height="22.5">
          </rect>
          <rect x="256.5" y="488" width="137" height="22.5">
          </rect>
          <rect x="256.5" y="519" width="137" height="22.5">
          </rect>
          <polygon points="382.2,549.9 267.8,549.9 276.2,572.5 373.8,572.5">
          </polygon>
        </g>
      </g>
    </svg>
  </div>
  <div class="u-center u-p1">
    <h6 class="small u-w400">Large Icon</h6>
    <svg viewBox="0 0 650 650" class="o-Icon o-Icon--lg u-blue">
      <g>
        <path d="M462.4,201.1c-4.8-53.3-43.9-100.6-96-117.2c-52.1-16.5-110-0.2-145.6,41.2 c-38.2,44.3-44.5,104.4-16.1,157.6c18.1,33.9,35.4,68.1,44.2,105.8c2.9,12.4,5,25.1,8.2,37.5c3.5,13.8,10.3,19.5,24.3,20 c14.4,0.5,28.8,0.1,43.2,0.1c0,0,0,0,0,0.1c14.4,0,28.8,0.4,43.2-0.1c15-0.6,21.8-6.5,25.5-21.2c2.2-8.7,3.7-17.5,5.4-26.3 c8.1-41,25.7-78.2,45.7-114.4C458.7,258.2,465.1,230.5,462.4,201.1z M301.8,121.2c-1.5,7.3-8.7,12-16,10.5 c-1.2-0.2-7.8,1-18.9,10.3c-16.7,13.9-29.3,33.6-29.4,42c-0.1,7.4-6.2,13.3-13.5,13.3c-0.1,0-0.1,0-0.2,0 c-7.5-0.1-13.5-6.3-13.3-13.8c0.3-20.5,21.3-48.2,40.9-63.9c15.1-12.1,28.6-17,40.1-14.6C298.6,106.7,303.3,113.9,301.8,121.2z">
        </path>
        <g>
          <rect x="256.5" y="457" width="137" height="22.5">
          </rect>
          <rect x="256.5" y="488" width="137" height="22.5">
          </rect>
          <rect x="256.5" y="519" width="137" height="22.5">
          </rect>
          <polygon points="382.2,549.9 267.8,549.9 276.2,572.5 373.8,572.5">
          </polygon>
        </g>
      </g>
    </svg>
  </div>
</div>
<div class="o-Flex o-Flex--j--sa u-ltgray">
  <div class="u-center u-p1">
    <h6 class="small u-w400">Small Icon</h6>
    <svg viewBox="0 0 650 650" class="o-Icon o-Icon--sm u-blue">
      <g>
        <g>
          <path d="M495.2,230H427l-20-50H243l-20,50h-68.2c-12.9,0-23.3,10.5-23.3,23.3v193.4c0,12.9,10.5,23.3,23.3,23.3 h340.4c12.9,0,23.3-10.5,23.3-23.3V253.3C518.5,240.4,508.1,230,495.2,230z M325,427.9c-38.7,0-70.3-31.5-70.3-70.3 c0-38.7,31.5-70.3,70.3-70.3c38.7,0,70.3,31.5,70.3,70.3C395.3,396.4,363.7,427.9,325,427.9z M424.9,293.1 c-7.5,0-13.5-6-13.5-13.5s6-13.5,13.5-13.5c7.5,0,13.5,6,13.5,13.5S432.3,293.1,424.9,293.1z">
          </path>
          <path d="M325,305.4c-28.8,0-52.2,23.4-52.2,52.2c0,28.8,23.4,52.2,52.2,52.2s52.2-23.4,52.2-52.2 C377.2,328.9,353.8,305.4,325,305.4z">
          </path>
        </g>
        <path d="M212.9,224.1h-59v-16.8c0-3.3,2.7-6,6-6h47c3.3,0,6,2.7,6,6V224.1z">
        </path>
      </g>
    </svg>
  </div>
  <div class="u-center u-p1">
    <h6 class="small u-w400">Medium Icon</h6>
    <svg viewBox="0 0 650 650" class="o-Icon o-Icon--md u-blue">
      <g>
        <g>
          <path d="M495.2,230H427l-20-50H243l-20,50h-68.2c-12.9,0-23.3,10.5-23.3,23.3v193.4c0,12.9,10.5,23.3,23.3,23.3 h340.4c12.9,0,23.3-10.5,23.3-23.3V253.3C518.5,240.4,508.1,230,495.2,230z M325,427.9c-38.7,0-70.3-31.5-70.3-70.3 c0-38.7,31.5-70.3,70.3-70.3c38.7,0,70.3,31.5,70.3,70.3C395.3,396.4,363.7,427.9,325,427.9z M424.9,293.1 c-7.5,0-13.5-6-13.5-13.5s6-13.5,13.5-13.5c7.5,0,13.5,6,13.5,13.5S432.3,293.1,424.9,293.1z">
          </path>
          <path d="M325,305.4c-28.8,0-52.2,23.4-52.2,52.2c0,28.8,23.4,52.2,52.2,52.2s52.2-23.4,52.2-52.2 C377.2,328.9,353.8,305.4,325,305.4z">
          </path>
        </g>
        <path d="M212.9,224.1h-59v-16.8c0-3.3,2.7-6,6-6h47c3.3,0,6,2.7,6,6V224.1z">
        </path>
      </g>
    </svg>
  </div>
  <div class="u-center u-p1">
    <h6 class="small u-w400">Large Icon</h6>
    <svg viewBox="0 0 650 650" class="o-Icon o-Icon--lg u-blue">
      <g>
        <g>
          <path d="M495.2,230H427l-20-50H243l-20,50h-68.2c-12.9,0-23.3,10.5-23.3,23.3v193.4c0,12.9,10.5,23.3,23.3,23.3 h340.4c12.9,0,23.3-10.5,23.3-23.3V253.3C518.5,240.4,508.1,230,495.2,230z M325,427.9c-38.7,0-70.3-31.5-70.3-70.3 c0-38.7,31.5-70.3,70.3-70.3c38.7,0,70.3,31.5,70.3,70.3C395.3,396.4,363.7,427.9,325,427.9z M424.9,293.1 c-7.5,0-13.5-6-13.5-13.5s6-13.5,13.5-13.5c7.5,0,13.5,6,13.5,13.5S432.3,293.1,424.9,293.1z">
          </path>
          <path d="M325,305.4c-28.8,0-52.2,23.4-52.2,52.2c0,28.8,23.4,52.2,52.2,52.2s52.2-23.4,52.2-52.2 C377.2,328.9,353.8,305.4,325,305.4z">
          </path>
        </g>
        <path d="M212.9,224.1h-59v-16.8c0-3.3,2.7-6,6-6h47c3.3,0,6,2.7,6,6V224.1z">
        </path>
      </g>
    </svg>
  </div>
</div>

CSS

/*---------Icon Object----------*/

/*
  NOTE: Designed with justafewicons.co in mind
*/

:root {
  --icon-size: 3rem;
  --icon-xs: calc(var(--icon-size) * .375);
  --icon-sm: calc(var(--icon-size) * .625);
  --icon-md: calc(var(--icon-size) * 1.125);
  --icon-lg: calc(var(--icon-size) * 1.5);
}

.o-Icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
}

.o-Icon--xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.o-Icon--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.o-Icon--md {
  width: var(--icon-md);
  height: var(--icon-md);
}

.o-Icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

Responsive Table UI

This is a responsive table implementation. This is based off of this demo and makes heavy use of the data-heading attribute on the <td> elements.

<td class="table__content" data-heading="Name">Gizmo</td>

Name	Type	Grade
Gizmo	Robot	A+
Sherlock Holmes	Human	B-
Merlin	Wizard	C
Richard Nixon	Cyborg	B-

View sourceHTML + CSS

HTML

<table class="o-RDTable u-w400">
  <thead class="small">
    <tr>
      <th class="o-RDTable__heading u-w700 u-left u-p2">Name</th>
      <th class="o-RDTable__heading u-w700 u-left u-p2">Type</th>
      <th class="o-RDTable__heading u-w700 u-left u-p2">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr class="o-RDTable__row">
      <td class="o-RDTable__content u-p2" data-heading="Name">Gizmo</td>
      <td class="o-RDTable__content u-p2" data-heading="Type">Robot</td>
      <td class="o-RDTable__content u-p2" data-heading="Grade">A+</td>
    </tr>
    <tr class="o-RDTable__row">
      <td class="o-RDTable__content u-p2" data-heading="Name">Sherlock Holmes</td>
      <td class="o-RDTable__content u-p2" data-heading="Type">Human</td>
      <td class="o-RDTable__content u-p2" data-heading="Grade">B-</td>
    </tr>
    <tr class="o-RDTable__row">
      <td class="o-RDTable__content u-p2" data-heading="Name">Merlin</td>
      <td class="o-RDTable__content u-p2" data-heading="Type">Wizard</td>
      <td class="o-RDTable__content u-p2" data-heading="Grade">C</td>
    </tr>
    <tr class="o-RDTable__row">
      <td class="o-RDTable__content u-p2" data-heading="Name">Richard Nixon</td>
      <td class="o-RDTable__content u-p2" data-heading="Type">Cyborg</td>
      <td class="o-RDTable__content u-p2" data-heading="Grade">B-</td>
    </tr>
  </tbody>
</table>

CSS

/*--------Responsive Table Object----------*/

:root {
  --Table-border: 1px solid #ccc;
  --Table-label-color: var(--text);
  --Table-label-size: 0.625rem;
  --Table-label-width: 7rem;
  --Table-label-alignment: left;
}

.o-RDTable {
  width: 100%;
}

.o-RDTable__heading {
  display: none;
}
.o-RDTable__content {
  display: block;
}

.o-RDTable__content::before {
  content: attr(data-heading);
  display: inline-block;
  width: var(--Table-label-width);
  margin-right: 1rem;
  color: var(--Table-label-color);
  font-size: var(--Table-label-size);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: var(--Table-label-alignment);
}

.o-RDTable__row:not(:last-of-type) {
  border-bottom: var(--Table-border);
}

@media only screen and (min-width: 48rem) {
  .o-RDTable__content,
  .o-RDTable__heading {
    display: table-cell;
  }

  .o-RDTable__content::before {
    display: none;
  }
}

UI List

Typically, in a project, you may want to reset a list like this for navigation or displayed options but you might not want to override the default <ul> element. This pattern gives you that flexibility.

One
Two
Three
Four
Five

One
Two
Three
Four
Five

One
Two
Three
Four
Five

View sourceHTML + CSS

HTML

<div class="o-Flex o-Flex--j--sa">
  <div class="o-Column--4/12">
    <ul class="o-UIList">
      <li class="o-UIList__item u-m2">One</li>
      <li class="o-UIList__item u-m2">Two</li>
      <li class="o-UIList__item u-m2">Three</li>
      <li class="o-UIList__item u-m2">Four</li>
      <li class="o-UIList__item u-m2">Five</li>
    </ul>
  </div>
  <div class="o-Column--4/12 u-mx4">
    <ul class="o-UIList o-UIList--dividers">
      <li class="o-UIList__item u-m2">One</li>
      <li class="o-UIList__item u-m2">Two</li>
      <li class="o-UIList__item u-m2">Three</li>
      <li class="o-UIList__item u-m2">Four</li>
      <li class="o-UIList__item u-m2">Five</li>
    </ul>
  </div>
  <div class="o-Column--4/12">
    <ul class="o-UIList o-UIList--inline">
      <li class="o-UIList__item u-m2">One</li>
      <li class="o-UIList__item u-m2">Two</li>
      <li class="o-UIList__item u-m2">Three</li>
      <li class="o-UIList__item u-m2">Four</li>
      <li class="o-UIList__item u-m2">Five</li>
    </ul>
  </div>
</div>

CSS

/*--------UI List Object----------*/

:root {
  --UIList-border: #CCC;
  --UIList-space: .5rem;
}

.o-UIList {
  list-style: inside none;
  margin: 0;
  padding: 0;
}

.o-UIList--dividers > .o-UIList__item:not(:last-of-type) {
  border-bottom: 1px solid var(--UIList-border);
}

.o-UIList--inline > .o-UIList__item {
  display: inline-block;
}

.o-UIList__item {
  padding: var(--UIList-space) 0;
}

Containers

This is a standard page wrapper object. It providers a max-width to wrap content in with the option of centering it within the parent container. This object is based on this classic pattern.

Xtra Small = 28.125rem / 450px

Small = 37.5rem / 600px

Medium = 46.875rem / 750px

Large = 56.25rem / 900px

Full = 75rem / 1200px

View sourceHTML + CSS

HTML

<div class="u-w700">
  <div class="o-Container--xs o-Container--wrap u-mb2 u-bg--blue u-p2 u-center u-offwhite">Xtra Small = 28.125rem / 450px</div>
  <div class="o-Container--sm o-Container--wrap u-mb2 u-bg--blue u-p2 u-center u-offwhite">Small = 37.5rem / 600px</div>
  <div class="o-Container--md o-Container--wrap u-mb2 u-bg--blue u-p2 u-center u-offwhite">Medium = 46.875rem / 750px</div>
  <div class="o-Container--lg o-Container--wrap u-mb2 u-bg--blue u-p2 u-center u-offwhite">Large = 56.25rem / 900px</div>
  <div class="o-Container o-Container--wrap u-mb2 u-bg--blue u-p2 u-center u-offwhite">Full = 75rem / 1200px</div>
</div>

CSS

/*----------Containers / Wrapper Object----------*/

:root {
  --container-lg: calc(var(--base-container) * .75);
  --container-md: calc(var(--base-container) * .625);
  --container-sm: calc(var(--base-container) * .5);
  --container-xs: calc(var(--base-container) * .375);
}

.o-Container,
.o-Container--full { max-width: var(--base-container); }
.o-Container--lg { max-width: var(--container-lg); }
.o-Container--md { max-width: var(--container-md); }
.o-Container--sm { max-width: var(--container-sm); }
.o-Container--xs { max-width: var(--container-xs); }

.o-Container--center {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

Flex Object

Flexbox is a really powerful layout primitive and this object helps build a parent / child system for applying flexbox to your layout. It exposes a o-Flex parent with a lot of modifiers and a o-Flex__child (recommend applying o-Column with the child element).

One Flex Child

Second Flex Child

Space Around

One Flex Child

Second Flex Child

Space Between

One Flex Child

Second Flex Child

Centered

One Flex Child

Second Flex Child

Centered Horizontally

One Flex Child

Second Flex Child

Third Flex Child

View sourceHTML + CSS

HTML

<div class="o-Flex u-center u-offwhite u-mb4">
  <div class="o-Flex__child u-bg--fuchsia u-m1 u-p2">
    <span>One Flex Child</span>
  </div>
  <div class="o-Flex__child u-bg--bluegreen u-m1 u-p2">
    <span>Second Flex Child</span>
  </div>
</div>
<h6 class="small u-caps">Space Around</h6>
<div class="o-Flex o-Flex--j--sa u-center u-offwhite u-mb4">
  <div class="u-bg--fuchsia u-m1 u-p2">
    <span>One Flex Child</span>
  </div>
  <div class="u-bg--bluegreen u-m1 u-p2">
    <span>Second Flex Child</span>
  </div>
</div>
<h6 class="small u-caps">Space Between</h6>
<div class="o-Flex o-Flex--j--sb u-center u-offwhite u-mb4">
  <div class="u-bg--fuchsia u-m1 u-p2">
    <span>One Flex Child</span>
  </div>
  <div class="u-bg--bluegreen u-m1 u-p2">
    <span>Second Flex Child</span>
  </div>
</div>
<h6 class="small u-caps">Centered</h6>
<div class="o-Flex o-Flex--j--c u-center u-offwhite u-mb4">
  <div class="u-bg--fuchsia u-m1 u-p2">
    <span>One Flex Child</span>
  </div>
  <div class="u-bg--bluegreen u-m1 u-p2">
    <span>Second Flex Child</span>
  </div>
</div>
<h6 class="small u-caps">Centered Horizontally</h6>
<div class="o-Flex o-Flex--center--h u-center u-offwhite u-mb4">
  <div class="o-Flex__child u-bg--fuchsia u-m1 u-py6 u-px2">
    <span>One Flex Child</span>
  </div>
  <div class="o-Flex__child u-bg--bluegreen u-m1 u-p2">
    <span>Second Flex Child</span>
  </div>
  <div class="o-Flex__child u-bg--yellow u-m1 u-py4 u-px2">
    <span>Third Flex Child</span>
  </div>
</div>

CSS

/*----------Flex Object----------*/

.o-Flex { display: flex; }

/* Wrap */

.o-Flex--wrap { flex-wrap: wrap; }

/* Centering */

.o-Flex--center--h { align-items: center; }

.o-Flex--center--v {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Direction */

.o-Flex--row { flex-direction: row; }
.o-Flex--column { flex-direction: column; }

/* Justified Content */

.o-Flex--j--sb,
.o-Flex--between {
  justify-content: space-between;
}

.o-Flex--j--sa,
.o-Flex--around {
  justify-content: space-around;
}

.o-Flex--j--c,
.o-Flex--center {
  justify-content: center;
}

/* Ordering Flex Objects */

.o-Flex--first { order: 1; }
.o-Flex--last { order: unset; }

/*
  NOTE: The flex child element needs an explicit width & min-height
  for bugs related to Safari 9 and Chrome 44
*/

.o-Flex__child {
  display: initial;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: auto;
}

Grid

This is a simple 12 column grid system that has responsive suffixes. .o-Column--[1-12]/12[@sm, @md, @lg]. These are floated columns, so they need to be cleared unless they have a flex parent and occupy a max-width: 100% so they can’t exceed the width of the parent.

2/12

width = 16.667%

10/12

width = 83.333%

3/12

width = 25% at base, 33.333% at medium breakpoint

3/12

width = 25% at base, 33.333% at medium breakpoint

6/12

width = 50% at base, 33.333% at medium breakpoint

View sourceHTML + CSS

HTML

<div class="u-cf u-offwhite u-center u-mb3">
  <div class="o-Column--2/12 u-fl u-bg--red u-p2">
    <h5 class="u-system u-w300">2/12</h5>
    <small>width = 16.667%</small>
  </div>
  <div class="o-Column--10/12 u-fl u-bg--yellow u-p2">
    <h5 class="u-system u-w300">10/12</h5>
    <small>width = 83.333%</small>
  </div>
</div>
<div class="u-cf u-offwhite u-center u-mb3">
  <div class="o-Column--3/12 o-Column--4/12@md u-fl u-bg--blue u-p2">
    <h5 class="u-system u-w300">3/12</h5>
    <small>width = 25% at base, 33.333% at medium breakpoint</small>
  </div>
  <div class="o-Column--3/12 o-Column--4/12@md u-fl u-bg--bluegreen u-p2">
    <h5 class="u-system u-w300">3/12</h5>
    <small>width = 25% at base, 33.333% at medium breakpoint</small>
  </div>
  <div class="o-Column--6/12 o-Column--4/12@md u-fl u-bg--green u-p2">
    <h5 class="u-system u-w300">6/12</h5>
    <small>width = 50% at base, 33.333% at medium breakpoint</small>
  </div>
</div>

CSS

/*----------Grid Object----------*/

:root {
  --col-1: calc((1 / 12) * 100%);
  --col-2: calc((2 / 12) * 100%);
  --col-3: calc((3 / 12) * 100%);
  --col-4: calc((4 / 12) * 100%);
  --col-5: calc((5 / 12) * 100%);
  --col-6: calc((6 / 12) * 100%);
  --col-7: calc((7 / 12) * 100%);
  --col-8: calc((8 / 12) * 100%);
  --col-9: calc((9 / 12) * 100%);
  --col-10: calc((10 / 12) * 100%);
  --col-11: calc((11 / 12) * 100%);
  --col-12: calc((12 / 12) * 100%);
}

[class*='o-Column--'] {
  max-width: 100%;
}

.o-Column {
  float: left;
  position: relative;
  min-height: 1px;
}

.o-Column--1\/12 {
  width: var(--col-1);
}
.o-Column--2\/12 {
  width: var(--col-2);
}
.o-Column--3\/12 {
  width: var(--col-3);
}
.o-Column--4\/12 {
  width: var(--col-4);
}
.o-Column--5\/12 {
  width: var(--col-5);
}
.o-Column--6\/12 {
  width: var(--col-6);
}
.o-Column--7\/12 {
  width: var(--col-7);
}
.o-Column--8\/12 {
  width: var(--col-8);
}
.o-Column--9\/12 {
  width: var(--col-9);
}
.o-Column--10\/12 {
  width: var(--col-10);
}
.o-Column--11\/12 {
  width: var(--col-11);
}
.o-Column--12\/12 {
  width: var(--col-12);
}

@media only screen and (min-width: 31.25rem) {
  .o-Column\@sm {
    float: left;
    position: relative;
    min-height: 1px;
  }

  .o-Column--1\/12\@sm {
    width: var(--col-1);
  }
  .o-Column--2\/12\@sm {
    width: var(--col-2);
  }
  .o-Column--3\/12\@sm {
    width: var(--col-3);
  }
  .o-Column--4\/12\@sm {
    width: var(--col-4);
  }
  .o-Column--5\/12\@sm {
    width: var(--col-5);
  }
  .o-Column--6\/12\@sm {
    width: var(--col-6);
  }
  .o-Column--7\/12\@sm {
    width: var(--col-7);
  }
  .o-Column--8\/12\@sm {
    width: var(--col-8);
  }
  .o-Column--9\/12\@sm {
    width: var(--col-9);
  }
  .o-Column--10\/12\@sm {
    width: var(--col-10);
  }
  .o-Column--11\/12\@sm {
    width: var(--col-11);
  }
  .o-Column--12\/12\@sm {
    width: var(--col-12);
  }
}

@media only screen and (min-width: 48rem) {
  .o-Column\@md {
    float: left;
    position: relative;
    min-height: 1px;
  }

  .o-Column--1\/12\@md {
    width: var(--col-1);
  }
  .o-Column--2\/12\@md {
    width: var(--col-2);
  }
  .o-Column--3\/12\@md {
    width: var(--col-3);
  }
  .o-Column--4\/12\@md {
    width: var(--col-4);
  }
  .o-Column--5\/12\@md {
    width: var(--col-5);
  }
  .o-Column--6\/12\@md {
    width: var(--col-6);
  }
  .o-Column--7\/12\@md {
    width: var(--col-7);
  }
  .o-Column--8\/12\@md {
    width: var(--col-8);
  }
  .o-Column--9\/12\@md {
    width: var(--col-9);
  }
  .o-Column--10\/12\@md {
    width: var(--col-10);
  }
  .o-Column--11\/12\@md {
    width: var(--col-11);
  }
  .o-Column--12\/12\@md {
    width: var(--col-12);
  }
}

@media only screen and (min-width: 57.75rem) {
  .o-Column\@lg {
    float: left;
    position: relative;
    min-height: 1px;
  }

  .o-Column--1\/12\@lg {
    width: var(--col-1);
  }
  .o-Column--2\/12\@lg {
    width: var(--col-2);
  }
  .o-Column--3\/12\@lg {
    width: var(--col-3);
  }
  .o-Column--4\/12\@lg {
    width: var(--col-4);
  }
  .o-Column--5\/12\@lg {
    width: var(--col-5);
  }
  .o-Column--6\/12\@lg {
    width: var(--col-6);
  }
  .o-Column--7\/12\@lg {
    width: var(--col-7);
  }
  .o-Column--8\/12\@lg {
    width: var(--col-8);
  }
  .o-Column--9\/12\@lg {
    width: var(--col-9);
  }
  .o-Column--10\/12\@lg {
    width: var(--col-10);
  }
  .o-Column--11\/12\@lg {
    width: var(--col-11);
  }
  .o-Column--12\/12\@lg {
    width: var(--col-12);
  }
}

Intrinsic Object

The purpose of the intrinsic object is that inner media maintains its proportions when resized. Based off of ‘Intrinsic Placeholders with the Picture Element’ from Dave Rupert.

View sourceHTML + CSS

HTML

<div class="o-Flex o-Flex--wrap">
  <div class="o-Column--12/12 o-Column--6/12@md u-p2">
    <div class="o-Intrinsic o-Intrinsic--16x9">
      <iframe src="https://www.youtube.com/embed/-fqu-5IuOkc" class="o-Intrinsic__item" style="border:0px;" allowFullScreen>
      </iframe>
    </div>
  </div>
  <div class="o-Column--12/12 o-Column--6/12@md u-p2">
    <div class="o-Intrinsic o-Intrinsic--16x9">
      <iframe src="https://www.youtube.com/embed/-fqu-5IuOkc" class="o-Intrinsic__item" style="border:0px;" allowFullScreen>
      </iframe>
    </div>
  </div>
</div>

CSS

/*----------Intrinsic Ratio Container Object----------*/

/*
  NOTE: Based off of 'Intrinsic Placeholders with the Picture Element'
  http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/
*/

.o-Intrinsic {
  display: block;
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 100%;
}

.o-Intrinsic__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* Intrinsic Sizes */

.o-Intrinsic--square { padding-top: 100%; }
.o-Intrinsic--4x3 { padding-top: 75%; }
.o-Intrinsic--16x9 { padding-top: 56.25%; }
.o-Intrinsic--3x1 { padding-top: 33.33333333%; }

Media Block

The media object is a really great foundational part of CSS from Nicole Sullivan.

A couple of caveats

The media object doesn’t wrap content onto two lines
This implementation uses flexbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View sourceHTML + CSS

HTML

<div class="o-Container--lg">
  <div class="o-Media u-mb3 u-cf">
    <div class="o-Media__figure">
      <img src="/layr/static/assets/filler-image.svg" alt="Impossible Triangle"/>
    </div>
    <div class="o-Media__body u-pl3 small">
      <p class="u-system">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="o-Media u-mb3 u-cf">
    <div class="o-Media__figure">
      <img src="/layr/static/assets/filler-image.svg" alt="Impossible Triangle"/>
    </div>
    <div class="o-Media__body u-pl3 small">
      <p class="u-system">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

CSS

/*--------Media Block Object----------*/

/*
  NOTE: This is a Flexbox implementation of the Media Object from Nicole Sullivan
  from Solved by Flexbox by Philip Walton
  https://philipwalton.github.io/solved-by-flexbox/demos/media-object/
*/

:root {
  --media-figure: 6.25rem;
  --media-figure-sm: calc(var(--media-figure) * 0.75);
}

.o-Media {
  display: flex;
  align-items: flex-start;
}

.o-Media__figure {
  max-width: var(--media-figure-sm);
}

.o-Media__body {
  flex: 1;
}

@media only screen and (min-width: 48rem) {
  .o-Media__figure {
    max-width: var(--media-figure);
  }
}

Flag

The flag object is a UI pattern that’s very similar to the media object. There are two key differences, for one it doesn’t assume left aligned figure. And then the flag object is flexible in regards to vertical alignment. Like the above media object implementation, it doesn’t wrap content onto two lines.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!

Top

Bottom

Reversed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed.

View sourceHTML + CSS

HTML

<div class="o-Flag u-mb3">
  <figure class="o-Flag__figure o-col--3/12 u-mr3">
    <img src="/layr/static/assets/filler-image.svg" alt="Impossible Triangle" class="u-bl"/>
  </figure>
  <div class="o-Flag__body small">
    <p class="u-m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!</p>
  </div>
</div>
<div class="o-Flag o-Flag--top u-mb3">
  <figure class="o-Flag__figure o-col--3/12 u-mr3">
    <img src="/layr/static/assets/filler-image.svg" alt="Impossible Triangle" class="u-bl"/>
  </figure>
  <div class="o-Flag__body small">
    <h6 class="u-mb2">Top</h6>
    <p class="u-m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!</p>
  </div>
</div>
<div class="o-Flag o-Flag--bottom u-mb3">
  <figure class="o-Flag__figure o-col--3/12 u-mr3">
    <img src="/layr/static/assets/filler-image.svg" alt="Impossible Triangle" class="u-bl"/>
  </figure>
  <div class="o-Flag__body small">
    <h6 class="u-mb2">Bottom</h6>
    <p class="u-m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!</p>
  </div>
</div>
<div class="o-Flag o-Flag--reverse u-mb3">
  <figure class="o-Flag__figure o-col--3/12">
    <img src="/layr/static/assets/filler-image.svg" alt="Impossible Triangle" class="u-bl"/>
  </figure>
  <div class="o-Flag__body small u-mr3">
    <h6 class="u-mb2">Reversed</h6>
    <p class="u-m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed.</p>
  </div>
</div>

CSS

/*---------Flag Object----------*/

/*
  NOTE: From 'The flag object' from Harry Roberts
  http://csswizardry.com/2013/05/the-flag-object/
*/

.o-Flag {
  display: flex;
  align-items: center;
  width: 100%;
}

.o-Flag--top { align-items: flex-start; }
.o-Flag--bottom { align-items: flex-end; }
.o-Flag--reverse { flex-direction: row-reverse; }

.o-Flag__figure,
.o-Flag__body {
  display: initial;
  max-width: 100%;
  min-width: 0;
}

.o-Flag__figure { flex: 1 1 auto; }
.o-Flag__body { flex: 4 4 auto; }

Run the reference implementation

npm install
npm run dev --workspace layr-documentation