
ellievsbear
I'd rather be in outer space đž
Peter Solarz
Monterey Bay Aquarium
"I'm Dorothy Gale from Kansas"

Discoholic đȘ©

JBB: An Artblog!
No title available
Stranger Things
Xuebing Du
No title available

Love Begins
Misplaced Lens Cap
d e v o n

tannertan36
Cosimo Galluzzi

titsay

ç„æ„ / Permanent Vacation

romaâ
occasionally subtle
seen from United States

seen from Malaysia
seen from Kuwait

seen from Philippines
seen from Ukraine
seen from Kuwait
seen from United States

seen from TĂŒrkiye
seen from Italy
seen from Malaysia

seen from Kuwait
seen from United States
seen from Germany

seen from Italy

seen from United States
seen from Malaysia

seen from Kuwait

seen from Malaysia

seen from Argentina
seen from United States
@csilverman
âWestern civilization isnât simply dying,â the co-founder, John Allen, once said. âItâs dead. We are probing into its ruins to take whatever is useful for the building of the new civilization to replace it.â
https://www.nytimes.com/2019/03/29/sunday-review/biosphere-2-climate-change.html
A caption
Back to Crayons
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]
The crayon picker has since evolved to a very nice-looking box of colored pencils. I don't know. I think I preferred the crayonsâand the first-generation, pixel-y ones at that.
Using mixins instead of media queries
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.
I know one thing, though: it's a lot easier for me to remember @include medium() { than, uh, whatever the other thing was.
237. Tuchman, Maurice. Art in Los Angeles: Seventeen Artists in the Sixties. Los Angeles: Los Angeles County Museum of Art, 1981.
https://www.carhartt-wip.com/en?country=NL&gclid=CMTYypuZ_NMCFdW7GwodHcQJYg
âUHâ for Universal Hospitality 2.Â
Collaborative project of Futura and MeetFactory. Each gallery is represented by one color, together combining in the title of the exhibition.