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

Icon

<em class="jhlite-icon jhlite-icon-book" role="img" aria-label="Icon book"></em><em class="jhlite-icon jhlite-icon-puzzle" role="img" aria-label="Icon puzzle"></em><em class="jhlite-icon jhlite-icon-binoculars" role="img" aria-label="Icon binoculars"></em><em class="jhlite-icon jhlite-icon-map" role="img" aria-label="Icon map"></em><em class="jhlite-icon jhlite-icon-github-circled" role="img" aria-label="Icon github-circled"></em><em class="jhlite-icon jhlite-icon-twitter" role="img" aria-label="Icon twitter"></em><em class="jhlite-icon jhlite-icon-ccw" role="img" aria-label="Icon ccw"></em><em class="jhlite-icon jhlite-icon-play" role="img" aria-label="Icon play"></em><em class="jhlite-icon jhlite-icon-open-collective" role="img" aria-label="Icon open-collective"></em><em class="jhlite-icon jhlite-icon-jhipster" role="img" aria-label="Icon jhipster"></em>
em.jhlite-icon.jhlite-icon-book(role='img', aria-label='Icon book')
em.jhlite-icon.jhlite-icon-puzzle(role='img', aria-label='Icon puzzle')
em.jhlite-icon.jhlite-icon-binoculars(role='img', aria-label='Icon binoculars')
em.jhlite-icon.jhlite-icon-map(role='img', aria-label='Icon map')
em.jhlite-icon.jhlite-icon-github-circled(role='img', aria-label='Icon github-circled')
em.jhlite-icon.jhlite-icon-twitter(role='img', aria-label='Icon twitter')
em.jhlite-icon.jhlite-icon-ccw(role='img', aria-label='Icon ccw')
em.jhlite-icon.jhlite-icon-play(role='img', aria-label='Icon play')
em.jhlite-icon.jhlite-icon-open-collective(role='img', aria-label='Icon open-collective')
em.jhlite-icon.jhlite-icon-jhipster(role='img', 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)
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></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
<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