Status & feedback / What happened

Timeline

Show the order of events, their outcomes, and how far a run actually got.

Basic usage

Preview

Discovery
844 statements found
Database calls across 77 files in the WordPress catalog.
Resolution
35 statements fully resolved
The complete SQL text could be determined.
Open results
809 statements not fully resolved
Dependency models and analysis limits leave this catalog incomplete.

HTML

<ol class="timeline">
  <li class="timeline-item tone-ok"><span class="timeline-time">Discovery</span><p class="timeline-title">844 statements found</p><p class="timeline-description">Database calls across 77 files in the WordPress catalog.</p></li>
  <li class="timeline-item tone-ok"><span class="timeline-time">Resolution</span><p class="timeline-title">35 statements fully resolved</p><p class="timeline-description">The complete SQL text could be determined.</p></li>
  <li class="timeline-item is-open"><span class="timeline-time">Open results</span><p class="timeline-title">809 statements not fully resolved</p><p class="timeline-description">Dependency models and analysis limits leave this catalog incomplete.</p></li>
</ol>

A chronology in a report

Preview

02 / 2014

Build, write and talk about the inconveniences close at hand.

2014.05–06
Reporting build results to Ukagaka
Built grunt-sstp, which sends Grunt successes, warnings and failures to a desktop mascot. Published on Qiita on 6 May, followed on 1 June by an explanation of driving it from Scala’s SBT.1 2
2014.10.11 · First talk
A new form of notification with PHP and Ukagaka
A lightning talk at PHP Conference Japan 2014. The notification tools published since spring led to a talk at a technical conference.3

12 / SOURCES

grunt-sstpGitHub · 2014.05 · A Grunt plugin that reports build results to a desktop mascot
grunt-dgeniGitHub · 2014.09 · A plugin that adds documentation generation to a Grunt build
PHP + Ukagaka: a new form of notificationSlides · 2014.10.11 · Lightning talk at PHP Conference Japan 2014

HTML

<article class="sheet sheet-inset">
  <section class="sec">
    <h3 class="label">02 / 2014</h3>
    <div class="field">
      <p class="lead">Build, write and talk about the inconveniences close at hand.</p>
      <ol class="timeline">
        <li class="timeline-item"><span class="timeline-time">2014.05–06</span><p class="timeline-title">Reporting build results to Ukagaka</p><p class="timeline-description">Built grunt-sstp, which sends Grunt successes, warnings and failures to a desktop mascot. Published on Qiita on 6 May, followed on 1 June by an explanation of driving it from Scala’s SBT.<a class="cite" href="#src-1">1</a><a class="cite" href="#src-2">2</a></p></li>
        <li class="timeline-item tone-accent"><span class="timeline-time">2014.10.11 · First talk</span><p class="timeline-title">A new form of notification with PHP and Ukagaka</p><p class="timeline-description">A lightning talk at PHP Conference Japan 2014. The notification tools published since spring led to a talk at a technical conference.<a class="cite" href="#src-3">3</a></p></li>
      </ol>
    </div>
  </section>
  <section class="sec">
    <h3 class="label">12 / SOURCES</h3>
    <div class="field">
      <ol class="sources">
        <li id="src-1"><a href="https://github.com/k-kinzal/grunt-sstp">grunt-sstp</a><span class="source-meta">GitHub · 2014.05 · A Grunt plugin that reports build results to a desktop mascot</span></li>
        <li id="src-2"><a href="https://github.com/k-kinzal/grunt-dgeni">grunt-dgeni</a><span class="source-meta">GitHub · 2014.09 · A plugin that adds documentation generation to a Grunt build</span></li>
        <li id="src-3"><a href="https://www.slideshare.net/slideshow/php-40139017/40139017">PHP + Ukagaka: a new form of notification</a><span class="source-meta">Slides · 2014.10.11 · Lightning talk at PHP Conference Japan 2014</span></li>
      </ol>
    </div>
  </section>
</article>

Classes & attributes

Class / attribute	Purpose
`.timeline / .timeline-item`	An ordered list and its events.
`.timeline-time / .timeline-title / .timeline-description`	When it happened, what happened, and supporting context. A description may hold several paragraphs.
`.is-open`	An outlined mark for an unfinished or unconfirmed step.
`.sheet .timeline`	Inside a report, entries take the report’s reading size and a baseline between them.

Usage notes

Do not mark an unconfirmed step complete. Write the outcome in the title as well as encoding it in color. In a report, a chronology reads at the same size as the notes around it; in a catalog, a run’s steps stay compact.

Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.

Explore variations in Storybook ↗All components →