LeanShell: An Office-inspired CSS Theme for Web Applications


Today’s post introduces LeanShell (fka LeanControls), an Office-inspired theme and framework for HTML5 and Electron-based (web) apps.

I have recently started working on a new pet project (more on this maybe in a later post). I was about to create a WPF desktop app using Microsoft’s Ribbon UI (through a third-party component library). Though actually not new, the Microsoft Office Fluent UI is something really well done in UX terms. Besides, Microsoft-versed users feel right at home in Office-themed applications, so why bother with traditional UI metaphors? No problem, I thought, there are loads of .Net Ribbon controls available for WPF. But on second thoughts, the big downside of WPF is that you cannot use it to create cross-platform desktop applications. In this case, I wanted my app to be a good citizen on all platforms, so I had to look for alternative development stacks (UI, business logic, persistence).

The Best of Both Worlds Challenge

A declarative UI model is a must-have for me (anything less is just a waste of time), so this reduces the number of viable candidates (at least where desktop RAD is concerned): JavaFX is certainly doable, but compared to WPF it feels just very immature and buggy (besides, I am not aware of any decent ribbon implementation for JavaFX). AngularJs is great and does a hell of a job with its neat declarative bindings and web component-style directives. But I needed support for the local file system and did not want to be limited by the browser sandbox.

Luckily, there are some new kids on the block now allowing you to get the best of both worlds, so to say, i.e. write web apps (CSS3, HTML5 + all sorts of JavaScript frameworks) for desktop platforms. Namely, there are NW.js and Electron (formerly known as Atom Shell). The latter is the technology behind the Atom editor and Microsoft’s new Visual Studio Code. So I decided to give it a try.

The Open Source Challenge

Stuck with Electron, I went looking for some CSS/Js office-style UI controls. Finding a decent ribbon implementation for JavaScript (or rather TypeScript in my case) and AngularJs proved to be much more challenging. All I could find was RibbonJs, a very decent ribbon implementation by Martin Ivanov (and decently priced, too). However, my project is supposed to be released as open source (at least, that’s my intention), so relying on commercial third-party vendors is not an option.

Okay, long story short, I felt up to the challenge and opted for writing my own office-inspired Ribbon implementation using CSS and JavaScript (TypeScript). The result (somewhat sluggishly called “LeanShell” [formerly LeanControls]) is up on github. Please note that is is a proof-of-concept, an early prototype in the making. So do not expect it to work across platforms and browsers, less so in a production-like quality.

LeanControls Source Code on GitHub

Please grab the bits from GitHub.

Addendum (May 2016)

The github repo now features boilerplate starter projects for pure HTML5/CSS3 web apps, AngularJs, and Electron-based apps.

European Citizens’ Initiative Against TTIP and CETA