https://github.com/felipefialho/piano

🎹 To play piano using CSS and JavaScript
https://github.com/felipefialho/piano

css javascript piano piano-keyboard pure-css purecss

Last synced: 2 months ago
JSON representation

🎹 To play piano using CSS and JavaScript

• Host: GitHub
• URL: https://github.com/felipefialho/piano
• Owner: felipefialho
• License: mit
• Created: 2013-10-28T02:35:16.000Z (over 11 years ago)
• Default Branch: main
• Last Pushed: 2025-03-18T17:40:14.000Z (3 months ago)
• Last Synced: 2025-04-05T13:01:38.187Z (2 months ago)
• Topics: css, javascript, piano, piano-keyboard, pure-css, purecss
• Language: JavaScript
• Homepage: http://www.felipefialho.com/piano
• Size: 8.84 MB
• Stars: 341
• Watchers: 15
• Forks: 71
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: license
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


# Piano Keyboard

> To play piano using CSS and JavaScript

[![Netlify Status](https://api.netlify.com/api/v1/badges/1289139d-1809-4ba1-9417-18530eb3caf9/deploy-status)](https://app.netlify.com/sites/felipefialho-piano/deploys)

[![license](https://img.shields.io/github/license/felipefialho/piano.svg)](./license.md)

[![GitHub contributors](https://img.shields.io/github/contributors/felipefialho/piano.svg)](https://github.com/felipefialho/piano/graphs/contributors)

This project uses Pug, Stylus and Webpack.

## Getting Started

```sh

# install dependencies

$ npm i

# Run the project

$ npm start

```

With the commands above, you have everything to start.

### Post CSS libs

For grid system uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make easy use browser prefixes, [Lost](https://github.com/peterramsing/lost) with some help from, [Rucksack](http://simplaio.github.io/rucksack/) for animations, reset and a lot of great mixins, [Rupture](https://github.com/jenius/rupture) for responsive utilities. And [Font Magician](https://github.com/jonathantneal/postcss-font-magician/) to get the webfonts.

### Code Standards

This project uses my own [Coding Style](https://github.com/felipefialho/coding-style) as code reference.

To help you, this project has a `npm run fix` command to fix all eslint errors.

### Tasks

- `npm start`: run all tasks and initialize watch for changes and a server

- `npm run build`: run all production tasks create a `dist` folder to deploy

- `npm run lint`: lint javascript and css

- `npm run fix`: command to fix all eslint errors

## License

MIT License © Felipe Fialho