Design System

"an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment" Frank Chimero - The Web's Grain (a worthwhile read)

In our design system (based on Tachyons.io), components are styled on the template level with Declarative CSS.

Small, atomic, and reusable CSS classes correspond to well defined and responsive CSS properties (based on a 16px REM scaling system). They are composed together to quickly and easily create consistent, scalable components and layouts.

Responsive Designs are achieved with each CSS class defaulting to mobile screens, with responsive class suffix flags to change the styles across the 3 Media Queries. See more in Media Queries.

Example:

<div class="toggle-switch">
  <div class="b--gray ba br-pill flex h2 overflow-hidden w4">
    <button class="bn bg-light-gray shadow-2 w-50 z-1">
      <span class="f7 futura-heavy gray tracked-light ttu">Off</span>
    </button>
    <button class="bn bg-green w-50">
      <span class="f7 futura-heavy tracked-light ttu white">On</span>
    </button>
  </div>
</div>

Result:

So you think about what you want your component to look like, and then declare what properties make up that component.

The outer container div holding our two buttons has a gray border, border all sides, border radius of 'pill', displays it with flexbox, has a height of 2 (2rem = 32px), its overflow is hidden (or ), and a width of 4 (4rem = 64px)

Can you extrapolate what the button and span classes mean?

Then, you can think about what states look like, by figuring out what the differences in properties are.

<div class="b--gray ba br-pill flex h2 overflow-hidden w4">
  <button class="bn bg-red w-50">
    <span class="f7 futura-heavy tracked-light ttu white">Off</span>
  </button>
  <button class="bn bg-light-gray shadow-2 w-50 z-1">
    <span class="f7 futura-heavy tracked-light ttu gray">On</span>
  </button>
</div>