Menu

Glossary
Jargon specific to Fomantic UI

Terminology

Types of Components

Fomantic UI classifies components into different definition types depending on its qualities. Each of these five types uses a unique definition format.

Globals Globals are styles that are applied across a site. These include things like CSS resets, and sitewide font, link and sizing defaults.

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

Element UI elements are page elements with a single function. They can exist alone or in a plural form with elements sharing qualities.

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

Collection

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.

Views

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

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

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.

Project Terminology

Fomantic UI classifies components into separate definition groupings.

Component A component is a general term used to refer to any user interface element packaged for distribution.
Definition

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

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.

Definition Terminology

When browsing Fomantic UI definitions, you will see content grouped into different sections. These parts of a definition are consistent across definitions, and are common patterns for describing components.

Component A component is a general term used to refer to any user interface element packaged for distribution.
Definition

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

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

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

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

Content

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

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

Behaviors

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.

General Terms

These terms are general programming terms that may be used without explanation in other documentation pages.

Namespace A name given to an element for the explicit purpose of containing the application of properties.

In Fomantic 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.

Gulp Gulp is a tool for automating command line tasks Gulpjs.com
NPM NPM is a package manager used for downloading Node JS packages.
yarn yarn is an alternative package manager used for downloading Node JS packages.
Node JS Node is a event driven programming language frequently used to run command line tools for front end development. nodejs.org

Dimmer Message
Dimmer sub-header