# Semantic Semantic is a set of specifications for sharing UI elements between developers. Semantic is also a UI library to make front end development simpler and easier to learn. ## Development Status Semantic is pre-release. Build tools are not yet available, and APIs may be updated regularly prior to 1.0, so be warned! Please [share any issues](https://github.com/jlukic/Semantic-UI/issues?state=open) you may have, we need your help to get all the kinks out. If you need to create a test case, you can [fork this jsfiddle](http://jsfiddle.net/jlukic/Vbr9d/1/) to get you started. ## The Library ### Getting Started The Semantic library describes many UI elements. In most instances it might be best to build a custom build with only the elements you need. *Build tools are not yet available but stay tuned!* ~~You can use our build tool to select only the components you want~~ To download the entire library git clone git@github.com:quirkyinc/semantic.git If you prefer to download the whole kit as a zip, it is so conveniently packaged. http://semantic-ui.com/build/semantic.zip ## The Specification The aim of the specification is to develop conventions around structuring and naming code for interface elements. By defining a vocabulary the development community can exchange javascript and css definitions of UI in a similar language, making new code easier to grok, and reducing the complexity of starting a new project, or changing a sites design. ## Types of UI UI components are split into four categories, ranging from smallest to largest in scope: * UI Elements * UI Collections * UI Modules * UI Views ### UI Elements UI Elements are interface elements which do not contain other elements inside themselves. This can be thought of as similar in definition as an "element" in chemistry. UI elements can have plural definitions when they are known to exist together frequently. In this case each button will be large because we understand it is a part of the large button group ``` html
Cancel
Continue
``` Examples of UI elements: * Buttons * Labels * Headers * Progress bars ### UI Collections UI Collections are groups of heteregeneous UI elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules. 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, collections are not typically useful to define in plural. Examples of UI collections: * Forms * Tables * Grids (Layout) * Menus ### UI Modules UI modules are elements where it's behavior is a fundamental part of its definition. UI Modules are dependent on the javascript which carry their definition. They also may be more complex, and have a variety of different functions. Further abusing the scientific analogy: These can be thought of as "organs". Examples of UI modules: * Popups * Modals * Chatrooms ### UI Views UI Views are common ways to structure types of content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view. Examples of UI views: * Comment Feed * Activity Feed * Product List ### How it is defined #### Scope of a definition **All UI**: The specification defines class name and html structures which can be used to represent an element **Elements**: An element definition gives states which an elements can occupy, common types of that element, and if necessary, defines how the element functions in groups. **Collections**: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection. **Modules**: Module definitions include a list of behaviors that are commonly associated with an element **Views**: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user. #### Based on class Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like ``