Ride the grid

Part 1: Recreate this in a CodePen or something. This is the desktop-only size version. The contest is who can make it – with the least amount of code. Send it to Derek when you are done. Submissions are final! 😉

Part 2: Fork that Pen: Now reverse engineer what would have to happen to make it work on all screen sizes. You’ll have to decide.

The first example is a simplified version of a Mondrian painting: “Composition with Large Red Plane, Yellow, Black, Gray, and Blue.”

This one is also simplified a bit but retains some of its less-than-perfect-gridness.

It uses all of the same ideas but just a few little tweaks. Remember, that columns can be any size you want.

This is built on a 12x grid. That’s cool because it supports multiples of 1, 2, 3, 4, and 6.

But the thing is… sometimes the “designer” (The visual designer) – just hands you this. Then YOU have to figure out how it should work on all of the other screens.

Take 40 minutes. Set the timer. Get out your dotted paper and pencil (and eraser) and figure out how you could walk this back and make it look nice on the smaller screens. Then – show it to the group of course.