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 main

<button class="jhlite-button-main">Button
</button>
<button class="jhlite-button-main" disabled="disabled">Button
</button>
<button class="jhlite-button-main -small">Button
</button>
<button class="jhlite-button-main -block">Button
</button>
button.jhlite-button-main Button
button.jhlite-button-main(disabled="disabled")
  | Button
button.jhlite-button-main.-small Button
button.jhlite-button-main.-block Button

Button switch

<button class="jhlite-button-switch">button-switch
</button>
<button class="jhlite-button-switch -selected">button-switch-selected
</button>
button.jhlite-button-switch button-switch
button.jhlite-button-switch.-selected button-switch-selected

Button toggle

Button toggle can display a short name by default and expand to show a full name on hover or when active.

Use the shortName and fullName properties to enable this feature:

+jhlite-button-toggle({shortName: 'JS', fullName: 'JavaScript'})

<button class="jhlite-button-toggle">Toggle
</button>
<button class="jhlite-button-toggle -active">Toggle active
</button>
<button class="jhlite-button-toggle" disabled="disabled">Toggle disabled
</button>
<button class="jhlite-button-toggle"><span class="jhlite-button-toggle-content"><span class="jhlite-button-toggle-short-name">JS</span><span class="jhlite-button-toggle-full-name">JavaScript</span></span>
</button>
<button class="jhlite-button-toggle -active"><span class="jhlite-button-toggle-content"><span class="jhlite-button-toggle-short-name">TS</span><span class="jhlite-button-toggle-full-name">TypeScript</span></span>
</button>
<button class="jhlite-button-toggle" disabled="disabled"><span class="jhlite-button-toggle-content"><span class="jhlite-button-toggle-short-name">CSS</span><span class="jhlite-button-toggle-full-name">Cascading Style Sheets</span></span>
</button>
button.jhlite-button-toggle Toggle
button.jhlite-button-toggle.-active Toggle active
button.jhlite-button-toggle(disabled="disabled")
  | Toggle disabled
button.jhlite-button-toggle
  span.jhlite-button-toggle-content
    span.jhlite-button-toggle-short-name JS
    span.jhlite-button-toggle-full-name JavaScript
button.jhlite-button-toggle.-active
  span.jhlite-button-toggle-content
    span.jhlite-button-toggle-short-name TS
    span.jhlite-button-toggle-full-name TypeScript
button.jhlite-button-toggle(disabled="disabled")
  span.jhlite-button-toggle-content
    span.jhlite-button-toggle-short-name CSS
    span.jhlite-button-toggle-full-name Cascading Style Sheets

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

Select

<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>
<select class="jhlite-select" disabled="disabled">
  <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>
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
select.jhlite-select(disabled="disabled")
  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

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