Skip to content

Files

Latest commit

 

History

History
315 lines (228 loc) · 7.1 KB

30-components.md

File metadata and controls

315 lines (228 loc) · 7.1 KB
title url
Components
./components/

Components

[[toc]]

Box

Class.box

The .box class creates a padded box with a border.

Boxes use the border and background color of the colorway.

<div class="box warn">
  <strong>Warning</strong>: If you're putting <!-- ... -->
</div>

Warning: If you're putting something in a box, make sure to clarify why it is in a box in some other way. For example, this box has "Warning" in bold, in addition to being yellow. This makes your page clearer and prevents accessibility failures.

The above box, in addition to being an example, is also a genuine warning.

The <figure>, <aside>, <details> and <dialog> elements share their appearance with the .box class.

Titlebar

.titlebar: A titlebar for a .box.

<div class="box bad">
  <strong class="block titlebar">Error</strong>
  Task failed successfully
</div>
Error Task failed successfully

Subtitle

The <sub-title> custom element or the .sub-title class is a subtitle for a heading.

<h4>
  Conference Talks Considered Harmful<v-h>:</v-h>
  <sub-title>How I Learned To Stop Worrying and Love Baz</sub-title>
</h4>

Conference Talks Considered Harmful: How I Learned To Stop Worrying and Love Cliché Titles 

<h4>
  <sub-title class="allcaps">Breaking<v-h>: </v-h></sub-title>
  Bad Thing Happens
<h4>

Breaking: Bad Thing Happens

Section permalinks

Many pages, including these docs, have links that can be used to jump to a section that appear when the heading is hovered. Missing.css provides this as the .permalink-anchor class.

Toolbar

A .tool-bar is a horizontally laid-out collection of controls.

<section class="tool-bar">
  <button type=button>Cut</button>
  <button type=button>Copy</button>
  <button type=button>Paste</button>

  <hr aria-orientation="vertical">

  <label>Find: <input type=text></label>
</section>
Cut Copy Paste
Find:

Sidebar

Use the .sidebar-layout class to create a sidebar/main layout. Put the sidebar in a <header> element directly inside it, and the next element will house the rest of the page. See this example:

<div class="sidebar-layout">
  <header>
    <ul role="list">
      <li><a href="/">Home</a></li>
      <li><a href="/">Profile</a></li>
      <li><a href="/">Settings</a></li>
      <!-- ... -->
    </ul>
  </header>

  <div class="col-4">
    <main></main>
    <footer></footer>
  </div>
</div>

Sidebar demo →

Breadcrumbs

Add .breadcrumbs to a <nav> element. Use an <ul> or <ol> of links inside. Don't forget to add an aria-label.

Add the attribute aria-current=page (or step) to the link representing the current page or step (if any).

<nav class=breadcrumbs aria-label="Breadcrumbs">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">User</a></li>
    <li><a href="#">Advanced</a></li>
    <li><a href="#">New All</a></li>
    <li><a href="#" aria-current=page>Quit Sibelius</a></li>
  </ol>
</nav>
  1. Home
  2. User
  3. Advanced
  4. New All
  5. Quit Sibelius

If you want to preserve the <ol> numbering, use the type attribute.

<header class="packed">
  <strong class="<h1>">Checkout</strong>
  <nav class=breadcrumbs aria-label="Breadcrumbs">
    <ol type="i">
      <li><a href="#">Cart</a></li>
      <li><a href="#" aria-current=step>Account</a></li>
      <li>Info</li>
      <li>Payment</li>
      <li>Review</li>
    </ol>
  </nav>
</header>
Checkout
  1. Cart
  2. Account
  3. Info
  4. Payment
  5. Review

Chip

The <chip> class, or the .chip class, creates a rounded chip, like what you might use for a tag list or contacts.

<a class="chip" href="/@jdoe"><img src="profiles/jdoe.webp"> John Doe</a>
<chip>#webdev</chip><chip>#design</chip><chip>#css</chip>

#webdev ⍻ Merged John Doe 3 minute read

Navbar

A navbar has the .navbar class --- see the following for a markup example:

Code: Navbars 
<header class="navbar">
  <nav aria-label="Site sections">
    <ul role="list">
      <li><a href="/"><img alt="missing.js" src="/logo.png"></a>
      <li><a href="/docs">Docs</a>
      <li><a href="/docs">Contribute</a>
      <li><a href="/docs">Donate</a>
    </ul>
  </nav>
  <nav aria-label="Social media links">
    <ul role="list">
      <li><a href="/"><img alt=""></a>
      <li><a href="https://github.com/...">GitHub</a>
      <li><a href="https://discord.app/...">Discord</a>
    </ul>
  </nav>
</header>

To make your navbar expand/collapsible on smaller screens, you can use Missing.js § Expand/collapse navbar.

When you have multiple <nav> elements on a page, it's a good idea to put aria-label attributes on them. This is because many assistive programs have a feature to jump to the navigation part of a page, which does not work well if the user can't tell which nav is which.

Icon Button

.iconbutton creates a bare icon.

☰ → ✀ ✖ ⚧ ☻ 🎜