Show off your keyboard shortcuts with style 🦄.
Keyboard CSS
Keyboard CSS is a library of ready-to-use, cross-browser compatible keyboard like button UI for use in your web projects. Great for showing off your keyboard shortcuts.
Table of Contents
- Installation
- Usage
- Usage with Javascript
- Advanced Configuration Options with SASS
- License and Contributing
- Contributors ✨
Installation
Add it directly to your webpage using a link
tag, thanks to https://unpkg.com:
or install it with npm:
npm i keyboard-css
with yarn:
yarn add keyboard-css
Usage
According to W3C, the kbd
element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
The main purpose of Keyboard CSS is to enhance look and feel such kbd
elements, but it can also be used with button
and a
elements, for better interactivity (like simulating click).
Basic Usage
You just have to add a single class to kbd
, button
or a
to apply the related styles, i.e. kbc-button
kbd
Usage with When .kbc-button
is used with kbd
element, font-size and line-height is inherited from parent for better accessibility.
Press / to search this site.Press Ctrl + Shift + R to re-render this page.
button
and a
Usage with When used with button and a elements, it starts supporting interactions.
KK
Remove Surface Border
To remove surface border, simply add no-container
class.
K
Sizing
Total 5 sizes are available. You can add respective class to see the effect.
Sizing works with
button
anda
elements, and notkbd
element.
Size | Use case | Class |
---|---|---|
Extra-extra Small | In inputs, like searchbox | .kbc-button-xxs |
Extra Small | In links, like footer or credit | .kbc-button-xs |
Small | Same as above, but for more prominent cases | .kbc-button-sm |
Large | In banners or jumbotrons | .kbc-button-lg |
XXSXSSMMDLG
States
States work with
button
anda
elements, and notkbd
element.
Like all buttons, this also have 4 states: :hover
, :focus
, :active
, and :disabled
. You can add classes with same state name to see it statically.
HoveredFocusedActivatedDisabled
Colors
Colors are inspired from Bootstrap theme colors.
DefaultPrimarySecondarySuccessDangerInfoLightDark
Usage with Javascript
You can do a whole bunch of other stuff with Keyboard CSS when you combine it with Javascript. A simple example:
const element = document;elementclassList;
You can also bind keyboard events:
K
document; document;
Advanced Configuration Options with SASS
I have used sass to create this build. Mostly, everything is handled through sass variables, so you can easily override the defaults, thanks to !default flag.
Variables file
You can check all the variables at _variables.scss file.
Change font size
To change the default base font-size of button
and a
elements, to 20px, you can do like below:
// assuming you have already done: npm i keyboard-css // define variables first ; // and then import ;
or with new @use rule, you can achieve the same using below code:
// assuming you have already done: npm i keyboard-css @use "path/to/node_modules/keyboard-css/dist/scss/main" with (;
Add new size
You can also introduce your new size:
// add size in $kbc-btn-size-map ; // and then import ;
And then use it in HTML:
XL Button
Change depth
Depth is calculated and applied as multiple shadows. To increase/decrease it, you can change respective variables:
; // and then import ;
License and Contributing
Keyboard CSS is licensed under the MIT license.
Contributing
🙏 I would ❤️ for you to contribute to Keyboard CSS and help make it even better than it is today! Checkout contributing guidelines for more details.
Code of Conduct
This project and everyone participating in it are governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to shhdharmen@gmail.com.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Dharmen Shah 💻 🖋 🎨 📖 🤔 |
This project follows the all-contributors specification. Contributions of any kind welcome!