The frame

What surrounds every page: the top bar, the light and dark button, and the presentation bar.

The top bar

The mark, linking to aroughidea.com; the app's name, linking to the app's home; then the app's areas; then its tools. This page's own top bar is the example. On a phone the mark stands for the name, and the areas drop to a row of their own.

<header class="ds-topbar">
  <a class="ds-brand" href="https://aroughidea.com/" aria-label="A Rough Idea">…mark… <span class="ds-brand-name">A Rough Idea</span></a>
  <span class="ds-crumb-sep" aria-hidden="true">/</span>
  <a class="ds-crumb" href="/">App name</a>
  <nav class="ds-topnav" aria-label="Areas"><a href="…" aria-current="true">Area</a> …</nav>
  <div class="ds-tools">…</div>
</header>

The light and dark button

One icon button that shows the theme it switches to. Any button with data-ds-theme-toggle becomes one when the page loads v2/theme.js; a line in the page's head applies a kept choice before the page paints.

Try it: it is the same button as the top bar's.

The presentation bar

Loading v2/present.js lets any page show its sections as slides. Mark the element that holds the sections with data-ds-slides; give a button data-ds-present. While presenting, a bar at the foot carries previous and next as plain arrows, the caption, the count, full screen and Exit.

<main data-ds-slides
      data-ds-present-title="Color"
      data-ds-present-prev="../type/" data-ds-present-next="../layout/">
  <section><h2>A full-sentence headline</h2> … </section>
</main>
<button class="ds-icon-button" data-ds-present aria-label="Present as slides">…</button>
<script src="https://design-system.aroughidea.com/v2/present.js"></script>

Rules for the slides themselves: Patterns › Slideshow.