Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Glyph

Purpose: Glyphs map a generally known concept or symbol to a specific concept in ILIAS. Glyphs don’t come with a text label: They are used when space is scarce.
Composition: A glyph is a typographical character. As any other typographical character, they can be manipulated by regular CSS. If hovered, they can change either their color or their background-color in order to indicate possible interactions.
Effect: Glyphs act as a trigger for some action (such as opening a certain Overlay type) or as a shortcut.

Background: "In typography, a glyph is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts." (https://en.wikipedia.org/wiki/Glyph) Lidwell states that such symbols are used "to improve the recognition and recall of signs and controls".

Icon: Standalone Icons are not interactive. Icons can be in an interactive container however. Icons merely serve as an additional hint of the functionality described by a title. Glyphs are visually distinguished from object Icons: they are monochrome.

Usage

Glyphs MUST NOT be used in content titles.
Glyphs MUST be used for cross-sectional functionality such as mail for example and NOT for representing objects.
Glyphs SHOULD be used for very simple tasks that are repeated at many places throughout the system.
Services such as mail MAY be represented either by a Glyph OR by an Icon plus text label, depending on the usage scenario.

Style

All Glyphs SHOULD be taken from the Bootstrap Glyphicon Halflings set. Exceptions are possible, but MUST be approved by the JF.

Accessibility

The functionality triggered by the Glyph MUST be indicated to screen readers with the attributes aria-label or aria-labelledby. If the Glyph has a purely decorative purpose, the aria-label MUST be set to "" or be completely omitted.

Parents

Descendants