Tikui

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Atomic Design by Brad Frost

Button

<button class="jhlite-button">Button
</button>
<button class="jhlite-button" disabled="disabled">Button
</button>
<button class="jhlite-button -block">Button
</button>

button.jhlite-button Button
button.jhlite-button(disabled="disabled")
  | Button
button.jhlite-button.-block Button

Chip

<div class="jhlite-chip">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>
<div class="jhlite-chip -selectable-highlighted">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>
<div class="jhlite-chip -not-selectable-highlighted">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>
<div class="jhlite-chip -selected">
  <div class="jhlite-chip--title -applied">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>
<div class="jhlite-chip -extended">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description">Chip description</div>
</div>
<div class="jhlite-chip -selectable-highlighted -extended">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description">Chip description</div>
</div>
<div class="jhlite-chip -not-selectable-highlighted -extended">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description">Chip description</div>
</div>
<div class="jhlite-chip -selected -extended">
  <div class="jhlite-chip--title -applied">Chip title</div>
  <div class="jhlite-chip--description">Chip description</div>
</div>
<div class="jhlite-chip -left-anchor-point">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>
<div class="jhlite-chip -selectable-highlighted -left-anchor-point -right-anchor-point">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>
<div class="jhlite-chip -not-selectable-highlighted -right-anchor-point">
  <div class="jhlite-chip--title">Chip title</div>
  <div class="jhlite-chip--description -compacted">Chip description</div>
</div>

.jhlite-chip
  .jhlite-chip--title Chip title
  .jhlite-chip--description.-compacted Chip description
.jhlite-chip.-selectable-highlighted
  .jhlite-chip--title Chip title
  .jhlite-chip--description.-compacted Chip description
.jhlite-chip.-not-selectable-highlighted
  .jhlite-chip--title Chip title
  .jhlite-chip--description.-compacted Chip description
.jhlite-chip.-selected
  .jhlite-chip--title.-applied Chip title
  .jhlite-chip--description.-compacted Chip description
.jhlite-chip.-extended
  .jhlite-chip--title Chip title
  .jhlite-chip--description Chip description
.jhlite-chip.-selectable-highlighted.-extended
  .jhlite-chip--title Chip title
  .jhlite-chip--description Chip description
.jhlite-chip.-not-selectable-highlighted.-extended
  .jhlite-chip--title Chip title
  .jhlite-chip--description Chip description
.jhlite-chip.-selected.-extended
  .jhlite-chip--title.-applied Chip title
  .jhlite-chip--description Chip description
.jhlite-chip.-left-anchor-point
  .jhlite-chip--title Chip title
  .jhlite-chip--description.-compacted Chip description
.jhlite-chip.-selectable-highlighted.-left-anchor-point.-right-anchor-point
  .jhlite-chip--title Chip title
  .jhlite-chip--description.-compacted Chip description
.jhlite-chip.-not-selectable-highlighted.-right-anchor-point
  .jhlite-chip--title Chip title
  .jhlite-chip--description.-compacted Chip description

Icon

<em class="jhlite-icon jhlite-icon-book" aria-label="Icon book"></em><em class="jhlite-icon jhlite-icon-puzzle" aria-label="Icon puzzle"></em><em class="jhlite-icon jhlite-icon-binoculars" aria-label="Icon binoculars"></em><em class="jhlite-icon jhlite-icon-map" aria-label="Icon map"></em><em class="jhlite-icon jhlite-icon-github-circled" aria-label="Icon github-circled"></em><em class="jhlite-icon jhlite-icon-twitter" aria-label="Icon twitter"></em><em class="jhlite-icon jhlite-icon-ccw" aria-label="Icon ccw"></em><em class="jhlite-icon jhlite-icon-play" aria-label="Icon play"></em><em class="jhlite-icon jhlite-icon-open-collective" aria-label="Icon open-collective"></em><em class="jhlite-icon jhlite-icon-jhipster" aria-label="Icon jhipster"></em>

em.jhlite-icon.jhlite-icon-book(aria-label="Icon book")
em.jhlite-icon.jhlite-icon-puzzle(aria-label="Icon puzzle")
em.jhlite-icon.jhlite-icon-binoculars(aria-label="Icon binoculars")
em.jhlite-icon.jhlite-icon-map(aria-label="Icon map")
em.jhlite-icon.jhlite-icon-github-circled(aria-label="Icon github-circled")
em.jhlite-icon.jhlite-icon-twitter(aria-label="Icon twitter")
em.jhlite-icon.jhlite-icon-ccw(aria-label="Icon ccw")
em.jhlite-icon.jhlite-icon-play(aria-label="Icon play")
em.jhlite-icon.jhlite-icon-open-collective(aria-label="Icon open-collective")
em.jhlite-icon.jhlite-icon-jhipster(aria-label="Icon jhipster")

Input

Input text

<input class="jhlite-input-text" value="With text"/>
<input class="jhlite-input-text" value="Disabled" disabled="disabled"/>
<input class="jhlite-input-text" placeholder="Placeholder"/>

input.jhlite-input-text(value="With text")
input.jhlite-input-text(value="Disabled" disabled="disabled")
input.jhlite-input-text(placeholder="Placeholder")

Label

<label class="jhlite-label" for="id">Label
</label>

label.jhlite-label(for="id")
  | Label

Loader

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

.jhlite-loader
<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>

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
<a class="jhlite-nav-item" href="#">Link item</a><span class="jhlite-nav-item -current">Current item</span>

a.jhlite-nav-item(href="#")
  | Link item
span.jhlite-nav-item.-current Current item

Theme button

<div class="jhlite-theme-button">
  <input class="jhlite-theme-button-toggle" type="checkbox"/>
  <label class="jhlite-theme-switch-label"><span>🌙</span><span>☀️</span>
    <div class="jhlite-theme-switch-toggle"></div>
  </label>
</div>

.jhlite-theme-button
  input.jhlite-theme-button-toggle(type="checkbox")
  label.jhlite-theme-switch-label
    span 🌙
    span ☀️
    .jhlite-theme-switch-toggle