Glossary

Jargon specific to Semantic UI

Most importantly, globals include site-wide theming variables that other components can inherit and modify.

For example, a group of buttons may use ui red buttons as a grouping with individual ui button children.

Collections are heterogeneous groups of components which are usually found together. They describe a list of "usual suspects" which appear in a certain context. They may include and extend other ui elements for use in certain contexts—for example form may extend dropdown or input—as well as include their own content.

A view is a convention for presenting specific types of content that is usually consistent across a website. These include things like comments, activity feeds, or cards.

Modules are components that include both a definition of how they appear and how they behave. These include components like, accordions, dropdowns, and popups.

Behaviors are standalone Javascript components that describe how page elements should act, but not how they should appear. Behaviors include things like form validation, state management, and API request routing.

A definition is a set of CSS and Javascript which describe a component's essential qualities.

Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.

ui is a special class name used to distinguish parts of components from components.

For example, a list will receive the class ui list because it has a corresponding definition, however a list item, will receive just the class item.

The ui class name helps encapsulate CSS rules by making sure all 'parts of a component' are defined in context to a 'whole' component.

It also helps make scanning unknown code simpler. If you see ui you know you are looking at a component.

A definition is a set of CSS and Javascript which describe a component's essential qualities.

Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.

Types are versions of an element that modify the element's standard appearance.

Types cannot be used simultaneously on the same element. For example, "cats" and "dogs" are types of animals, but are mutually exclusive.

Variations modify qualities of an element like size, or color.

Variations are mutually inclusive, and can be used together to modify an element.

Content are parts which only have meaning in the context of a component. Content use names which describe the type of expected content like header, description, menu, or item.

Content inside a collection or view often includes stubbed versions of other components. For example cards let you use image content, which can be extended by using ui image variations.

States are modifications to an element that help indicate a change in affordances. Common states include loading, disabled, and active.

Behaviors are actions that a component can perform. Behaviors are represented by simple phrases like "set value" or "increment", that can be invoked in Javascript. Behaviors are automatically converted from spaced lowercase phrases to internal Javascript methods at invocation.

In Semantic UI, components are given the class name ui to help distinguish them from parts of elements in code, and to provide a namespace for definitions which can limit the scope of CSS rules.