<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>
@ -137,14 +250,6 @@ type : 'UI Introduction'
<li>Product List</li>
</ul>
<h2 class="ui dividing header">Authoring UI</h2>
<p><b>All UI</b>: The specification defines class name and html structures which can be used to represent an element
</p>
<p><b>Elements</b>: 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.</p>
<p><b>Collections</b>: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection.</p>
<p><b>Modules</b>: Module definitions include a list of behaviors that are commonly associated with an element</p>
<p><b>Views</b>: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user.</p>
<!-- <a class="ui large right labeled teal icon button">
Authoring Guide
@ -152,36 +257,6 @@ type : 'UI Introduction'
</a>
-->
<h3 class="ui header">Context sensitive</h3>
<p>In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.</p>
<p>For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.</p>
<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. 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>.</p>
<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/variation.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>
<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>
description : 'Variations are stackable, symbiotic changes to an elements appearance'
@ -47,7 +47,8 @@ type : 'UI Introduction'
<h3 class="ui header">Stacking Variations</h3>
<p>Another variation of a menu is an <b>inverted menu</b>. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name <code>red</code> as well. Because variations are not mutually exclusive we can use these together to create a compact, inverted, red tiered menu</p>
<p>Another variation of a menu is an <b>inverted menu</b>. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name <code>red</code> as well.</p>
<p>Variations are not mutually exclusive so we can use these together to create an <code>inverted red tiered menu</code></p>
<p>In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.</p>
<p>For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.</p>
jlukic
11 years ago