Since Liferay introduced Stylebooks, the Best Practice for your installation has changed, to no longer deploy your own theme, but rather use a stylebook and change it to adhere to your Corporate Identity.

Using someone else's CSS classes is quite a task - in fact, even my own CSS classes from more than 1 day ago are hard to remember: Where exactly is the hyphen? Was the prefix "background" or "bg"? How many different shades of the brand color are there? 5? 10? 8?

If you're using the built-in Classic or Dialect theme: These themes have your back. Both come with a sample widget that you can add to any page, and see a usage sample, with all the vocabulary you need when you write a fragment and want to use the theme's (or rather, the stylebook's) styles.

But a page is not what you typically have available when writing a fragment? Well, neither did I.

So I've implemented a handy popup, that displays in the fragment editor, when either of those themes are in use. And you might want to use it as well: Find it on github.

Here's how it looks like for the Dialect theme:

Note the project's README: You'll also need to deploy two .config files to your system, in order for this plugin to work.

Acknowledgements:

Thank you to Evan Thibodeau for letting me know about those sample widgets (and for rejecting my first brute-force idea for implementing this palette)

Illustration: Licensed Public Domain, from Flickr (freestocks.org).