Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
| Element | -a basic building block of a website, exists alone or in homogenous groups | +UI Element | +A basic building block of a website, exists alone or in homogenous groups |
| Collection | -a heterogeneous group of several elements which can usually be found together. often pairs with individual elements | +UI Collection | +A heterogeneous group of several elements which can usually be found together. |
| View | -a way to present common website content like comments, activity feeds | +UI View | +A way to present common website content like comments, activity feeds |
| Module | -an element that also includes behavior as part of its definition | +UI Module | +An element where its behavior is an essential part of its definition |
| Behavior | -a set of behaviors not specfically tied to a design | +UI Behavior | +A set of free-standing actions not specfically tied to an element | +
All UI components of a single type are defined similarly.
+| All UI | +
+
+
+
+
+ Types
+ Defines mutually exclusive types which each may have their own html
+
+
+ States
+ Defines element states like disabled, hovered, pressed down
+
+
+ Variations
+ Defines changes to an element which are not mutually exclusive and can be used together
+ |
+
| Elements | +
+
+
+
+
+ Group
+ An element can define how attributes can be shared across a group
+
+
+
+ View an example UI Button
+
+ |
+
| Collections | +
+
+
+
+
+ Content
+ Content elements which can exist inside of the UI collection
+
+
+ States
+ A collection may define states for content elements or itself
+
+
+ Variations
+ A collection may define variations for content elements or itself
+
+
+
+ View an example UI Form
+
+ |
+
| Views | +
+
+
+
+
+ Content
+ Content elements which can exist inside of the UI view
+
+
+ States
+ A view may define states for content elements or itself
+
+
+ Variations
+ A view may define variations for a content elements or itself
+
+
+
+ View an example UI Item
+
+ |
+
| Modules & Behaviors | +
+
+
+
+
+ Behavior
+ A set of behaviors which can be invoked programatically
+
+
+ Settings
+ A settings object which can alter the default behavior when instantiating a module
+
+
+ Examples
+ A list of examples to showcase the variations in behavior of a module
+
+
+
+ View an example UI Dropdown
+
+ |
+
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.
-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.
- -For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.
- -The same variation can also be useful in the context of a menu although the implementation may be different.
- -UI definitions in Semantic are given the class name ui. 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 ui.
Class names in semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.
+Class names in semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.