DEV Community

Cover image for ckd.css for your ticks
Mattia Astorino
Mattia Astorino

Posted on

ckd.css for your ticks

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.

The Next Web

GitHub logo equinusocio / ckdcss

A tiny set of micro interactions for your checkboxes.

      Downloads     Size




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)

 
equinusocio profile image
Mattia Astorino

There is ckdcss.now.sh

Collapse
 
equinusocio profile image
Mattia Astorino

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.