The Gloss Project¶
Gloss is a new web design process, primarily aimed at creating happy design teams.
We’re working to ensure that Gloss allows you to stay focused on visual and interaction design. To this end we will introduce features that help this goal and remove features antagonistic to this goal.
If you’re interested in building complex (and not so complex) content driven sites in less time, Gloss may be a good fit. If you have an opinionated team that think they’ve figured it all out and everything is working for you already, then there’s nothing to see here, just move on.
Show me the Docs¶
If you want to dive straight into the documentation follow the link below:
Documentation¶
Gloss is a new web design process, primarily aimed at creating happy design teams. If you’re interested in building content driven sites in less time, Gloss may be a good fit. If you have an opinionated team that think they’ve figured it all out then there’s nothing to see here, just move on.
Contents:
Tutorial¶
Place holder for the tutorial
Examples¶
This section will how examples, all examples will be based on a before a single site The format is code snippets with before and after screenshots
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-column | right column based layout, achieved by combining these two classes in a two column grid |
| gl-two-column-layout gl-left-column | 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 |
Download¶
The latest release is 0.5.6. Download the latest version from here: https://github.com/GlossProject/gloss.theme/releases/download/0.5.6/gloss.theme-0.5.6.zip (currently only Plone compatible)
To see other releases visit: https://github.com/GlossProject/gloss.theme/releases
Gloss in a Nutshell¶
Gloss relies on a technique called “Content Assignment”, this makes it possible for a designer to assign headers, footers, menus and other components to elements of a template, simply by assigning special classes to elements of their template.
The Process¶
The general day to day workflow roughly looks like this:
1. Layout and Content Assignment¶
Start with an html layout, we’ll assume that you spent time on each pixel and css rule to handcraft the most beautiful, preferably responsive, layout. Or you use a tool that produces well structured html code (preferably responsive).
To your code you add the special Gloss class (we call them gl classes).
2. Publish¶
Then you publish or upload your changes.
As much as possible, Gloss does the rest for you.