We can create themes using Theme Generator. Liferay Theme Generator is an easy to use command line tool to generate the themes. Liferay plugin SDK isn't required to create the liferay theme and it works well with liferay 6.2 and 7 and probably upcoming versions. Lets see how to install the Theme Generator.
Before, installing Theme Generator, we need to install its dependencies.
1. Install Node.js, if it is not already installed. You can follow this to install node and npm in your system. Double check doesn't harm so we can double check if it is installed correctly.
The output would be like -
Check the npm -
If you see the similar outputs, that's mean node and npm is installed successfully in your system.
2. Install Yeoman and gulp globally by executing the following command -
npm install -g yo gulp
Once done, you have completed with the dependencies that Theme Generator uses. Now lets start installation of the Theme Generator itself. You can install the theme generator with the following command.
npm install -g generator-liferay-theme
3. Install Ruby Sass and Compass -
Liferay theme require using Compass along with Ruby bases Sass. In order to install Sass and Compass, you must install Ruby via Ruby installer. The following command installs the Sass and Compass gems.
gem install sass compass
All done. Now you can generate Liferay Themes using Theme Generator. Run the following command and follow the instructions appear. Provide the required details asked by the Theme Generator.
Note - By default, your theme is based off of the styled theme and uses lib-sass/bourbon, instead of Compass. If, however, if required, you must configure the theme to support Compass. To do so, run the following command -
npm i --save gulp-ruby-sass
That all done.