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

Auth layout

<div class="prismea-auth-layout -absolute">
  <div class="prismea-auth-layout--box">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-20--slot -center"><i class="prismea-icon prismea-glyph-100-logo"></i></div>
      <div class="prismea-vertical-spacing-20--slot">
        <div class="prismea-field">
          <div class="prismea-field--slot">
            <label class="prismea-label">Username</label>
          </div>
          <div class="prismea-field--slot">
            <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
          </div>
        </div><br/>
        <div class="prismea-field">
          <div class="prismea-field--slot">
            <label class="prismea-label">Password</label>
          </div>
          <div class="prismea-field--slot">
            <input class="prismea-input-text  " type="password" placeholder="Mighty text"/>
          </div>
        </div><br/>
        <button class="prismea-button -block ">Login
        </button>
      </div>
    </div>
  </div>
</div>
.prismea-auth-layout.-absolute
  .prismea-auth-layout--box
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-20--slot.-center
        i.prismea-icon.prismea-glyph-100-logo
      .prismea-vertical-spacing-20--slot
        .prismea-field
          .prismea-field--slot
            label.prismea-label Username
          .prismea-field--slot
            input.prismea-input-text(type='text', placeholder='Mighty text')
        br
        .prismea-field
          .prismea-field--slot
            label.prismea-label Password
          .prismea-field--slot
            input.prismea-input-text(type='password', placeholder='Mighty text')
        br
        button.prismea-button.-block.
          Login