Tikui.org

Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Atomic Design by Brad Frost

Dual section

<div class="tikui-dual-section -left-to-right -s200">
  <div class="tikui-dual-section--slot">
    <div class="tikui-vertical-spacing -s16">
      <div class="tikui-vertical-spacing--line">
        <div class="tikui-title-section">Section title
        </div>
      </div>
      <div class="tikui-vertical-spacing--line">
        <p class="tikui-paragraph">Paragraph
        </p>
      </div>
    </div>
  </div>
  <div class="tikui-dual-section--slot"><img class="tikui-image" src="../assets/placards-illustration.svg" alt="Illustration example" width="436" height="341"/>
  </div>
</div>
<div class="tikui-dual-section -right-to-left -s200">
  <div class="tikui-dual-section--slot">
    <div class="tikui-vertical-spacing -s16">
      <div class="tikui-vertical-spacing--line">
        <div class="tikui-title-section">Section title
        </div>
      </div>
      <div class="tikui-vertical-spacing--line">
        <p class="tikui-paragraph">Paragraph
        </p>
      </div>
    </div>
  </div>
  <div class="tikui-dual-section--slot"><img class="tikui-image" src="../assets/placards-illustration.svg" alt="Illustration example" width="436" height="341"/>
  </div>
</div>
.tikui-dual-section.-left-to-right.-s200
  .tikui-dual-section--slot
    .tikui-vertical-spacing.-s16
      .tikui-vertical-spacing--line
        .tikui-title-section Section title
      .tikui-vertical-spacing--line
        p.tikui-paragraph Paragraph
  .tikui-dual-section--slot
    img.tikui-image(src="../assets/placards-illustration.svg" alt="Illustration example" width="436" height="341")
.tikui-dual-section.-right-to-left.-s200
  .tikui-dual-section--slot
    .tikui-vertical-spacing.-s16
      .tikui-vertical-spacing--line
        .tikui-title-section Section title
      .tikui-vertical-spacing--line
        p.tikui-paragraph Paragraph
  .tikui-dual-section--slot
    img.tikui-image(src="../assets/placards-illustration.svg" alt="Illustration example" width="436" height="341")
<header class="tikui-header">
  <div class="tikui-header--slot"><img class="tikui-logo" src="../atom/logo/logo.svg" width="115" height="67" alt="Tikui logo"/>
  </div>
  <div class="tikui-header--slot -expand">
    <nav>
      <ul class="tikui-header-navigation">
        <li class="tikui-header-navigation--slot">
          <button class="tikui-header-item -selected" aria-current="page"><span class="tikui-header-item--text">First</span><span class="tikui-header-item--feedback"></span></button>
        </li>
        <li class="tikui-header-navigation--slot">
          <button class="tikui-header-item"><span class="tikui-header-item--text">Second</span><span class="tikui-header-item--feedback"></span></button>
        </li>
        <li class="tikui-header-navigation--slot">
          <button class="tikui-header-item"><span class="tikui-header-item--text">Third</span><span class="tikui-header-item--feedback"></span></button>
        </li>
      </ul>
    </nav>
  </div>
</header>
header.tikui-header
  .tikui-header--slot
    img.tikui-logo(src="../atom/logo/logo.svg" width="115" height="67" alt="Tikui logo")
  .tikui-header--slot.-expand
    nav
      ul.tikui-header-navigation
        li.tikui-header-navigation--slot
          button.tikui-header-item.-selected(aria-current="page")
            span.tikui-header-item--text First
            span.tikui-header-item--feedback
        li.tikui-header-navigation--slot
          button.tikui-header-item
            span.tikui-header-item--text Second
            span.tikui-header-item--feedback
        li.tikui-header-navigation--slot
          button.tikui-header-item
            span.tikui-header-item--text Third
            span.tikui-header-item--feedback

Linear molecule

<div class="tikui-linear-molecule">
  <div class="tikui-linear-molecule--atom">
    <div class="tikui-atom">
      <div class="tikui-atom--heart">
        <div class="tikui-atom--content">First
        </div>
      </div>
    </div>
  </div>
  <div class="tikui-linear-molecule--atom">
    <div class="tikui-atom">
      <div class="tikui-atom--heart">
        <div class="tikui-atom--content">Second
        </div>
      </div>
    </div>
  </div>
</div>
.tikui-linear-molecule
  .tikui-linear-molecule--atom
    .tikui-atom
      .tikui-atom--heart
        .tikui-atom--content First
  .tikui-linear-molecule--atom
    .tikui-atom
      .tikui-atom--heart
        .tikui-atom--content Second

Spacing

Horizontal spacing

<div class="tikui-horizontal-spacing -s32">
  <div class="tikui-horizontal-spacing--column">Column 1
  </div>
  <div class="tikui-horizontal-spacing--column">Column 2
  </div>
</div>
<div class="tikui-horizontal-spacing -equivalent -s32">
  <div class="tikui-horizontal-spacing--column">Column 1
  </div>
  <div class="tikui-horizontal-spacing--column">Column 2
  </div>
  <div class="tikui-horizontal-spacing--column">Column 3
  </div>
</div>
.tikui-horizontal-spacing.-s32
  .tikui-horizontal-spacing--column Column 1
  .tikui-horizontal-spacing--column Column 2
.tikui-horizontal-spacing.-equivalent.-s32
  .tikui-horizontal-spacing--column Column 1
  .tikui-horizontal-spacing--column Column 2
  .tikui-horizontal-spacing--column Column 3

Vertical spacing

<div class="tikui-vertical-spacing -s16">
  <div class="tikui-vertical-spacing--line">Line 1
  </div>
  <div class="tikui-vertical-spacing--line">Line 2
  </div>
</div>
.tikui-vertical-spacing.-s16
  .tikui-vertical-spacing--line Line 1
  .tikui-vertical-spacing--line Line 2