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.

Guise Skeleton components are similar to existing semantic elements in HTML such as <button>.

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 --skelt-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 Avatar: An image for a user profile, reduced to a small, fixed size with a decorative crop.
Image Thumbnail: An image of dynamically reduced size serving as a tiny preview.
Image Pane: An image of dynamically reduced size serving as a smaller 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.
Page: A general component taking up the entire page. Useful as part of a Holy Grail layout.
Rotulus: A vertical roll of sections—perfect for a landing page.
Table: The standard HTML table component, rebooted and made more flexible.