Colors

Side Project | 2016 | Visit Site | View Source

A Learning Tool

The main purpose of colors.graysonwright.com is to learn ES6, the new Javascript standard. I had used many different Javascript frameworks during my time at thoughtbot, but I had never written object-oriented Javascript with no frameworks layered on top.

As a toy project, I set out to build a friendly web interface to Chris Kempson's wonderful base16 command-line tool.

colors web interface

Implementation

The application uses ES6 classes to control the behavior of each UI element. It uses a custom color picker built on HTML canvas, and uses CSS Flexbox for the layout.

We use a clone of [base16-builder] on the server to generate and serve colorscheme files based on the user's selection.