Tikui

Templates

Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

Atomic Design by Brad Frost

Layout

Show
<div class="jhlite-layout">
  <div class="jhlite-layout--header">
    <header class="jhlite-header">
      <div class="jhlite-header--slot jhlite-with-theme-switch"><a class="jhlite-logo" href="#"><img class="jhlite-logo--icon" src="../atom/logo/jhipster.png" alt="JHipster bow tie" width="48"/><span class="jhlite-logo--text">JHipster Lite</span><span class="jhlite-logo-version--text">v0.45.0</span></a>
      </div>
      <div class="jhlite-header--slot -expand"></div>
      <div class="jhlite-header--slot">
        <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>
      </div>
    </header>
  </div>
  <div class="jhlite-layout--body">
  </div>
</div>
.jhlite-layout
  .jhlite-layout--header
    header.jhlite-header
      .jhlite-header--slot.jhlite-with-theme-switch
        a.jhlite-logo(href="#")
          img.jhlite-logo--icon(src="../atom/logo/jhipster.png" alt="JHipster bow tie" width="48")
          span.jhlite-logo--text JHipster Lite
          span.jhlite-logo-version--text v0.45.0
      .jhlite-header--slot.-expand
      .jhlite-header--slot
        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
  .jhlite-layout--body
Show
<div class="jhlite-menu-content-template">
  <div class="jhlite-menu-content-template--content">Content</div>
  <div class="jhlite-menu-content-template--menu">
    <div class="jhlite-side-menu">
      <div class="jhlite-side-menu--slot -expand">
        <div class="jhlite-vertical-space -paragraph">
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label">First
                </label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text"/>
              </div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label">Second
                </label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jhlite-side-menu--slot">
        <div class="jhlite-vertical-space -paragraph">
          <div class="jhlite-vertical-space--line">
            <button class="jhlite-button-main -block">Button
            </button>
          </div>
          <div class="jhlite-vertical-space--line">
            <button class="jhlite-button-main -block">Button
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.jhlite-menu-content-template
  .jhlite-menu-content-template--content Content
  .jhlite-menu-content-template--menu
    .jhlite-side-menu
      .jhlite-side-menu--slot.-expand
        .jhlite-vertical-space.-paragraph
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label First
              .jhlite-field--field
                input.jhlite-input-text
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label Second
              .jhlite-field--field
                input.jhlite-input-text
      .jhlite-side-menu--slot
        .jhlite-vertical-space.-paragraph
          .jhlite-vertical-space--line
            button.jhlite-button-main.-block Button
          .jhlite-vertical-space--line
            button.jhlite-button-main.-block Button

Toast overlay

Show
<div class="jhlite-layout">
  <div class="jhlite-layout--header">
    <header class="jhlite-header">
      <div class="jhlite-header--slot jhlite-with-theme-switch"><a class="jhlite-logo" href="#"><img class="jhlite-logo--icon" src="../atom/logo/jhipster.png" alt="JHipster bow tie" width="48"/><span class="jhlite-logo--text">JHipster Lite</span><span class="jhlite-logo-version--text">v0.45.0</span></a>
      </div>
      <div class="jhlite-header--slot -expand"></div>
      <div class="jhlite-header--slot">
        <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>
      </div>
    </header>
  </div>
  <div class="jhlite-layout--body">
  </div>
</div>
<div class="jhlite-toast-overlay">
  <div class="jhlite-toast -success" role="alert">
    <div class="jhlite-toast--message">A toast 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>
.jhlite-layout
  .jhlite-layout--header
    header.jhlite-header
      .jhlite-header--slot.jhlite-with-theme-switch
        a.jhlite-logo(href="#")
          img.jhlite-logo--icon(src="../atom/logo/jhipster.png" alt="JHipster bow tie" width="48")
          span.jhlite-logo--text JHipster Lite
          span.jhlite-logo-version--text v0.45.0
      .jhlite-header--slot.-expand
      .jhlite-header--slot
        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
  .jhlite-layout--body
.jhlite-toast-overlay
  .jhlite-toast.-success(role="alert")
    .jhlite-toast--message A toast message
    button.jhlite-toast--action(aria-label="Close")
      em.jhlite-icon.jhlite-icon-cancel(aria-label="Icon cancel")