loading...
Cover image for ckd.css for your ticks

ckd.css for your ticks

equinusocio profile image Mattia Astorino ・1 min read

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

Discussion

markdown guide
 

That's really neat, I've been struggling to implement nice looking inputs and this looks very nice.

 

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.

 

Oh, that's neat. I saw some of the animations and wasn't sure if custom styles weren't a thing because of my Firefox/GTK theme or if it was part of the lib. Also, a website to show all the animations would he nice but not really necessary.

I'm sorry, I didn't notice the link at the top and only saw the repo. Thank you for your time.