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.

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

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 optionally define how attributes can be shared across a group UI Button
Collections	Content A collection can define elements which might be found inside States A collection may define states for content elements or itself Variations A collection may define variations for content elements or itself UI Form
Views	Content A view may define elements which can exist inside of the view States A view may define states for content elements or itself Variations A view may define variations for a content elements or itself UI Item
Modules & Behaviors	Behavior A module will define a set of behaviors which can be used as an API 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 UI Dropdown

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.

Cancel

Continue

Button	Button
Label	label
Input
Loader
Segment	Segment

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.

Forms
Tables
Grids (Layout)
Menus

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:

Popups
Modals
Chat Rooms

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.

Comment Feed
Activity Feed
Product List

Next: Semantic Coding

Defining Definitions

Definition Types

Definition Sections

Types of Definitions

UI Elements

Examples of UI elements:

UI Collections

Examples of UI collections:

UI Modules

UI Views

Examples of UI views: