https://github.com/raphaelfabeni/ui-interactions

Open source click and copy user interface interactions.
https://github.com/raphaelfabeni/ui-interactions

css user-interface

Last synced: 13 days ago
JSON representation

Open source click and copy user interface interactions.

• Host: GitHub
• URL: https://github.com/raphaelfabeni/ui-interactions
• Owner: raphaelfabeni
• License: mit
• Created: 2019-07-28T20:01:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-26T11:32:08.000Z (8 months ago)
• Last Synced: 2024-10-16T08:55:33.824Z (28 days ago)
• Topics: css, user-interface
• Language: Stylus
• Homepage: https://raphaelfabeni.com/ui-interactions/
• Size: 400 KB
• Stars: 332
• Watchers: 13
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# UI interactions

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/raphaelfabeni/ui-interactions/issues)

> Ready-to-use UI interactions using only one element and pure CSS. Because we love UI interactions and CSS!

[Check it out](https://ui-interactions.raphaelfabeni.com/)

**Table of contents**

- [Why?](#why)

- [How does it work?](#how-does-it-work)

- [Contributing?](#contributing)

- [Spreading the word?](#spreading-the-word)

## Why

Personally, I love to give feedback to the user during a web experience. A simple click in a button and a lot of stuff could happen in the page. So, why don't help/guide the user to understand what is happening in the UI to make the whole experience nicer?

- ☝️ Only one tag per component (usually a `button`).

- ❤️ Pure CSS.

## How does it work?

All the components have two states: the _default_ and the _active_ state. The state toggle occurs based on a class `is-active`.

## Contributing

More info [here](CONTRIBUTING.md).

## Spreading the world

Companies/projects using _ui-interactions_.

_Soon, I hope!_ 😝 

## License

The code is available under the [MIT License](LICENSE.md).