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

Page

<div class="tikui-template-page -atomized">
  <div class="tikui-template-page--header">
    <div class="tikui-template-page--container">
      <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>
    </div>
  </div>
  <div class="tikui-template-page--body">
    <div class="tikui-template-page--container">
      <div class="tikui-vertical-spacing -s100">
        <section class="tikui-vertical-spacing--line">
          <div class="tikui-vertical-spacing -s64">
            <div class="tikui-vertical-spacing--line">
              <div class="tikui-vertical-spacing -s16">
                <div class="tikui-vertical-spacing--line">
                  <h1 class="tikui-title-main">Main <span class="tikui-title-main--bordered">title</span>
                  </h1>
                </div>
                <div class="tikui-vertical-spacing--line">
                  <p class="tikui-paragraph">Paragraph
                  </p>
                </div>
                <div class="tikui-vertical-spacing--line">
                  <p class="tikui-paragraph -bold">Bold paragraph
                  </p>
                </div>
              </div>
            </div>
            <div class="tikui-vertical-spacing--line">
              <div class="tikui-horizontal-spacing -s32">
                <div class="tikui-horizontal-spacing--column">
                  <button class="tikui-button">Primary
                  </button>
                </div>
                <div class="tikui-horizontal-spacing--column">
                  <button class="tikui-button -secondary">Secondary
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="tikui-vertical-spacing--line">
          <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>
        </section>
      </div>
    </div>
  </div>
</div>
.tikui-template-page.-atomized
  .tikui-template-page--header
    .tikui-template-page--container
      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
  .tikui-template-page--body
    .tikui-template-page--container
      .tikui-vertical-spacing.-s100
        section.tikui-vertical-spacing--line
          .tikui-vertical-spacing.-s64
            .tikui-vertical-spacing--line
              .tikui-vertical-spacing.-s16
                .tikui-vertical-spacing--line
                  h1.tikui-title-main
                    | Main 
                    span.tikui-title-main--bordered title
                .tikui-vertical-spacing--line
                  p.tikui-paragraph.
                    Paragraph
                    
                .tikui-vertical-spacing--line
                  p.tikui-paragraph.-bold.
                    Bold paragraph
                    
            .tikui-vertical-spacing--line
              .tikui-horizontal-spacing.-s32
                .tikui-horizontal-spacing--column
                  button.tikui-button.
                    Primary
                    
                .tikui-horizontal-spacing--column
                  button.tikui-button.-secondary.
                    Secondary
                    
        section.tikui-vertical-spacing--line
          .tikui-vertical-spacing.-s16
            .tikui-vertical-spacing--line
              .tikui-title-section.
                Section title
                
            .tikui-vertical-spacing--line
              p.tikui-paragraph.
                Paragraph