<%= @page_title %>

If you have keyboard affordances, you might need to explain them. To that end, there's a simple keystroke character affordance in Foundation.

For example, to close your browser hit Cmd + Q. Don't actually do it. There's more docs to read.

---

Build With Predefined HTML Classes

There are two ways to build keystrokes in Foundation 4: with our predefined HTML or with our mixins. Building keystrokes using our predefined classes is simple, you simply wrap kbd or .keystroke around whatever you want to call out.

<%= code_example '

For example, to close your browser hit Cmd + Q', :html %>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected keystrokes from a custom package. These should be linked up following our default HTML page structure.

---

Build with a Mixin

We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the extension installed or grab _foundation-global.scss and _keystrokes.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/foundation-global", "foundation/keystrokes"; ', :css %>

Quick Mixin

You can build your keystrokes using our global mixin by including it on your custom class or the kbd element in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. The rest of the defaults can be modified using the available variables. The global mixin looks like this:

<%= code_example ' .your-class-name { @include keystroke($bg); } /* You can set the background color of your keystrokes, which also effects text and border */ $bg: $keystroke-bg', :css %>

Here's an example of a custom keystroke style.

Default SCSS Variables

<%= code_example ' /* We use these to control text styles. */ $keystroke-font: "Consolas", "Menlo", "Courier", monospace; $keystroke-font-size: emCalc(15px); $keystroke-font-color: #222; $keystroke-font-color-alt: #fff; $keystroke-function-factor: 7%; /* We use this to control keystroke padding. */ $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px); /* We use these to control background and border styles. */ $keystroke-bg: darken(#fff, $keystroke-function-factor); $keystroke-border-style: solid; $keystroke-border-width: 1px; $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor); $keystroke-radius: $button-radius;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _foundation-global.scss.