UI framework for docs.lucee.org

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!

1 Like

Love love love it.

I would still like to see the full list of functions. By doing a quick overview, I sometimes find functions that never know they existed.

Is it possible to add a button that expands everything?

Otherwise, very nice UI!

1 Like

There are 2 doc sites that I find helpful due to their UI.

The CF8 site allows you to quickly look at tags or functions without clicking over and over. Functions is a simple div that opens and shows the groups by letter. Find the letter you want and click on it. One more click and you have the information you need. But the real beauty is the context is still open if you need to look at another function after that one. This feature was lost on CF9 to CF11 docs.

Currently I use CFdocs.org most of the time. Simple UI, just type into the box, arrow down and press enter. Quick and very useful. Being able to pass the docs around by URL is a nice feature too.

In case you weren’t aware @apenhorwood, we now have http://docs.lucee.org. You can search very quickly by hitting ‘/’ and then typing what you want to find (or you can click the search icon).

This better thought out UI will be coming soon and the search feature will remain.

Really appreciate the input re function / tag navigation.

1 Like