SemanSemantic-UItic-UI/node/src/documents/specification/styleguide.html

  ---
layout : 'default'
css    : 'guide'

title  : 'Style Guide'
type   : 'UI Specification'
---
<div class="segment">
  <div class="container">
    <h1 class="ui dividing header">Project Roadmap</h1>
  </div>
</div>
<div class="main container">
  
  <div class="ui icon info message">
    <i class="icon heart"></i>
    <div class="content">
      <div class="header">
        Progress Report
      </div>
      <p>Current status of work on Semantic UI</p>
    </div>
  </div>
  
  <div class="ui divider simple"></div>
  
  <div class="ui black top attached menu">
    <div class="item">
      <b>Redesign Timeline</b>
    </div>
    <div class="borderless item">
      <div class="ui red label">6.5 <div class="detail">days left</div></div>
    </div>
  </div>
  <div class="ui bottom attached segment">
  <div class="ui message">
    <div class="header">UI Elements</div>
    <p>This is an estimate of total time left to compete reskin and docs for the following elements</p>
  </div>
  <table class="ui sortable table">
    <thead>
      <th>UI Element</th>
      <th>Estimated</th>
      <th>Spent</th>
      <th>Status</th>
      <th>Notes</th>
    </thead>
    <tbody>
      <tr>
        <td>Button</td>
        <td>1</td>
        <td>1</td>
        <td class="positive">Complete</td>
        <td></td>
      </tr>
      <tr>
        <td>Text Block</td>
        <td>0.5</td>
        <td>0.5</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Header</td>
        <td>0.5</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Grid</td>
        <td>1</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Divider</td>
        <td>0.25</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Tags</td>
        <td>0.25</td>
        <td>0.25</td>
        <td class="positive">Complete</td>
        <td></td>
      </tr>
      <tr>
        <td>Labels</td>
        <td>0.5</td>
        <td>0</td>
        <td class="positive">Complete</td>
        <td>
          Changes:<br>
          - Consolidated into tags 
        </td>
      </tr>
      <tr>
        <td>Icons</td>
        <td>1</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Menu</td>
        <td>3</td>
        <td>1</td>
        <td class="positive">Complete</td>
        <td></td>
      </tr>
      <tr>
        <td>Throbber</td>
        <td>1</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Video</td>
        <td>0.5</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Steps</td>
        <td>0.5</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Segment</td>
        <td>0.5</td>
        <td>0.25</td>
        <td class="warning">In Progress</td>
        <td></td>
      </tr>
      <tr>
        <td>Table</td>
        <td>0.5</td>
        <td>1</td>
        <td class="negative">Complete</td>
        <td></td>
      </tr>
      <tfoot>
        <th>14 Elements</th>
        <th>10.5 days</th>
        <th>4 days</th>
        <th></th>
        <th></th>
      </tfoot>
    </tbody>
  </table>
  <div class="ui divider"></div>
  <div class="ui message">
    <div class="header">UI Collections</div>
  </div>
  <table class="ui sortable table">
    <thead>
      <th>Name</th>
      <th>Estimated</th>
      <th>Spent</th>
      <th>Status</th>
      <th>Notes</th>
    </thead>
    <tbody>
      <tr>
        <td>Activity Feed</td>
        <td>1</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Forms</td>
        <td>2 days</td>
        <td>1</td>
        <td class="positive">Complete</td>
        <td></td>
      </tr>
      <tr>
        <td>List View</td>
        <td>0.75</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Item View</td>
        <td>1</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>User List View</td>
        <td>0.5</td>
        <td>0</td>
        <td></td>
        <td></td>
      </tr>
      <tfoot>
        <th>5 Elements</th>
        <th>5.25 days</th>
        <th>1 days</th>
        <th></th>
        <th></th>
      </tfoot>
    </tbody>
  </table>
  </div>
  
  
</div>