Definitions provide a re-usable format for sharing an interface design

Defining Definitions

Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.

Definition Types

Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.

UI Element A basic building block of a website, exists alone or in homogenous groups
UI Collection A heterogeneous group of several elements which can usually be found together.
UI View A way to present common website content like comments, activity feeds
UI Module An element where its behavior is an essential part of its definition
UI Behavior A set of free-standing actions not specifically tied to an element

Definition Sections

All UI components of a single type are defined similarly.

All UI
Defines mutually exclusive types which each may have their own html
Defines element states like disabled, hovered, pressed down
Defines changes to an element which are not mutually exclusive and can be used together
An element can optionally define how attributes can be shared across a group
A collection can define elements which might be found inside
A collection may define states for content elements or itself
A collection may define variations for content elements or itself
A view may define elements which can exist inside of the view
A view may define states for content elements or itself
A view may define variations for a content elements or itself
Modules & Behaviors
A module will define a set of behaviors which can be used as an API
A settings object which can alter the default behavior when instantiating a module
A list of examples to showcase the variations in behavior of a module

Types of Definitions

UI Elements

UI Elements are page elements which are indivisible. 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 in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.


Examples of UI elements:


UI Collections

UI Collections are groups of heterogeneous page 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 definitions, collections are not typically useful to define in plural.

Examples of UI collections:

UI Modules

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.

Examples of UI modules:

UI Views

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.

Examples of UI views:

Next: Semantic Coding