Guise Skeleton Components

A component in Guise Skeleton is a high-level, semantic UI widget such as a menu or a button. Each component provides minimal style necessary to meet the semantics of the component. Marking an element as a component, however, exposes custom properties specific to to that component for further styling based on semantics.

A simple example is a card. A card can be designated using the card CSS class. The background color of cards (with or without extra selection) may be changed by setting the --guise-skeleton-card-background-color custom property, rather than trying to select all elements that have been designated as cards.

Button
A control for initiating some action or navigating to a link when it is “pushed”.
Card
A small, panel like component for showing summary information. May contain headings and icons.
Hero
A landing page component taking up the entire page.
Image Thumbnail
An image of dynamically reduced size serving as a tiny preview.
Menu
A list of items for selection.
Navbar
A typically horizontal area for holding navigation items such as a menu.
Panel
A lightweight section of content or grouping of self-contained children such as components. Usually padding is added for separation.
Rotulus
A vertical roll of sections—perfect for a landing page.
Table
The standard HTML table component, rebooted and made more flexible.