Stylebooks: CSS 101

Finding the right class

Brushes, Public Domain Image from https://www.flickr.com/photos/freestocks/33040836690

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).

Blogs

Good job Olaf !

Personnally, I would prefer to have this feature on all pages... why not put it in the main admin menu ?

But only visible for the omniadmin for example.

Hi Eric,

Thank you - I'm not sure what you'd do with individual CSS samples on _all_ pages, but you have options:

#1, the popups show widgets, that are available to you out of the box, and you can drop them on any page, and keep it open.

#2, You can change the condition for showing the ControlMenuItem. It's simple, and it's here: https://github.com/olafk/stylebook-tokendisplay-web/blob/master/src/main/java/de/olafkock/liferay/stylebook/token/display/StyleBookSampleProductNavigationControlMenuEntry.java#L49