"[ ] a longing [ ]."

Hi I'm Miriam

Young OddBirds

Susy

Don't use Susy

Herman

1. Why Design Systems??

  1. Pattern Audit

  2. Start with Design Tokens

  3. Baked-In Tools

  4. Define the API

  5. Automation is Essential

Lightning Design System from SalesForce

Motion

Rachel Nabors

Vuetify

Lonely Planet

Mail Chimp

Preview of size patterns

M

NYC Transit Authority Graphics Standards Manual

Graphics Standards Manual: 1970

N

Numbers

Sign Construction and Engineering

Nerd.

Design Systems

Style Guides + Toolkits + Pattern Libraries + ???

Lego Component Library

Lego organizer

Lego

Brick separator

Nerd.

Integration of Design + Code

+ process + tools ++

Lightning Icon Code

Lightning Code Scribbled

You are not MailForce or InstaFace.

(unless you are)

Similar Problems

Unique Constraints

(Team Size)

(Team Structure)

(Internal vs. Consulting)

(Is it 1970?)

New OddBird

“Tiny Bootstraps, for Every Client

— Dave Rupert

.grid-span {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}

Code Patterns Add Meaning

.grid-span {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);
}

Code is Communication

— Sarah Drasner

// Susy Span
// ---------
/// This is the primary function in Susy —
/// used to return the width of a span across one or more columns,
/// and any relevant gutters along the way.
/// With the default settings,
/// `span(3)` will return the width of 3 columns,
/// and the 2 intermediate gutters.
/// This can be used to set the `width` property of grid elements,
/// or `margin` and `padding`
/// to push, pull, and pad your elements.
/// @example scss - span half the grid
///   .foo {
///     width: susy-span(6 of 12);
///   }
@function susy-span(…) {…}

“If it’s not documented, it doesn’t exist.”

— Me

  1. Why Design Systems?

2. Pattern Audit

  1. Start with Design Tokens

  2. Baked-In Tools

  3. Define the API

  4. Automation is Essential

Existing Apps:

What Do We Have?

Take Screenshots

Organize into Groups

VueJS.org Stats

VueJS.org Font Stats

All Apps:

What Do We Need?

  1. Why Design Systems?

  2. Pattern Audit

3. Start with Design Tokens

  1. Baked-In Tools

  2. Define the API

  3. Automation is Essential

3. Start with Design Tokens

3. Start Somewhere, Stay Agile

Normal Triangle by Maslow Miriam
Un-ITCSS

ITCSS Layers

👨

masc

femme

rando

No Output from Settings & Tools

CSS Was Designed For Patterns

Lightning Icon Code

class="slds-icon slds-icon-text-warning slds-icon--x-small"

Lighting Icons API

Classes are Patterns

The Cascade is for Patterns

Follow The Specificity

Design Tokens (Settings)

Color preview screenshot with three colors and their values

Scss Variables

$color-text-default: rgb(62, 62, 60);
$color-text-warning: rgb(255, 183, 93);
$color-text-error: rgb(194, 57, 52);

.example {
  background: $color-text-error;
}

CSS Variables

👍 Minimal Tooling (Sass)

👎 Not Meaningfully Organized

👎 Encourages One-Offs

👎 Difficult to Automate

CSS Custom Properties

:root {
  --color-text-default: rgb(62, 62, 60);
  --color-text-warning: rgb(255, 183, 93);
  --color-text-error: rgb(194, 57, 52);
}

.example {
  background: var(--color-text-error);
}

Super Rad, Same Problems

Scss Maps

$text-colors: (
  'default': rgb(62, 62, 60),
  'warning': rgb(255, 183, 93),
  'error': rgb(194, 57, 52),
);

.example {
  background: color('error');
}

(See OddBird’s Accoutrement Color)

The Map Problem

$colors: (
  'brand-blue': hsl(195, 85%, 35%),
  'gray': desaturate(map-get($colors, 'brand-blue'), 80%),
);

[ERROR] Undefined variable: "$colors".

Map Self-Reference

$colors: (
  'brand-pink': hsl(330, 85%, 68%),
  'escher': 'brand-pink',
  'godel': 'escher',
  'bach': 'godel',
  'kevin bacon': 'bach' ('lighten': 20%),
);

👍 Meaningful!

👍 Encourages Patterns

Recursive Function

@function color(
  $name,
  $map: $colors
) {
  $name: map-get($map, $name) or $name;

  // Self-calling lookup
  @if map-has-key($colors, $name) {
    $name: color($name);
  }

  @return $name;
}

Calculate On Compile

.usage {
  background: color('kevin bacon'); // the function does all the work...
}

OddBird’s Accoutrement-Color

color('kevin bacon')

👎 Requires Additional Tooling

Test! (with Sass-True)

@include describe('…') {
  @include it('…') {
    @include assert-equal(
      /* test parameters */, 
      /* expected output */
    );
  }
}

True Results

Global Settings » Theme Defaults » Component Details

$brand-colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%),
);

$theme-colors: (
  'text': …,
  'border': …,
  // ...
);

$button-colors: (
  'button-text': …,
  'button-border': …,
  // ...
);

¯\_(ツ)_/¯

Relationships are Dynamic!

YAML + Theo

props:
  text_default:
    value: "rgb(62, 62, 60)"
  text_warning: 
    value: "rgb(255, 183, 93)"
  text_error: 
    value: "rgb(194, 57, 52)"

global:
  type: "color"
  category: "brand-colors"

(See Salesforce-UX Theo)

aliases:
  vermilion:
    value: "7, 83%"
props:
  color_vermilion:
    value: "hsla({!vermilion}, 53%, 1)"
  color_vermilion_dark:
    value: "hsla({!vermilion}, 43%, 1)"

👍 Easier to Export from YAML

👎 Not A Style Language

Know The Trade-Offs

adjust to your needs…

  1. Why Design Systems?

  2. Pattern Audit

  3. Start with Design Tokens

4. Baked-In Tools

  1. Define the API

  2. Automation is Essential

Make Patterns & Documentation

The Lazy Option

Automate from Structured Code

Accoutrement + Herman (SassDoc)

(a “sass-first” approach…)

// SLDS Colors
// -----------
/// These are the colors we stole from SLDS system,
/// in order to create a demo.
/// @group color
/// @colors
$slds-colors: (
  'text-default': rgb(62, 62, 60),
  'text-warning': rgb(255, 183, 93),
  'text-error': rgb(194, 57, 52),
);

Herman screenshot

Modular Scales

Named Ratios

/// @ratios
$ratio-options: (
  'octave'            : 2,
  'major-seventh'     : 15/8,
  'major-sixth'       : 5/3,
  'fifth'             : 3/2,
  'augmented-fourth'  : 45/32,
  'fourth'            : 4/3,
  'major-third'       : 5/4,
  'major-second'      : 9/8,
);

/// @ratios

Herman Ratios

Named Sizes

$text-sizes: (
  'root': 22px,
  'small': 18px,
  'smaller': 16px,
);

Accoutrement-Scale

/// @sizes
$text-sizes: (
  'root': 16px,
  'hi': 'root' ('major-third': 2),
);

.example {
  font-size: size('h1');
  line-height: ratio('fifth');
}

/// @sizes

Herman Text Sizes

/// @sizes {ruler}

Herman Rulers

Opinionated & Un-Opinionated

  1. Why Design Systems?

  2. Pattern Audit

  3. Start with Design Tokens

  4. Baked-In Tools

5. Define the API

  1. Automation is Essential

Lightning Icon Code

class="slds-icon slds-icon-text-warning slds-icon--x-small"

Related Class Patterns » Data Attributes

icon color and size classes

.slds-icon-text-default | .slds-icon-text-warning | .slds-icon-text-error

data-slds-icon-color="text-default | text-warning | text-error"

.slds-icon--x-small | .slds-icon--small | .slds-icon--medium | .slds-icon--large

data-slds-icon-size="extra-small | small | medium | large"

HTML Template Logic is Great

pre-processors for your markup!

👋 Hi Vue

<icon :image="isSuccess ? 'checkmark' : 'x'">

Tricks!

Components Provide Meaning

<my-icon name="gear" />

Consistency & Accessibility*

*If you bake that into the pattern…

/// @icons templates/icons/

Herman Icons

Herman Components

(Sass + Nunjucks)

/// Navigation items, with inactive and active states.
/// @group nav
/// @example njk
///   {% import 'nav.macros.njk' as nav %}
///   {{ nav.bar(active="dashboard", items=[…]) }}
.nav-bar {
  // …
}

Herman Component Screenshot

¯\_(ツ)_/¯

Sass-First Breaks Down…

Only Nunjucks For Now…

VueDS Components

<docs>
  ```jsx
  <nav-bar active="Dashboard" :navItems="[…]"/>
  ```
</docs>

VueDS Component Screenshot

I Want Both :)

please…

  1. Why Design Systems?

  2. Pattern Audit

  3. Start with Design Tokens

  4. Baked-In Tools

  5. Define the API

  6. Automation is Essential

Up-To-Date > Comprehensive

Start small, make it easy, and expand…

Meaningful & Structured Code

Readable by Humans & Machines

Inline Documentation

Helps the human factors…

Built-In Tools

Working from a single-source…

Website like Legos
Put your helmet on

Dragons

Vue numbers going up