Keystrokes

If you have keyboard affordances, you might need to explain them to users. For example, to quit your browser hit Cmd + Q. (Don't actually type that now - there are more docs to read.) Keystroke is Foundation's simple character affordance tool.


Basic

HTML

<p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd></p>

Customize with Sass

Keystrokes can easily be customized using our Sass variables

SCSS

$include-html-keystroke-classes: $include-html-classes; // We use these to control text styles. $keystroke-font: "Consolas", "Menlo", "Courier", monospace; $keystroke-font-size: inherit; $keystroke-font-color: $jet; $keystroke-font-color-alt: $white; $keystroke-function-factor: -7%; // We use this to control keystroke padding. $keystroke-padding: rem-calc(2 4 0); // We use these to control background and border styles. $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor); $keystroke-border-style: solid; $keystroke-border-width: 1px; $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); $keystroke-radius: $global-radius;

Semantic Markup With Sass

You can create your own keystrokes using our Sass mixins.

Basic

You can use the keystroke() mixin to create your own keystroke style, like so:

SCSS

@import "foundation/components/keystrokes"; .custom-keystroke-class { // You can set the background color of your keystrokes, which also effects text and border @include keystroke($bg:orange); }

HTML

<kbd class="custom-keystroke-class"></kbd>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/keystrokes";




Building Blocks Using Keystrokes


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »