savebox

Like most of the designers and arty types I know, my earliest memories include messing around with crayons. I had a huge basket of them, which included some of the crayons my mom had when she was a kid.

So when Apple added a box of crayons as a Mac OS 8 UI element—21 years ago!—I was delighted. Admittedly it was more fun than practical, but it's one of my favorite quirky little features. (Apparently—at least in the earlier versions—the crayons became more worn down over time. This level of whimsical detail is why I grew up loving Apple UI design—you could tell they had fun.)*

Recently, I started thinking about how one might implement a crayon picker in CSS only.

The basic design

First question: How to design the tip? It's possible to create triangular shapes in CSS via borders (something I did here), and at first, I thought that was the way to go. Problem is that the shape isn't actually triangular; you're still ultimately working with a square, which could be a problem if you want to give it dimensionality by applying a shadow or gradient.

[crayons-diagram caption="None of these would be particularly convincing as the tip of a crayon."]

It occurred to me that the CSS perspective property might be useful. Perspective is typically used on 3D designs to warp objects so that they appear to recede into the distance. In this case, I just needed to warp a rectangle until it looked like the tip of a crayon. Turned out that transform: perspective() worked perfectly.

The other benefit of perspective was that it made shading and highlights look even more natural. I'd applied several gradients to the tip to give it some dimensionality; with perspective applied, everything inside the tip is perspective-ized as well. The final result looked a lot like the tip of a crayon.

Crayon Factory

At this point, I had only one crayon. I'd had an entire basket of them as a kid, so this didn't seem sufficient.

Speaking of which—what did they call all those colors, anyhow? I did some looking around and discovered that someone had very thoughtfully made a list of all 120 Crayola colors—and included their hex values, no less. This was amazing. Now I just needed to convert that list into a set of crayons.

I had the following markup:

<div class="crayon__container Chestnut"> <div class="crayon__tip"></div> <div class="crayon__body"> <div> <b class="name">Chestnut </b><b class="hex">BC5D58</b></div> </div> </div>

It's not that complicated, relatively speaking, but stamping out 120 of them sounded pretty tedious. Also, if I realized I needed to change the markup, I didn't want to have to adjust it in 120 different places. This sounded like a job for a template. I considered writing something in PHP, but I'd been developing this in CodePen and I wanted to keep the code all in one place.

As it was, I'd already been doing some experimenting with Pug. It's pretty cool. I'm still getting to know HTML preprocessors, but Pug made it easy to set up mixins similar to SCSS.

I converted the crayon markup to a Pug mixin:

mixin crayon(name, hex) div.crayon__container(class=name) .crayon__tip .crayon__body div b.name #{name} b.hex #{hex}

My goal: iterate over the list of colors in Pug, and kick out the markup for 120 crayons.

The first thing I needed to do was convert the list (it was an HTML table) to a Pug array. A few search-and-replaces later, and I had the following:

- var colors = [{"name":"Mahogany","hex":"CD4A4A"}, {"name":"Fuzzy-Wuzzy-Brown","hex":"CC6666"}, {"name":"Chestnut","hex":"BC5D58"}, ...

Loop through that as follows:

each color in colors +crayon(color.name, color.hex)

...and we get 120 crayons.

Sort of. The HTML markup is just structural—it doesn't contain the coloring at all. The crayons would have to get their color from a class. I'd already set up my crayon CSS as an SCSS mixin, so stamping out 120 crayon classes was just a matter of looping through the list of colors and defining all 120 classes via the mixin.

First, I needed to set up another array, this time in SCSS (except in SCSS-ese, it's called a "map"). Another set of search-and-replaces, and I had this:

$colors: ( Mahogany: #CD4A4A, Fuzzy-Wuzzy-Brown: #CC6666, Chestnut: #BC5D58, ...

Another array, another each operation. It's pretty simple:

@each $name, $bgcolor in $colors { .#{$name} { @include crayon($bgcolor, "none", 1); } }

Crayons!

[include codepen here]

Today's experiment: Replacing media queries with mixins via the @content directive.

It sounds stupid, but for the life of me—and I've been designing responsive sites for six years now—I can't remember the media query syntax. Every time I need a media query, I have to check back through my files to find an example. That's annoying.

So I created the following mixins:

@mixin small() { @media screen and (min-width: $small) { @content; } } @mixin medium() { @media screen and (min-width: $medium) { @content; } } @mixin large() { @media screen and (min-width: $large) { @content; } }

This means invoking the mixin in a slightly different way: not as a self-contained function call, the way you'd typically do it, but as a function that acts a little like a selector:

.u-Figure { @include medium() { width: 33%; } }

That @content directive means: "Whatever this mixin is wrapped around, place it here". The compiled CSS looks like this:

@media screen and (min-width: 50em) { .u-Figure { width: 33%; } }

I've only just started doing this, so there may be downsides I haven't anticipated. This centralizes the code a little more, but unless the CSS syntax for media queries drastically changes, I doubt I'll take advantage of that. @content seems pretty powerful, and I'll probably see more uses for this in the future.