We’ve been working separately on a UI framework for the Lucee documentation project, based on the Google Material spec. We’re almost at a point where we can start integrating templates, so thought it might be worth a sneak peek.
There’s a fully interactive prototype here:
The following screenshots will give you a feel for “the look”, and some reasoning behind the approach.
Standard templates.
There’s a set of standard templates, complete with typography, info boxen, tables, code blocks and formatting for pretty much all elements. The left hand menu is always open if the screen is wide enough, and collapsed if the viewport is narrow.
Truck loads of list data.
Function and tag lists present a major headache; the lists are both very long and short. In this example, the design collapses all functions into their A-Z grouping as a list of full width “tiles”. Clicking a tile expands the underlying function list.
In addition to the function name, we include the usage snippet as syntax is a common requirement. The entire tile is clickable.
Where possible we badge the tile on the right hand side to indicate functions that are deprecated or not implemented. Perhaps in time we could also show the engine version where the function became available.
For tags usage is often very verbose. Instead we put the first line of the short description to give users a better chance of determining if its really the tag they were looking for.
Category view.
The category list is much shorter, so we take advantage of this and use the horizontal space available to us. We enforce a pretty row based layout.
Detail view.
We’ve paid attention to the typography and layout of the detailed tag and function views.
Responsive design
It works at all sorts of resolutions big and small, with appropriate behaviours for menus and other elements.
Enjoy!