Scaffolding

Many web frameworks provide scaffolding as a quick way to generate the major pieces of an application. These usually include an index page and form for creating or updating resources. Just as you would probably want to customize generated code, this template provides a basic interface you'll want to customize for usability.

NBA Players

Name Nickname
Charles Barkley The Round Mound of Rebound
Kobe Bryant Kobe Wan Kenobi
Tim Duncan Old Man Riverwalk
Shaquille O'Neal Shaq Fu
Yao Ming The Great Wall of Yao
New player
<h2 class='space-bottom1'>NBA Players</h2>
<table class='breathe'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Nickname</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Charles Barkley</td>
      <td>The Round Mound of Rebound</td>
      <td class='text-right'>
        <a href='#fakelink' class='pad1'><i class='icon icon-pencil'></i></a>
        <a href='#fakelink' class='pad1'><i class='icon icon-trash'></i></a>
      </td>                  
    </tr>
    <tr>
      <td>Kobe Bryant</td>
      <td>Kobe Wan Kenobi</td>
      <td class='text-right'>
        <a href='#fakelink' class='pad1'><i class='icon icon-pencil'></i></a>
        <a href='#fakelink' class='pad1'><i class='icon icon-trash'></i></a>
      </td>                  
    </tr>
    <tr>
      <td>Tim Duncan</td>
      <td>Old Man Riverwalk</td>
      <td class='text-right'>
        <a href='#fakelink' class='pad1'><i class='icon icon-pencil'></i></a>
        <a href='#fakelink' class='pad1'><i class='icon icon-trash'></i></a>
      </td>                  
    </tr>
    <tr>
      <td>Shaquille O'Neal</td>
      <td>Shaq Fu</td>
      <td class='text-right'>
        <a href='#fakelink' class='pad1'><i class='icon icon-pencil'></i></a>
        <a href='#fakelink' class='pad1'><i class='icon icon-trash'></i></a>
      </td>                  
    </tr>
    <tr>
      <td>Yao Ming</td>
      <td>The Great Wall of Yao</td>
      <td class='text-right'>
        <a href='#fakelink' class='pad1'><i class='icon icon-pencil'></i></a>
        <a href='#fakelink' class='pad1'><i class='icon icon-trash'></i></a>
      </td>                  
    </tr>
  </tbody>
</table>

Create and update

A form scaffold for creating or updating resources.

New player

Create player Cancel
<h2 class='space-bottom1'>New player</h2>
<form>
  <fieldset>
    <label for='name'>Name</label>
    <input id='name' type='text' class='stretch'>
  </fieldset>
  <fieldset>
    <label for='email'>Nickname</label>
    <input id='email' type='text' class='stretch'>
  </fieldset>                      
  <a href='#fakelink' class='btn btn-primary'>Create player</a>
  <a href='#fakelink' class='btn btn-default'>Cancel</a>
</form>
Made with in Norcross by the UX Team.