Introducing DropKick.js 2.0

Wednesday, July 9th 2014

Wow. What a journey it has been. A little more than a year ago I inherited a little jquery plugin called DropKick. What DropKick did was take < select > form elements and build an HTML/CSS version of it using JavaScript. This allows us to style what use to be an unstyleable.

DropKick has been around since 2011 and hasn't really seen any love since then. Right after I took over the plugin I merged a ton of pull requests and tried to squash as many bugs as I could. Around that time I realized dk.js as a jquery plugin was getting unwieldy and we needed a rewrite. Something that wasn't a mess. Something that was more modern. Enter DropKick 2.0.

I enlisted help from my good childhood friend Wil Wilsman. He did most of the heavy JS lifting on this one. This couldn't have been done without him!

What's new in 2.0?

Oh man. LOTS! I'm super excited to get this into peoples hands. Some of the new things are:

Pure JavaScript

With 2.0 we decided that jQuery was no longer something that we needed to rely on. We wrote the entire library in pure JavaScript and provide a plugin for jQuery now.

One of the main contributing factors to this decision was a lot of people aren't using a framework like jQuery or they're using something other than jQuery. So it didn't make sense to have to those people require an entire library like jQuery for just our plugin.

Don't be afraid of the pure JS version :) All it takes is this simple line of code to create a new dropkick instance:

new Dropkick("#id_of_select_here");


Fully screen reader accessible

Being fully accessible is probably the biggest selling point of this plugin. Maybe one or two other plugins like DropKick.js are screen reader accessible. This one is also near and dear to my heart since my mom is blind. Checkout the video showing of DropKick with a OSX's built in screen reader.

Acts just like a select

This should be a given right? Wrong! Other select replacement plugins don't mimic selects or they flat out recreate the select the way they think it should have been (ahem! chosen).

DropKick.js 2.0 aims to be literally just like a select you can style. It behaves exactly like a normal select would.


We're now unit testing our plugin and use Travis CI to build every commit! It was exciting for me to write my first JavaScript tests. I'm looking to expand upon DK's test suite in the coming weeks, but what we have now is a pretty good start.

Super powerful API

One of my favorite things about DropKick.js 2.0 is how powerful the API is. It's so powerful I was able to give a whole presentation about it at Front End Orlando. We give you access to 11 methods and 9 different properties. To learn more about it you can watch the Front End Orlando presentation I gave or read through the documentation.

Faster & more efficient

Speed was one of the main goals of rewriting DropKick.js. We cut down the DOM markup as much as we could and optimized our JavaScript. We don't have any stats but I bet my salary 2.0 is at least 30% faster than 1.x.

Download DropKick.js 2.0

You can download DropKick.js 2.0 from github here. We provide a "production" folder which gives you a minified version of dropkick.js and the compiled version of the scss.

Contributing to DropKick

One of the things I learned with dropkick 1.x is we needed better directions on how to contribute to the plugin if you would like to. We've added a nice little contributing guide to the readme which covers how to add an issue to the repo and how to contribute code properly.

Basically if you're creating an issue please provide a code pen or jsbin example. If you're adding code, don't make our code nasty, write tests, and don't break our tests.