Vedran Jukić

Styleguide

Flow

A short decision flow. A plain ordered list, so it reads the same without the lines.

Clean · light

  1. New UI need

  2. Does it already exist?

    Yes Use it

    No

  3. Can an existing one adapt?

    Yes Amend it

    No

  4. Used in two or more places?

    Yes Add to the library

    No

  5. Keep it as a snowflake

    Second use Add to the library

Deciding what joins the library

Clean · dark

  1. New UI need

  2. Does it already exist?

    Yes Use it

    No

  3. Can an existing one adapt?

    Yes Amend it

    No

  4. Used in two or more places?

    Yes Add to the library

    No

  5. Keep it as a snowflake

    Second use Add to the library

Deciding what joins the library

Vector

  1. New UI need

  2. Does it already exist?

    Yes Use it

    No

  3. Can an existing one adapt?

    Yes Amend it

    No

  4. Used in two or more places?

    Yes Add to the library

    No

  5. Keep it as a snowflake

    Second use Add to the library

Deciding what joins the library

Comic

  1. New UI need

  2. Does it already exist?

    Yes Use it

    No

  3. Can an existing one adapt?

    Yes Amend it

    No

  4. Used in two or more places?

    Yes Add to the library

    No

  5. Keep it as a snowflake

    Second use Add to the library

Deciding what joins the library
Markup contract 
figure.flow > ol.flow__list > li.flow__step, then optional figcaption.flow__caption.
A step holds p.flow__box (the question), p.flow__branch (span.flow__label + span.flow__box--end, the outcome) and span.flow__down (the way on).
li.flow__step--last holds the fallback outcome and its way back: .flow__target names where it leads, and sits visually hidden where a line shows it.
Set `flow` = { start, steps: [{ question, outcome }], fallback: { outcome, label, target }, caption }.
In Markdown, write the same markup by hand. No JS: it reads as a plain ordered list.