Creating Reusable Pieces of Code for Your Themes

Themelets are small, extendable, and reusable pieces of code. Whereas themes require multiple components, a themelet only requires the files you wish to extend. This creates a more modular approach to theme design that lends itself well to collaboration and reduces the need for duplicated code in your theme.

Themelets let developers easily share code snippets across their themes with other developers. A themelet can consist of CSS and JavaScript. Themelets do not support theme templates.

Themelets are very flexible, and therefore they have a number of possible uses. You can make a themelet to modify the appearance of the admin tools, or a themelet that uses a custom JavaScript component for responsive embedded videos, and everything in between. For example, the Liferay Product Menu Animation Themelet simply alters the animation for the Product Menu.

Figure 1: Themelets can be used to modify one aspect of the UI, that you can then reuse in your other themes.

If there is something you have to manually code for every theme you create, it’s a good candidate for a themelet.

This tutorial demonstrates how to:

• Create a themelet to extend your theme

• Install a Themelet

To create a themelet, you need a theme to extend and the Liferay Theme Generator and dependencies installed, as explained in the Creating Themes tutorial.

Creating a Themelet

Follow these steps to create a themelet:

1. Open the Command Line and navigate to the folder you want to create your themelet in.

2. Run yo liferay-theme:themelet and follow the prompts to generate the themelet.

   

   Figure 2: The Themelet sub-generator automates the themelet creation process, making it quick and easy.

3. The generated themelet contains a package.json file with configuration information and a src/css folder that contains a _custom.scss file. Just like a theme, add your CSS changes to the src/css folder, and add your JavaScript changes to the src/js folder.

4. To use your themelet, you must install it globally first. This makes the themelet visible to the generator. To install your themelet globally, navigate into its root folder and run npm link. Note, you may need to run the command using sudo npm link. This creates a globally-installed symbolic link for the themelet in your npm packages folder. Now your themelet is available to install in your themes.

Now that your themelet is developed, you can install it in your theme.

Installing a Themelet

After you’ve developed your themelet, follow the steps below to install it into your theme.

Note: Gulp is included as a local dependency in generated themes, so you are not required to install it. It can be accessed by running node_modules\.bin\gulp followed by the Gulp task from a generated theme’s root folder.

1. Navigate to your theme’s root folder and run the following command:

   gulp extend
   

2. Choose Themelet as the theme asset to extend.

3. Select Search globally installed npm modules, Search npm registry, or Specify a package URL to locate the themelet.

   

   Figure 3: You can extend your theme using globally installed npm modules, published npm modules, or via a package URL.

   Note: You can retrieve the URL for a package by running npm show package-name dist.tarball.

4. Highlight your themelet, press spacebar to activate it, and press Enter to install it.

5. Run gulp deploy to build and deploy your theme with the new themelet updates.

Your themelet is installed! As you can see, themelets are a handy tool to add to your theme development bag o’ tricks.

Related Topics

Importing Resources with Your Themes

Creating Themes