The ‘Ribbon’ interface Microsoft introduced with Office 2007 provided an innovative approach to the use and layout of toolbars in applications.

Following the release, OpenOffice toyed with the idea of creating a similar ‘tabbed toolbar’ concept for use with its own office suite. Whilst the mock-ups and discussions never bore much in the way of fruit for OpenOffice the idea of a ‘ribbon’ for use in open-sources apps hasn’t been abandoned.

Reader George T mailed in to share a project he’s working on that implements the “Ribbon” interface in HTML5/CSS3/Javascript for web app developers, should they wish, to use in their applications.

The project is only “half way there” at present, but George told us that it should be “100% completed” within a month or so, at which time the source code will be released.

Work so far

Being built on open standards, and being open-source itself, the ‘Ribbon control’ looks the same in a web-browser on Linux as it does in a web-browser on Windows: –

George briefly explains a bit more about the idea on his blog: –

“I have been working on this portion for about two months, trying to find the best way to write a Desktop Web Application, it is basically a Desktop Application that runs inside the browser instead of Xaml or Windows Forms.

And the most important is all of the html mark-up are custom tags, easy to understand.

Custom html tags to create a Ribbon

Aping Mad

The aping of anything linked to Microsoft will irk a minority, but the beauty of freedom means if you don’t like something you don’t have to use it.  Personally, I look forward to seeing what kinds of web apps make use of George’s Ribbon control…

html5 ribbon webapps