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-first-column | Assigns the first column to an element in your theme |
| gl-second-column | Assigns the second column to an element in your theme |
| 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 |