Overview

An introduction to Semantic style coding

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. This means any element with the class name UI has a corresponding UI definition.

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 because they are part of a UI menu collection.

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.

All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.

For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.

Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.

First

Second

Third

Modules have simple behaviors for triggering common actions

$('.demo.menu .item') .tab('change tab', 'second') ;

Any internal behavior is accessible as well

$('.demo.menu .item') .tab('deactivate all') .tab('activate tab', 'third') .tab('activate navigation', 'third') ;

Modules can be re-initialized at any time with different settings

$('.demo.menu .item') .tab({ history : true, path : '/introduction/getting-started.html' }) ;

Next: UI Types

Interfacing Carefully

Changing an Element

Combining elements

Semantic APIs

Opening a new tab with a behavior

Opening a new tab with multiple behaviors

Turning on HTML5 State