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>

.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

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
<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")