_images/gloss-logo.png

Reference

Start here for an explanation of the available Gloss (gl-) classes.

Gloss classes

Core Classes

Adding these classes to your html elements will allow Gloss to dynamically transform your HTML

Class Description
<a> gl-logo Preserves the home logo link (only works if placed on a <a> tag)
<nav> gl-menu Marks the menu for dynamic replacement with the content site’s menu (must be placed on a <nav> tag)
gl-menu-link Adds style to individual menu items, very important if you want to control styles in your menu items.
gl-breadcrumbs Adds breadcrumbs to an element
gl-user-menu Adds a user menu dropdown to an element
gl-edit-bar Adds an edit bar
gl-content Assigns the site content
gl-content-body Assigns ONLY the body of the content
gl-content-byline Assigns ONLY the content byline
gl-content-description Assigns ONLY the content description
gl-content-title Assigns ONLY the content title
gl-footer Assigns the footer
gl-below-content Places additional content below the content (experimental)

Drop Classes

Use drop classes to remove unwanted elements

Class Description
gl-drop drop elements marked with this class
gl-front-drop drop elements marked with this class if they are on the front-page
gl-inner-drop drop elements marked with this class if they are on an inner page.
gl-not-authenticated-drop drop elements marked with this class if the visitor is not authenticated.
gl-not-manager-drop drop elements marked with this class if the visitor is not a manager/administrator in the context.

Column and Side Bar Layout Classes

Control dynamic site layout using the layout classes. It is for achieving layouts like:

Class Description
gl-one-column-layout assign a content area that will (only be visible when there are no columns.)
gl-two-column-layout gl-right-sidebar right column based layout, achieved by combining these two classes in a two column grid
gl-two-column-layout gl-left-sidebar left column based layout, achieved by combining these two classes in a two column grid
gl-three-column-layout a layout containing a left and right column
gl-first-column (gl-two-column-layout | gl-three-column) Used in multi column (two or three) layouts to assign which column is the first column
gl-second-column (gl-two-column-layout | gl-three-column) Used in multi column (two or three) layouts to assign which column is the second column

Button and List Classes

These classes make it possible to style system buttons

Class Description
gl-button a global that all buttons get (they also get a bootstrap 3 .btn)
gl-hot-button a hot button, style it how you like and it will get that style wherever hot buttons show up in your site. (also includes a bootstrap 3 .btn-danger)
gl-cool-button a cool button, style it how you like and it will get that style wherever cool buttons show up in your site. (also includes a bootstrap 3 .btn-primary)
gl-cooler-button a cooler button (also includes a bootstrap 3 .btn-info)
gl-default-button a default style applied to all other buttons (also includes a bootstrap 3 .btn-default)
gl-ul Used for styling unordered lists
gl-ol Used for styling ordered lists
gl-ul-li Used for styling unordered list items
gl-ol-li Used for styling ordered list items