@gerhobbelt/keyscss

KEYS.less

A simple stylesheet to render beautiful keyboard-styled elements.

Usage

Download the stylesheet and include it via

<link rel="stylesheet" href="keys.css" type="text/css" />

The stylesheet comes with two classes for light and dark keys for good visibility on every background. Since most websites have light backgrounds, the dark style is the default.

<!-- Dark keys: -->
<kbd>ctrl</kbd> + <kbd>S</kbd>

ctrl + S

<!-- ...or... -->
<kbd class="dark">ctrl</kbd> + <kbd class="dark">S</kbd>

ctrl + S

<!-- ...or... -->
<span class="dark-keys">
    <kbd>ctrl</kbd> + <kbd>S</kbd>
</span>

ctrl + S

<!-- Light keys: -->
<kbd class="light">ctrl</kbd> + <kbd class="light">S</kbd>

ctrl + S

<!-- ...or... -->
<span class="light-keys">
    <kbd>ctrl</kbd> + <kbd>S</kbd>
</span>

ctrl + S

<!-- StackOverflow-styled keys: -->
<kbd class="so">ctrl</kbd> + <kbd class="so">S</kbd>

ctrl + S

<!-- ...or... -->
<span class="so-keys">
    <kbd>ctrl</kbd> + <kbd>S</kbd>
</span>

ctrl + S

That's all. The size of the keys depends on the set font-size.

Usage for LESS users

Import the LESS macros in your project like this:

@import "node_modules/keyscss/keys-macros";

Three macro's (a.k.a. "mixins") are defined:

• .keycap() : this is the base mixin which defines the key shape
• .keycap-dark() : this is the 'dark theme' for the keys
• .keycap-light() : this is the 'light theme' for the keys

You can use these macros in your own LESS stylesheets like this, for example to style all <KBD> tags in your HTML:

kbd
{
    .keycap-light();

    // override the padding defined by the mixin:
    padding: 0em .25em .0em .25em;

    margin-left: 0.2em;
    margin-right: 0.2em;
}

License

MIT License (see LICENSE.txt)