<p>UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.</p>
@ -228,9 +225,9 @@ type : 'UI Introduction'
<li>Menus</li>
</ul>
<h2 class="ui dividing header">UI Modules</h2>
<h3 class="ui dividing header">UI Modules</h3>
<p>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".</p>
<p>UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.</p>
<p>Examples of UI modules:</p>
<ul class="ui list">
@ -239,9 +236,9 @@ type : 'UI Introduction'
<li>Chat Rooms</li>
</ul>
<h2 class="ui dividing header">UI Views</h2>
<h3 class="ui dividing header">UI Views</h3>
<p>UI Views are common ways to present content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view.</p>
<p>UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.</p>
<h3 class="ui header">Examples of UI views:</h3>
<ul class="ui list">
@ -250,22 +247,10 @@ type : 'UI Introduction'
<li>Product List</li>
</ul>
<!-- <a class="ui large right labeled teal icon button">
Authoring Guide
<i class="right arrow icon"></i>
</a>
-->
<div class="ui divider"></div>
<a class="ui large right labeled teal icon button" href="/introduction/types.html">
<p>Semantic uses the UI namespace to separate element definitions from the content that they define. This means that namespaces might conflict with other definitions if a variation or a type used matches the namespace of another ui definition.</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>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>
<h3 class="ui header">Namespacing</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>
<p>A <b>type</b> is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content.</p>
<p>A <b>type</b> is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content.</p>
<h3 class="ui header">Content</h3>
<p>An icon menu might expect you to include glyphs instead of text to be formatted correctly</p>
<p>For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly</p>
<h3class="ui header">Definitions and Language</h3>
<p>Natural language is <em>particularly good</em> at describing visual scenes, i.e. dogs, trees, flowers and hard at defining abstractions: behavior, emotions, etc. Where programming languages are <em>particularly good</em> at describing behavior, but can be more obtuse at describing layouts.</p>
<p>Natural language is <em>particularly good</em> at describing visual scenes, i.e. dogs, trees, flowers and hard at defining abstractions: behavior, emotions, etc. Where programming languages are <em>particularly good</em> at describing behavior, but can be more obtuse at describing layouts.</p>
<p>Semantic adopts concepts from natural languages like: plurals, adjectives, and tense so web developers can enjoy some of the more useful features of natural language. Semantic also aspires for developers to make decision based on common usage instead of deciding arbitrarily how to name things.</p>
@ -130,5 +130,5 @@ type : 'UI Specification'
Semantic components are self documenting, giving you the ability to download a component, and get working immediately. Each component contains a spec file, which describes what a component can do. This is used to generate documentation automatically that lives alongside your project, making sure you know exactly what exists in your CSS.</p>
jlukic
11 years ago