Hyun

My work and me

About Me

Hello, my name is Hyun — I am a designer and technologist creating symbiotic relationships between information and people. I am currently working with researchers, engineers and designers at IBM Research in Yorktown Heights, New York.
If you have any questions or have something in mind for discussion, please don't hesitate to contact me.

Commercial

Community

Recreational

Legacy

Columnify

Columnify

2013 — Community / Self-initiated

Teaser image for the Columnify project.

SYNOPSIS: At the time of the plug-in, it was difficult for me to create a left-to-right and top-to-bottom, stacking card design that looked similar to Pinterest. I had to use this design pattern during the process of creating the Wolf Performing Arts Center project. Rather than using the code once, I decided to release it so others can save some time.

Problem

CARDS and their model of stacking left to right and top to bottom can be a tricky thing to develop. It is because the box model of CSS always follows a baseline of the lengthiest card on the row before the one being rendered. At the time, there were other plug-ins that helped to create a card-stack system, but all followed a collapsible system where the cards did not stack in a reading order (left to right and top to bottom).

Process

The code was created with jQuery (a JavaScript library) in order to keep length and size of the plug-in code to a minimum. The plug-in required only one parameter, which was the value of the cards that were going to be displayed in a row. The plug-in calculates each height of the cards and calculates a margin offset per card that aligns all of the cards left to right.

Outcome

Screenshot of stacked cards created using HTML and CSS before applying Columnify.
Screenshot of stacked cards created using HTML and CSS before applying Columnify.
Screenshot of stacked cards after applying Columnify.
Screenshot of stacked cards after applying Columnify.