gwi-theming

Installation

1. After installing, copy and rename config.theme.example to your root project folder as config.theme.
2. Adjust the values for the variables inside config.theme if necessary. Especially make sure that you:

• declare only the elements, components and pages that you will actually use
• adjust the path for @publicThemeFolder and @projectThemeFolder if necessary
• have the Themes that you declare installed

Make a FrontendComponent themable

1. Inside a FrontendComponent's stylesheet, you import the config.theme as follows:

// modal.less

// specify the type of your FrontendComponent
// Can take one of the following values: element, component, page
@type : 'component';

// A unique identifier for this stylesheet.
// This is the identifier that will be used by `config.theme` to set the theme,
// as well as by the theme.less file to locate the theme variable files inside the theme packages.
@name : 'modal';

@import (multiple) 'config.theme';

Where `@type` can be one of the following values from the: `element`, `component`, `page`.
And `@name` is a unique identifier for the stylesheet. You will later on set the theme for that unique identifier in the `config.theme`

2. Then, inside your config.theme file, you declare which Theme to use for which element, component or page:

   // config.theme
   
   @modal : 'gwi-theme-common';
   

3. Now make sure that every LESS variable that you use inside your modal.less component, is at least declared in

• the Common Theme or
• your Project Theme

The latter applies if you are theming a component that is not or will not be published.

Build the CSS

Building a themed FrontendComponent is no different from building a FrontendComponent with normal LESS files inside.

1. Install the following modules in the root of your project:

• less-css-stream
• parcelify

and if you haven't yet: browserify

2. Then, inside the FrontendComponent that contains LESS files, specify the transform inside package.json, as well as the name(s) of the stylesheets that the parcelify plugin should pick up:

// gwi-modal/package.json

"style": "index.less",
"transforms": [ "less-css-stream" ]

The style key accepts a string or an array. Globs can be used.

3. In your build command in the root of the project you would have something like this:
   browserify -p [ parcelify -o dist/bundle.css ] ./src/bootstrap.js > ./dist/main.js

Contribute

Owner: @gwildu Repository: https://gitlab.com/gwildu/gwi-theming.git