A Color style guide in React

React Live Color Guide

Demo&Code

This is a live styleguide for colors implemented with React.js.

Colors, specified in hex, rgb or hsl, are read from a JSON file and then displayed arranged in a responsive (Flexbox) grid of color swatches.
Each swatch is rendererd as a card with a sample of the color and then a list of its css color formats(hex, rgb, hsl), auto computed with Tinycolor.
Each color code can be copied to the clipboard with just a click thanks to Clipboard.js .
A Css animation is used to notify the user when the color has been copied to the clipboard.

Issues: on Firefox 40.0.2 copy-to-clipboard doesn’t work and on IE 10 there are some rendering problems. I’m not going to check these bugs now, this was just a quick exercise.

Advertisements

Published by

mgiulio

Front End Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s