A Pen by Oliver Pattison.

Clean-MacBook-style-keyboard-shortcuts.markdown

Clean MacBook-style keyboard shortcuts

Keyboard CSS design optimized for documentation project purposes, using the standard HTML kbd element. The idea is “keys” that look roughly proportional to the physical keyboard while being readable, not excessively skeuomorphic, and not obviously platform-specific.

A Pen by Oliver Pattison on CodePen.

License.

index.html

<article class="sample">
  
  <header class="banner"><h1>Clean MacBook-style keyboard shortcuts</h1></header>
  
  <p class="even-larger"><kbd><kbd>⌘</kbd> <span>+</span> <kbd>⇧</kbd> <span>+</span> <kbd>N</kbd></kbd></p>
  
  <p>My goal here is to test out a keyboard CSS design optimized for documentation project purposes, using the standard HTML <code>&lt;kbd&gt;</code> element. The idea is “keys” that look roughly proportional to the physical keyboard while being readable, not excessively skeuomorphic, and not obviously platform-specific.</p>
  
  <p>It uses <code>em</code> font sizing for maximum flexibility, and has a default size of <strong>.875em</strong> (or 14px, typically) with appropriate padding to work well inline in a paragraph or list item.</p>
  
  <h2>For example</h2>

  <ul>
    <li><kbd><kbd>⌘ cmd</kbd> <span>+</span> <kbd>⇧ shift</kbd> <span>+</span> <kbd>3</kbd></kbd> to take a screenshot of the entire screen.</li>
    <li><kbd><kbd>⌘ cmd</kbd> <span>+</span> <kbd>⇧ shift</kbd> <span>+</span> <kbd>4</kbd></kbd> to take a screenshot of a selected area.</li>
  </ul>
  
  <h2>Supporting multi-line use</h2>
  
  <p>Inline <code>&lt;kbd&gt;</code> elements on multiple lines should not hurt the appearance of the paragraph too badly, given a typical <code>line-height: 1.5</code> at <code>font-size: 1em</code>. In a real design, one might want to adjust the font size values to taste, but the defaults here are em-based, and therefore should scale well.</p>
    
  <p>Here is an example of multi-line support: to quickly access volume settings in OS X, type <kbd><kbd>&#8997; option</kbd> <span>+</span> <kbd>any volume key</kbd></kbd>. And another multi-line example: <kbd><kbd>⌘</kbd> <span>+</span> <kbd>⌥</kbd> <span>+</span> <kbd>⇧</kbd> <span>+</span> <kbd>S</kbd></kbd> to <strong>Save for Web</strong> in Photoshop.</p>
  
  <h2><kbd><kbd>#</kbd></kbd> <kbd><kbd>#</kbd></kbd> It even works in headings</h2>
  
  <p>If one had a use case for it, anyway.</p>
  
  <h2>The relevant CSS</h2>
  
  <p>Most of the CSS in this example isn’t relevant to the design, but this is the essential part to <kbd><kbd>⌘</kbd> <span>+</span> <kbd>C</kbd></kbd>:</p>
  
  <pre><code>kbd > kbd {
  background-color: black;
  border-radius: .285714286em; /* 4px */
  color: ghostwhite;
  font: 300 .875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: .214285714em .642857143em; /* 3px 9px */
}

kbd > kbd + span {
  font-weight: 600;
  margin: 0 -.5em; /* 7px */
}</code></pre>
  
  <h2>The required HTML</h2>
  
  <p>Use nested <code>&lt;kbd&gt;</code> elements, <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element" target="_blank">as the spec demands</a>. Thanks <a href="http://codepen.io/Michiel" target="_blank">@Michiel</a> for pointing this out to me. Make sure that <code>&lt;span&gt;</code> tags required for chained keyboard commands are inside the <code>&lt;kbd&gt;</code> parent.</p>
  
  <pre><code>&lt;kbd&gt;&lt;kbd&gt;&lt;/kbd&gt; &lt;span&gt;+&lt;/span&gt; &lt;kbd&gt;&lt;/kbd&gt;&lt;/kbd&gt; </code></pre>
  
  <hr>
  
  <p>Colors courtesy of <a href="http://colours.neilorangepeel.com/">CSS Colours by NeilOrangePeel</a>. Did you know that stock CSS named colors aren’t necessarily so bad?</p>
  
</article>

style.css

kbd > kbd {
  background-color: black;
  border-radius: .285714286em; /* 4px */
  color: ghostwhite;
  font: 300 .875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: .214285714em .642857143em; /* 3px 9px */
}

kbd > kbd + span {
  font-weight: 600;
  margin: 0 -.5em; /* 7px */
}

/* … */

html {
  font: 300 1em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
  background-color: dimgray;
  color: black;
}

a,
a:visited {
  color: darkred;
}

h1 {
  font: 300 1.75em/1.25 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1em 0;
  letter-spacing: -.035714286em; /* -1px */
}

h2 {
  font: 300 1.5em/1.25 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1em 0;
}

ul {
  list-style-position: inside;
  list-style-type: square;
  padding: 0;
}

li {
  margin: .5em 0 0 1em;
}

.sample {
  background-color: whitesmoke;
  padding: .5em 1em;
}

.banner {
  background-color: royalblue;
  background: linear-gradient(to bottom, cornflowerblue 0%, royalblue 90%);
  margin: 1em -1em 2em;
  padding: .125em 2em;
}

.banner h1 {
  color: white;
}

.even-larger {
  font-size: 2em;
}

code {
  font: 400 .8125em/1.38461541 Menlo, monospace;
}

code,
pre {
  background-color: gainsboro;
  white-space: pre-wrap;
}

p > code,
p > * > code {
  padding: .076923077em .307692308em; /* 2px 4px */
}

pre {
  margin: 1em -1em;
  padding: 1em 2em;
}

hr {
  border: 2px solid dimgray;
  margin: 1.5em 0;
}

@media screen and (min-width: 32em) {
  
  .sample {
    border-radius: .5em;
    margin: 3em auto;
    padding: .5em 2em;
    width: 30em;
  }

  .banner {
    margin: 2em -2em;
    padding: .125em 2em;
  }

  pre {
    margin: 1em -2em;
    padding: 1em 2em;
  }
  
}