equinusocio / Ckdcss

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 ckd-css --save

Then import the desired animation inside your component:

import 'ckd-css/dist/pulse.css';

From source

If you are using PostCSS, you can also import animations from the src/lib/animations folder, but you need a specific plugins configuration.

From CDN

You can link the animation you want from CDN

<link rel="stylesheet" type="text/css" href="https://unpkg.com/ckd-css/dist/pulse.css">

We also provide the full collection (all animations) in a single file, but we strongly recommend to link only the css you need.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/ckd-css/dist/ckd.css">

Usage

To activate the animation add the data-ckd attribute to your radio/checkbox html element.

<input type="checkbox" data-ckd="splash" />

If you are using custom checkboxes/radios you can use this library by defining the aria-checked attribute:

<label for="CustomCheckbox">
    <span class="CustomCheckbox" role="checkbox" data-ckd="pulse" id="CustomCheckbox" aria-checked="true">
        <input type="checkbox">
    </span>
    Input label
</label>

Browser support