Design by typing

Screencasts on design and front-end development

Responsive Photo Grid in 5:20

This is my attempt to build a simple responsive photo grid in under 5:20.

First I start off by cloning tachyons into a new folder called tops. Then I run npm install . && npm start so that I can get going while all the packages install - and npm start will kick off exactly when it's done. Running npm start triggers a browser to open that is now set to reload everytime you save a file. This gives me a quick feedback loop I find invaluable while doing responsive design.

At the end I notice that the grid looks messy and unintentional due to the number of photos. I solve this by setting two to be 50% with and then having a row of 4 above that. Not an ideal solution, but I didn't have much time to think of much else :)

Resources

Jxnblk Music