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

title       : 'Overview'
description : 'An introduction to Semantic style coding'
type        : 'UI Introduction'
---
<script src="/javascript/intro.js"></script>
<script>
$(document)
  .ready(function() {
    $('.demo.menu .item')
      .tab()
    ;
  })
;
</script>

<%- @partial('header') %>
<div class="main container">
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Interfacing</a>
      <a class="item">APIs</a>
    </div>
  </div>
  <h2 class="ui dividing header">Interfacing Carefully</h2>

  <p>UI definitions in Semantic are given the class name <code>ui</code>. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.

  <p>For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name <code>ui</code> because they are part of a UI menu collection.</p>

  <div class="code" data-type="html" data-title="A Simple Menu" data-preview="true">
    <div class="ui menu">
      <a class="item">Home</a>
      <a class="item">Inbox</a>
    </div>
  </div>

  <h3 class="ui header">Changing an Element</h3>

  <p>Class names in Semantic always use single english words. If a class name is an adjective it is either a <a href="/introduction/types.html">type</a> of element or <a href="/introduction/variations.html">variation</a> of an element. <b>CSS definitions always define adjectives in the context of a noun</b>. In this way class names cannot pollute the namespace.</p>

  <div class="code" data-type="html" data-title="A Compact Menu Variation" data-preview="true">
    <div class="ui compact menu">
      <a class="item">Home</a>
      <a class="item">Inbox</a>
    </div>
  </div>
  <div class="ui divider"></div>

  <h3 class="ui header">Combining elements</h3>
  <p>All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.</p>

  <p>For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.</p>

  <div class="code" data-type="html" data-title="Using a UI Label inside a UI Menu" data-preview="true">
    <div class="ui compact menu">
      <a class="item">Home</a>
      <a class="item">
        Inbox
        <div class="ui label">22</div>
      </a>
    </div>
  </div>

  <h2 class="ui dividing header">Semantic APIs</h2>

  <p>Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.</p>

    <div class="code" data-type="html" data-label="true" data-preview="true">
    <div class="ui pointing secondary demo menu">
      <a class="active red item" data-tab="first">First</a>
      <a class="blue item" data-tab="second">Second</a>
      <a class="green item" data-tab="third">Third</a>
    </div>
    <div class="ui active tab segment" data-tab="first">First</div>
    <div class="ui tab segment" data-tab="second">Second</div>
    <div class="ui tab segment" data-tab="third">Third</div>
    </div>
        <h3 class="ui header">Opening a new tab with a behavior</h3>
        <p>Modules have simple behaviors for triggering common actions</p>
        <div class="code" data-demo="true">
    $('.demo.menu .item')
      .tab('change tab', 'second')
    ;
        </div>

        <h3 class="ui header">Opening a new tab with multiple behaviors</h3>
        <p>Any internal behavior is accessible as well</p>
        <div class="code" data-demo="true">
    $('.demo.menu .item')
      .tab('deactivate all')
      .tab('activate tab', 'third')
      .tab('activate navigation', 'third')
    ;
        </div>
      <h3 class="ui header">Turning on HTML5 State</h3>
      <p>Modules can be re-initialized at any time with different settings</p>
        <div class="code" data-demo="true">
    $('.demo.menu .item')
      .tab({
        history : true,
        path    : '/introduction/getting-started.html'
      })
    ;
        </div>

  <div class="ui divider"></div>

  <a class="ui large right labeled teal icon button" href="/introduction/types.html">
    Next: UI Types
    <i class="right arrow icon"></i>
  </a>

</div>