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

title  : 'Using UI'
type   : 'UI Specification'
---
<div class="segment">
  <div class="container">
    <h1 class="ui header">Writing a Component</h1>
  </div>
</div>
<div class="main container">


<h2 class="ui header">Creating an Element</h2>

<p>Semantic defines five categories of elements, each type of element has different definition requirements</p>

<ul class="ui list">
  <li><b>Element</b> - a basic building block of a website, exists alone or in homogenous groups</li>
  <li><b>Colleciton</b> - a group of several elements which are usually found together</li>
  <li><b>Module</b> - an element where its behavior is included as part of its definition</li>
  <li><b>Behavior</b> - a definition of behavior that exists without any physical description</li>
  <li><b>View</b> - a way to present specific website content</li>
</ul>

The first step when using semantic is to initialize a directory as using semantic 
<div class="code" data-type="html">
  semantic init
</div>
This will create a directory, by default, 'ui' which will hold all your element definitions.

After initializing semantic, you may install other registered components. Each semantic component uses a css classname as a namespace. This namespace is also the name of the package on semantic. To search for a button for example, you could use the following command.

  semantic find button

Multiple packages will appear showing possible buttons available to download. 

  There are four button packages:

  1) Fancy: A set of rounded buttons (3 types, 22 variations)
  2) Loadr: A set of buttons with expandable loaders (1 type, 10 variations)
  3) Bootstrap: Classic bootstrap buttons (2 types, 10 variations)
  4) Semantic: Semantic UI buttons (4 types, 20 variations)

Each package that uses the button namespace also contains a name. Use this to specify what type of element you want to install.

  semantic install semantic button

This will install semantic's core button library. Inside your ui directory, this will also generate a new file inside ui/docs, which will include an overview of the element.

To use a button on your page, simple link to the css and js of an element


  
</div>