Skip to main content

RLayout - A classic revamped

If you have worked in the corporate webapp industry then you have come accross this 'L' shaped layout, with a top navbar and a side menu. You probably remember the navbar containing (way) too many entries (can call it portals in old lingo), and you probably still get the chills everytime you remember how extensive and overly complex those side menu trees could get.

Luckily for some of us this is a distant memory already. Nowadays everything is cleaner, products are well planned and designed, the-more-the-merrier is no longer the rule of thumb for functionalities.
Alas legacy systems still need to be maintained, and while this task is not as compelling as designing gorgeous new products, it is a valuable contribution to the people that still rely on these old systems.

Being engaged as I am with a system that shares some of these attributes, I decided to try and bring some life back into it by upgrading its layout, in order to give the overall application a fresher look and responsive behaviour.

Check RLayout

Project repository:
Live demo:
Credits to Tiago Pratas ( for some additional styling and his pixel keen eye.

Author's notes

Taking into consideration that the premise mentioned above had to be preserved, that is, the layout would have to still accomodate several top level entries and complex side menu structures, I am really happy with the outcome. There are two things in particular that I find quite positive.
The first being that, by pulling some functionality that is transverse to any webapp into the layout itself, the ammount of functionalities rendered otherwise is smaller, making all the inner content business-specific. I am of course talking about functionalities such as profile settings and messaging.
The other important thing is to use the layout as a content contract and a bastion of uniformity. You need to understand that within that layout all kinds of views can be rendered. Ranging from primitive jsp technology to modern angular SPAs. And while within the main area anything goes, the underlying layout ensures that at least those contents will be contained within something that will be correcly displayed no matter the device or user-agent.

I am using Mustache for the templating. I know it isn't all fancy but I really didn't need much templating.

        <li class="menu-item menu-item-l0 selected-menu-item"><a href="{{link}}">{{label}}<i class="fa fa-plus-circle menu-header-icon"></i></a></li>
        <li class="menu-item menu-item-l0"><a href="{{link}}">{{label}}<i class="fa fa-plus-circle menu-header-icon"></i></a></li>
        <li class="menu-item menu-item-l0 selected-menu-item"><div>{{label}}<i class="fa fa-plus-circle menu-header-icon"></i></div></li>
        <li class="menu-item menu-item-l0"><div>{{label}}<i class="fa fa-plus-circle menu-header-icon"></i></div></li>

The file layout-content.json defines the layout contract.

    "title": "RLayout",
    "organization": {
        "name": "",
        "has_logo": false,
        "logo": null

Then with the help of a simple python script I can parse layout-template.html and layout-content.json to produce the layout to be served.

import json
import pystache

templateReader = open("../layout-template.html", 'r')
contentReader =  open("layout-content.json", 'r')
layoutWriter = open("../layout.html", 'w')

layoutTemplate ='utf-8')
contentJson = json.load(contentReader)

layout = pystache.render(layoutTemplate, contentJson)
layoutUTF = layout.encode('utf-8')


Also worth mentioning is the side menu implementation with its pruning logic. Despite being represented as a tree structure in the contract, when the menu is parsed it is flattened out to be represented as a regular <ul><li></li></ul> structure. So inside layout.js you can find the algorithm that rebuilds the menu tree on top of soft references to jQuery nodes. The Mnode object is still in a crude state but you can already see this technique of using jQuery wrappers to keep semantic representation of your UI objects.

That's it for tonight.
Good night and good coding.


Comments powered by Disqus