Most of the apps I develop at work aren’t keyed to a specific design pattern since the apps I work on are for internal use, and are generally limited to the teams that are based out of our office (which includes reports that are out as far as the Philippines ). I rely heavily on Bootstrap because it’s the one of many that I drew from a hat a few years ago, and for those who aren’t up on their layout frameworks, Bootstrap allows me to organize content in a web view without resorting to the Best Practices of 2000, like tables, transparent images, or style sheet shims. Basically, it helps with visual organization.

Anyway, Bootstrap is pretty limited to sticking elements on a page, but doesn’t really excel at getting really sexy with a layout. For example, feast your eyes on this:

This comes from a web game called Prosperous Universe, a kind of less-action-packed EVE Online that focuses mainly on economic warfare. As you can see (and imagine), such a game requires the visibility of a lot of data, and not all of it can sit on the screen at once. Being able to move windows around is important. Being able to open and close windows as needed is also important. I have a fascination with tiny text in large panels, so I hold Prosperous Universe’s UI up as a professional goal.

To that end, I am casually working on a new project that I shall not talk about, not because it’s a big secret but because whenever I talk about a project it instantly becomes cursed. I needed a compartmentalized UI framework, and PU‘s instantly came to mind. But that’s a lot of know-how in JavaScript, CSS, and probably a lot of other weird development libraries. I wanted something out of the box that would help me hit the ground running.

I found Golden Layout.

This is a basic layout design, but even at its most basic, this library has some promising features. It creates panels that can be organized in rows and columns so that panels can be displayed on top of one another or side by side. Panels can also be stacked together to create a tab view. Each panel can be dragged around the screen and placed anywhere else, in front, behind, on top or below, or in a stack with other panels. Each border is adjustable, and adjacent panels will resize themselves accordingly.

I am very pleased to have found Golden Layout, although I’ve got a long way to go before I can really use to for the intended purpose.


Owner and author.

Leave a Reply

Your email address will not be published. Required fields are marked *