Context aware list-items with css! Well, sort of…

A while back I was building the interface of a web application for one of my clients. It was a desktop-only touchscreen application which required heavy use of shortcuts since it would be used in a very fast paced environment. An expert user had to be able to complete an entire transaction in under 10 seconds on average. To accommodate this I added a shortcut bar to the interface. A user would be able to add up to 10 shortcuts to their workflow.

I had a pretty nice design (in this case I was also the designer. ;)) and already had a pretty good idea of how I would go about building the shortcut bar. The bar would consist of a container div and an unordered list containing 10 shortcut items, with each shortcut being an anchor element. I started coding and within an hour I had my desired outcome. Everything looked aesthetically pleasing, until I started to decrease the number of shortcut items in my list. A user wouldn’t necessarily have the maximum of 10 shortcuts configured, so I wanted to check how less shortcuts would work. In short: it didn’t look good at all.

I had used flexbox to determine the sizes of the shortcuts. They had to be uniform in height. The bar itself was fixed height (the entire height of the screen). This resulted in a nicely distributed list of shortcuts, but only if there were enough shortcuts configured. When a user had less than five shortcuts, the shortcuts started to feel very bulky since they were still stretching out to fill the entire height of the parent container.

Looks okay with 10 shortcut items.

With 5 or less items the shortcuts get very bulky

My first idea to fix this was to just set a fixed height to the shortcuts, but I really didn’t like the idea of removing all the flexibility from the component. What if my client decided to switch hardware in a later stage and go with a different screen size? Chances were that my meticulously designed shortcut bar would not fit nicely, because of the fixed height shortcuts so I had to come up with a different solution.

After a few other failed attempts to fix this I had an epiphany. What if I could make the items in my unordered list context aware? If there were more than 5 shortcuts they should have their flexbox stretchy behaviour. If there were 5 or less, the items should get a max-height to avoid the shortcuts from stretching beyond decent proportions.

The desired outcome for 5 or less items.

The solution

I achieved this result by adding 2 pretty nifty css-selectors to target the first 5 items in the the list, but only if there are no more than 5 items in the list. I do have to add that in certain use cases this won’t be useful if you don’t know the maximum number of items the list can contain.

The configuration of my project allowed up to 10 shortcuts, but no more than that. I could use this to my advantage to determine if there were more or less than 5 items, by using a combination of first-child, :nth-child and the general sibling selector (~). The resulting combined selector being:

&:first-child:nth-last-child(-n + 6), &:first-child:nth-last-child(-n + 6) ~ li

The following pen contains (s)css and html to illustrate the solution:

Example of this solution

I think this is quite an elegant way of solving an issue that would otherwise be tackled by using javascript. In this case I’ve used it to change the sizes of items, but this can also be used with colours etc.