ckd.css v2 has been released and it will bring beautiful and small micro interactions to your checkboxes and radios. You can use it even on your custom imputs.
Why are micro interactions important?
It’s likely that you started your day with a micro-interaction. By turning off the alarm on your mobile phone, you engaged with a user interface in a single moment.
You will continue to engage throughout the day in these moments with your digital devices. Each one is a micro-interaction. Each one is probably so small you don’t think about it. And each one works because of that simple fact.
As a designer, recognizing the invisibility of micro-interactions is just as important as designing them. You have to create something that feels human and accomplishes a task, making the life of a user easier. You also have to focus on a design that can work in a variety of environments and does not need any instruction or explanation.
equinusocio / ckdcss
A tiny set of micro interactions for your checkboxes.
Why?
It’s likely that you started your day with a micro-interaction. By turning off the alarm on your mobile phone, you engaged with a user interface in a single moment.
You will continue to engage throughout the day in these moments with your digital devices. Each one is a micro-interaction. Each one is probably so small you don’t think about it. And each one works because of that simple fact.
As a designer, recognizing the invisibility of micro-interactions is just as important as designing them. You have to create something that feels human and accomplishes a task, making the life of a user easier. You also have to focus on a design that can work in a variety of environments and does not need any instruction or explanation.
Source: The Next Web
Installation
As dependency
You can install ckd-css as node dependency by using Npm or Yarn.
npm install
…
Top comments (2)
There is ckdcss.now.sh
Hi @swisschili . Please note that on the demo site you see the default browser appearance for checkboxes. This lib doesn't apply any appearance customisation, just an animation when checked.