Skip to content
pinegrow.com
Docs menu
Stories and showcase

Color the Boxes

Published Updated

The Pinegrow Challenge: take any tool you like – including coding by hand – and try to be faster than Pinegrow at using classes to style a bunch of boxes.

The goal

Color the boxes with their respective colors. And we need to do it in a proper HTML way: by defining classes red, orange and blue and assigning these classes to the boxes.

Download the project files.

Here are the boxes:

Sixteen unstyled boxes in a four by four grid, each labelled Red, Orange or Blue, before any colors are applied.

How the result should look like

Grid of colored boxes with the Edit code panel open, listing the div.boxes markup with box red, orange and blue classes.

With Pinegrow we do that in 1 minute:

 

Can you do better with your tools?

And don’t be sad if you can’t beat Pinegrow with your favorite tool. Although we enjoy healthy competition, we don’t want you to throw away your existing tools. Pinegrow reads and writes HTML and CSS files directly, so you can easily add Pinegrow to your web development tool-belt and use it alongside other tools.