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

title  : 'Authoring UI'
type   : 'UI Specification'
---

<%- @partial('header') %>

<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>

Creating Components
=====================================

The first step after deciding what type of element you are creating is writing a spec file, these allow you to define the language for describing your interface element before beginning to write a component. The spec file can be used to generate a css and javascript stub which will give you a starting point for writing your component. Spec files content varies depending on which of the five UI types are being defined.

Here's an example spec file for a ui element button. You can read more about creating spec files <here>

  <whatever>

After creating a spec file you can use semantic to generate ui components. Simply specify a package name and json spec file.

  semantic generate awesome button.json

This will create a stub css (and possibly js) file in ui/element with your definition. This will also create a stub html file in docs/, this is the visual representation of your element definition, and will appear unformatted until you begin to create your css.

As you edit each css definition to create the look and feel of your element, you can refresh this page to verify each element appears properly. After you finish writing your UI component, if you would like to register your package to be used by others. No need to package anything up, simply type

semantic register awesome button

Assuming your package name is not taken, your buttons will now be available on semantic.




</div>