Tikui

Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Atomic Design by Brad Frost

Field

<div class="jhlite-field">
  <div class="jhlite-field--label">
    <label class="jhlite-label" for="field-name">Field name
    </label>
  </div>
  <div class="jhlite-field--field">
    <input class="jhlite-input-text" id="field-name" value="Field value"/>
  </div>
</div>
<div class="jhlite-field">
  <div class="jhlite-field--label">
    <label class="jhlite-label" for="field-optional">Field optional
    </label>
  </div>
  <div class="jhlite-field--field">
    <input class="jhlite-input-text" id="field-optional"/>
  </div>
  <div class="jhlite-field--optional">Optional</div>
</div>
<div class="jhlite-field">
  <div class="jhlite-field--label">
    <label class="jhlite-label" for="field-select-name">Field select name
    </label>
  </div>
  <div class="jhlite-field--field">
    <select class="jhlite-select">
      <option value="">Select a preset...</option>
      <option value="preset.name">Java Library with Maven</option>
      <option value="preset.name">Webapp: Vue + Spring Boot</option>
      <option value="preset.name">JHLite Extension with Maven</option>
    </select>
  </div>
</div>
.jhlite-field
  .jhlite-field--label
    label.jhlite-label(for="field-name")
      | Field name
  .jhlite-field--field
    input#field-name.jhlite-input-text(value="Field value")
.jhlite-field
  .jhlite-field--label
    label.jhlite-label(for="field-optional")
      | Field optional
  .jhlite-field--field
    input#field-optional.jhlite-input-text
  .jhlite-field--optional Optional
.jhlite-field
  .jhlite-field--label
    label.jhlite-label(for="field-select-name")
      | Field select name
  .jhlite-field--field
    select.jhlite-select
      option(value)
        | Select a preset...
      option(value="preset.name")
        | Java Library with Maven
      option(value="preset.name")
        | Webapp: Vue + Spring Boot
      option(value="preset.name")
        | JHLite Extension with Maven

Icon text

<span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-book" aria-label="Icon book"></em></span><span class="jhlite-icon-text--text">Icon text</span></span><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-book" aria-label="Icon book"></em></span><span class="jhlite-icon-text--text -lg-only">Show lg only</span></span>
span.jhlite-icon-text
  span.jhlite-icon-text--icon
    em.jhlite-icon.jhlite-icon-book(aria-label="Icon book")
  span.jhlite-icon-text--text Icon text
span.jhlite-icon-text
  span.jhlite-icon-text--icon
    em.jhlite-icon.jhlite-icon-book(aria-label="Icon book")
  span.jhlite-icon-text--text.-lg-only Show lg only

Loader container

<div class="jhlite-loader-container">
  <div class="jhlite-loader"></div>
</div>
.jhlite-loader-container
  .jhlite-loader

Mode switch

<div class="jhlite-mode-switch">
  <div class="jhlite-mode-switch--modes">
    <button class="jhlite-button-switch -selected">Option one
    </button>
    <button class="jhlite-button-switch">Option two
    </button>
  </div>
</div>
.jhlite-mode-switch
  .jhlite-mode-switch--modes
    button.jhlite-button-switch.-selected Option one
    button.jhlite-button-switch Option two
<nav>
  <ul class="jhlite-nav">
    <li class="jhlite-nav--item"><span class="jhlite-nav-item -current"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-puzzle" aria-label="Icon puzzle"></em></span><span class="jhlite-icon-text--text">Modules</span></span></span>
    </li>
    <li class="jhlite-nav--item"><a class="jhlite-nav-item" href="#"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-map" aria-label="Icon map"></em></span><span class="jhlite-icon-text--text">Landscape</span></span></a>
    </li>
    <li class="jhlite-nav--item"><a class="jhlite-nav-item" href="#"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-book" aria-label="Icon book"></em></span><span class="jhlite-icon-text--text">Documentation</span></span></a>
    </li>
    <li class="jhlite-nav--item"><a class="jhlite-nav-item" href="#"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-binoculars" aria-label="Icon binoculars"></em></span><span class="jhlite-icon-text--text">Swagger UI</span></span></a>
    </li>
  </ul>
</nav>
nav
  ul.jhlite-nav
    li.jhlite-nav--item
      span.jhlite-nav-item.-current
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-puzzle(aria-label="Icon puzzle")
          span.jhlite-icon-text--text Modules
    li.jhlite-nav--item
      a.jhlite-nav-item(href="#")
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-map(aria-label="Icon map")
          span.jhlite-icon-text--text Landscape
    li.jhlite-nav--item
      a.jhlite-nav-item(href="#")
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-book(aria-label="Icon book")
          span.jhlite-icon-text--text Documentation
    li.jhlite-nav--item
      a.jhlite-nav-item(href="#")
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-binoculars(aria-label="Icon binoculars")
          span.jhlite-icon-text--text Swagger UI

Tag filter

<button class="jhipster-tag-filter">init</button>
button.jhipster-tag-filter init

Toast

<div class="jhlite-toast -success" role="alert">
  <div class="jhlite-toast--message">Good message
  </div>
  <button class="jhlite-toast--action" aria-label="Close"><em class="jhlite-icon jhlite-icon-cancel" aria-label="Icon cancel"></em>
  </button>
</div>
<div class="jhlite-toast -error" role="alert">
  <div class="jhlite-toast--message">Bad message
  </div>
  <button class="jhlite-toast--action" aria-label="Close"><em class="jhlite-icon jhlite-icon-cancel" aria-label="Icon cancel"></em>
  </button>
</div>
.jhlite-toast.-success(role="alert")
  .jhlite-toast--message Good message
  button.jhlite-toast--action(aria-label="Close")
    em.jhlite-icon.jhlite-icon-cancel(aria-label="Icon cancel")
.jhlite-toast.-error(role="alert")
  .jhlite-toast--message Bad message
  button.jhlite-toast--action(aria-label="Close")
    em.jhlite-icon.jhlite-icon-cancel(aria-label="Icon cancel")