Semantic UI
Types of Definitions
There are five types of component definitions in Semantic UI, each with their own unique qualities.
Term |
Definition |
Element |
UI elements are the smallest atomic unit for describing page content. They can exist alone or in groups with shared qualities. |
Collection |
Collections are heterogeneous group of several ui elements which are usually found together. They may describe ui elements which do not necessarily have to be present.
|
Views |
A view is a common design trope for presenting specific types of website content like comments, or user activity. These are common views like, comments, activity feeds, content cards, that are presented in a similar fashion across most websites.
|
Modules |
Modules are UI components that have behaviors as an essential part of their definition. These include things like, accordions, dropdowns, and popups, which require not only a description of how they appear, but also a set of instructions for how to implement their behaviors.
|
Behaviors |
Behaviors are instructions for UI behavior that are not attached to a particular physical form. They may describe things like, form validation, state management, or server request routing.
|
Definition Terminology
The following terms have particular meaning inside of Semantic UI, and are used to describe parts of a component's definition.
Term |
Definition |
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 define a component's essential qualities.
Definition may contain hard coded values that are essential, and variables which contain non-essential or arbitrary parts of a definition. This separation allows developers to adjust qualities of an element without having to know the contents of the css definition.
|
UI |
ui is a special class name added to html elements that correspond with ui definitions. This is used for containing css specificity, and distinguishing parts of an element from elements themselves.
|
Prototype |
The basic form of a component that includes only its universal qualities.
Modifications like types, states, or variations describe changes from this neutral form
|
Types |
Types are mutually exclusive versions of an element that are modifications of the element's standard appearance.
Types cannot be used simultaneously on the same element. For example, "cats" and "dogs" are types of animals, but a single animal cannot be both.
|
States |
States are modifications in an element that help indicate to a user a change in how an element behaves. This may include states like loading , disabled , or active .
|
Variations |
Variations are modifications of individual qualities of an element like size, or color.
Variations are not mutually exclusive, and can be used together to modify an element.
|
Layout |
A layout is a collection of unrelated UI components used together in a page to display a site's specific content.
|
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 Semantic UI, elements 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. |
Node JS |
Node is a event driven programming language frequently used to run command line tools for front end development. nodejs.org |