Liferay's Stylebook: Your Guide to Effortless UI Customization

Liferay, known for its innovative solutions in digital experience platforms, continues to redefine the landscape of web development. With its latest offering, the Stylebook feature of Liferay , developers now have a powerful tool at their disposal for effortlessly customizing user interfaces. Let's delve into Liferay's Stylebook and how it revolutionizes UI customization.

With Liferay's Stylebook, customizing the user interface is so easy , No more diving into endless lines of code every time you want to make a change. It's all about simplicity and efficiency. You can change colors, fonts, and other design elements with just a few clicks, making the process smooth and hassle-free.

To integrate Liferay's Stylebook, follow these three steps:

1. Create a 'frontend-token-definition.json' file to create your stylebook configuration.
2. Use the defined css variables in the above created json file, to your corresponding CSS properties.
3. Now you can change the values of those css variables dynamically using the Stylebook interface.

To utilize Liferay's Stylebook effectively, you need to define a JSON file called "frontend-token-definition.json." This file contains the values and configurations for your UI elements. When you assign a theme to your site's pages, the frontend token definition included with that theme is utilized when creating a stylebook for the site.

Because the frontend token definition is linked to your theme, frontend tokens must align with CSS variables within your theme module. You specify these frontend tokens in a ".json" file within your theme module's src/WEB-INF/ folder, named frontend-token-definition.json. This structured approach ensures seamless integration and consistency throughout your design process.

Frontend tokens defining the options for configuring your style book are grouped into categories. Each category appears in the drop-down menu when editing your style book, making it easy to locate and customize specific elements of your website's design. This organized approach streamlines the customization process, allowing users to efficiently adjust various aspects of their UI without unnecessary complexity.

Now, let's take a look at an example of the frontend-token-definition.json file to see how we can add categories as dropdowns. After adding the example code snippet below, you'll notice the categories appear as dropdown options. in this below code we have just add one brand color as color picker dropdown

"frontendTokenCategories": [
    {
      "frontendTokenSets": [
        {
          "frontendTokens": [
            {
              "defaultValue": "#002f6c",
              "editorType": "ColorPicker",
              "label": "background-color",
              "mappings": [
                {
                  "type": "cssVariable",
                  "value": "brand-color"
                }
              ],
              "name": "brandColor",
              "type": "String"
            }
          ]
        }
      ],
      "label": "brand-colors",
      "name": "brandColor"
    }]        

In the code snippet above, you'll notice the frontend token set where you can specify the default value. This default value will be displayed in the color picker dropdown as pre-applied. Additionally, you can add a label name for better organization.

Here, a mapping field is used for mapping between the frontend token definition name to the corresponding CSS variable name (must contain type and value as nested fields). Use cssVariable as the type and define the value as the CSS variable name.

In this example, we've added three categories and you can see these categories depicted in the image below.

Now, we need to use defined css variables from frontendToken's mappings into the theme's css files. This allows us to use these values in our stylesheets effortlessly. See the example code below for reference.

  background: var(--brand-color);        

Now, the value will automatically be applied from the stylebook seamlessly because we defined the 'type' as 'cssVariable'.

Let's explore how we can adjust the UI using the stylebook. In this example, we've included three categories: brand colors, heading colors, and spacing. This allows us to modify the brand color using the stylebook. Just ensure that you've applied the same theme to Liferay as the one you've integrated with the stylebook. You can view the image below for reference.

In the image above, you can see how we've effortlessly adjusted the brand color and heading color without needing to edit any code. This is how the stylebook allows for easy customization of the appearance where necessary. With the stylebook, you're not just limited to changing colors; you can also adjust font sizes effortlessly. This flexibility allows for comprehensive customization of the appearance of your website without the need for extensive coding.

Liferay's Stylebook is a really helpful tool for changing how your website appears. It's easy to use and fits well with your existing website themes. That's it !!

Authored By: Ankit Hadiyal

For comprehensive business solutions and insights into Liferay's Stylebook reach out to us at [email protected]. Unleash the full potential of your digital platform with our expertise.