Style

Style guide

You can find the JHipster style guide on Figma, please use this reference to help you create new style.

Component styles (CSS, HTML) are designed under src/main/style using Tikui.

You can start Tikui with npm run tikui:serve, this will open the Pattern Library on http://localhost:9005.

To add a new component, you may like to install tikui command with npm i -g @tikui/cli.

Then create the component using the jhlite prefix, here is an example to create my-atom component.

tikui create -p jhlite my-atom src/main/style/atom

This will generate my-atom under atom directory, don't forget to edit the atom.pug and _atom.scss to show my-atom on the atom page.

You can do the same thing to make a molecule, an organism and a template.

If you need to add a new glyph icon, please notice we are using Fontello. Please read the help Fontello section for any questions.

To add a new glyph using Fontello, please launch:

npm run glyph:open

Then, when you've finished, please download the config only and replace it under src/main/glyph/config.json.

Now you're able to launch:

npm run glyph:build

This will replace the current CSS and font files into the sources.