SemanSemantic-UItic-UI/server/documents/introduction/definitions.html.eco

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

title       : 'Definitions'
description : 'Definitions provide a re-usable format for sharing an interface design'
type        : 'UI Introduction'
---
<script src="/javascript/intro.js"></script>

<%- @partial('header') %>
<div class="main container">
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Definitions</a>
      <a class="item">Elements</a>
      <a class="item">Types</a>
    </div>
  </div>

  <h2 class="ui dividing header">Defining Definitions</h2>

  <p>Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.</p>

  <h3 class="ui header">Definition Types</h3>
  <p>Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.</p>
  <table class="ui celled table segment">
    <tr>
      <td class="four wide"><b>UI Element</b></td>
      <td>A basic building block of a website, exists alone or in homogenous groups</td>
    </tr>
    <tr>
      <td><b>UI Collection</b></td>
      <td>A heterogeneous group of several elements which can usually be found together.</td>
    </tr>
    <tr>
      <td><b>UI View</b></td>
      <td>A way to present common website content like comments, activity feeds</td>
    </tr>
    <tr>
      <td><b>UI Module</b></td>
      <td>An element where its behavior is an essential part of its definition</td>
    </tr>
    <tr>
      <td><b>UI Behavior</b></td>
      <td>A set of free-standing actions not specfically tied to an element</td>
    </tr>
  </table>

  <h3 class="ui dividing header">Definition Sections</h2>
  <p>All UI components of a single type are defined similarly.</p>
  <table class="ui celled sortable definition table segment">
    <tr>
      <td class="three wide">All UI</td>
      <td>
        <div class="ui divided relaxed list">
          <div class="item">
            <div class="header">Types</div>
            <div class="description">Defines mutually exclusive types which each may have their own html</div>
          </div>
          <div class="item">
            <div class="header">States</div>
            <div class="description">Defines element states like disabled, hovered, pressed down</div>
          </div>
          <div class="item">
            <div class="header">Variations</div>
            <div class="description">Defines changes to an element which are not mutually exclusive and can be used together</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Elements</td>
      <td>
        <div class="ui divided relaxed list">
          <div class="item">
            <div class="header">Group</div>
            <div class="description">An element can define how attributes can be shared across a group</div>
          </div>
          <div class="item">
            <div class="header">
              View an example <a href="/elements/button.html">UI Button</a>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Collections</td>
      <td>
        <div class="ui divided relaxed list">
          <div class="item">
            <div class="header">Content</div>
            <div class="description">Content elements which can exist inside of the UI collection</div>
          </div>
          <div class="item">
            <div class="header">States</div>
            <div class="description">A collection may define states for content elements or itself</div>
          </div>
          <div class="item">
            <div class="header">Variations</div>
            <div class="description">A collection may define variations for content elements or itself</div>
          </div>
          <div class="item">
            <div class="header">
              View an example <a href="/collections/form.html">UI Form</a>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Views</td>
      <td>
        <div class="ui divided relaxed list">
          <div class="item">
            <div class="header">Content</div>
            <div class="description">Content elements which can exist inside of the UI view</div>
          </div>
          <div class="item">
            <div class="header">States</div>
            <div class="description">A view may define states for content elements or itself</div>
          </div>
          <div class="item">
            <div class="header">Variations</div>
            <div class="description">A view may define variations for a content elements or itself</div>
          </div>
          <div class="item">
            <div class="header">
              View an example <a href="/views/item.html">UI Item</a>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Modules & Behaviors</td>
      <td>
        <div class="ui divided relaxed list">
          <div class="item">
            <div class="header">Behavior</div>
            <div class="description">A set of behaviors which can be invoked programatically</div>
          </div>
          <div class="item">
            <div class="header">Settings</div>
            <div class="description">A settings object which can alter the default behavior when instantiating a module</div>
          </div>
          <div class="item">
            <div class="header">Examples</div>
            <div class="description">A list of examples to showcase the variations in behavior of a module</div>
          </div>
          <div class="item">
            <div class="header">
              View an example <a href="/modules/dropdown.html">UI Dropdown</a>
            </div>
          </div>
        </div>
      </td>
    </tr>
    </tr>
  </table>
  <h2 class="ui dividing header">Types of Definitions</h2>

  <h3 class="ui dividing header">UI Elements</h3>

  <p>UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an "element" in chemistry.</p>

  <p>UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.</p>

  <div class="code" data-type="html" data-label="true">
    <div class="large ui buttons">
      <div class="ui button">Cancel</div>
      <div class="ui button">Continue</div>
    </div>
  </div>

  <h3 class="ui header">Examples of UI elements:</h3>
  <table class="ui celled table">
    <tr>
      <td class="two wide"><b>Button</b></td>
      <td>
        <div class="ui labeled teal icon button"><i class="globe icon"></i>Button</div>
      </td>
    </tr>
    <tr>
      <td><b>Label</b></td>
      <td>
        <div class="ui label">label</div>
      </td>
    </tr>
    <tr>
      <td><b>Input</b></td>
      <td>
        <div class="ui icon input">
          <input value="input">
          <i class="search icon"></i>
        </div>
      </td>
    </tr>
    <tr>
      <td><b>Loader</b></td>
      <td>
        <div class="ui active inline loader"></div>
      </td>
    </tr>
    <tr>
      <td><b>Segment</b></td>
      <td>
        <div class="ui stacked segment">Segment</div>
      </td>
    </tr>
  </table>

  <h3 class="ui dividing header">UI Collections</h3>

  <p>UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.</p>

  <p>UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements definitions, collections are not typically useful to define in plural.</p>

  <h3 class="ui header">Examples of UI collections:</h3>
  <ul class="ui list">
    <li>Forms</li>
    <li>Tables</li>
    <li>Grids (Layout)</li>
    <li>Menus</li>
  </ul>

  <h3 class="ui dividing header">UI Modules</h3>

  <p>UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.</p>

  <p>Examples of UI modules:</p>
  <ul class="ui list">
    <li>Popups</li>
    <li>Modals</li>
    <li>Chat Rooms</li>
  </ul>

  <h3 class="ui dividing header">UI Views</h3>

  <p>UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.</p>

  <h3 class="ui header">Examples of UI views:</h3>
  <ul class="ui list">
    <li>Comment Feed</li>
    <li>Activity Feed</li>
    <li>Product List</li>
  </ul>

  <div class="ui section divider"></div>
  <a class="ui large right labeled teal icon button" href="/introduction/overview.html">
    Next: Semantic Coding
    <i class="right arrow icon"></i>
  </a>

</div>