_images/gloss-logo-medium.png

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.

_images/gloss-logo-medium.png

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:

_images/gloss-the-big-idea-small.png

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, well-formed, and preferably responsive, layout.

_images/gloss-site-before-gloss.png

To your html layout you then add special Gloss classes (specifically these are CSS classes prefixed with gl-).

_images/gloss-site-with-gloss-classes.png

2. Publish

Then you publish or upload your changes.

As much as possible, Gloss does the rest for you.

_images/gloss-logo-medium.png

Documentation

Gloss is a web design process, primarily aimed at increasing design team happiness. If you’re interested in building content driven sites in less time, Gloss may be a good fit.

Contents:

_images/gloss-logo.png

Installation

Zip Download

Download the latest gloss release from here: https://github.com/GlossProject/gloss.theme/releases Look for the latest gloss.theme zip file and download it.

Upload the zip file to your Gloss ready site and point at your Gloss ready html layout.

Buildout

Gloss can be installed on the Plone content management system by adding the gloss.theme package to your buildout.

_images/gloss-logo.png

Tutorial

This tutorial is a walk-through, from start to finish, of the Gloss web-design process. We will start with a ready made theme and a site prepopulated with content. To this we will step by step add our Gloss classes until our site has been fully transformed to look like the HTML layout.

Adding the Gloss core classes

Adding drop classes

Adding site structure classes

Making use of button and list classes

_images/gloss-logo.png

Howtos

This collection of howtos aims to provide examples of using Gloss classes to solve real problems.

Dynamic Content - Using Content Assignment

These examples showcase some of the most common tasks done with Gloss

Assigning a main content area

It is common to have a main area where your most important content goes. In this example we’ll assume that that area has the id “main”.

<div id="main"> <!-- this is where main content goes --> </div>

Use the gl-content class like this:

<div id="main" class="gl-content"> <!-- this is where main content goes --> </div>

Gloss will replace the content of ‘main’ with the content from your site:

<div id="main" class="gl-content">
content from my site
<!-- this is where main content goes -->
</div>
Adding the site edit-bar

The site edit-bar is usually available to site editors so that they can quickly edit an article or other kind of content in context. In this example we’ll assign an edit bar to the part of the site with the id “main”.

<div id="main"> <!-- this is where main content goes --> </div>

Use the gl-edit-bar class like this:

<div id="main" class="gl-edit-bar gl-content"> <!-- this is where main content goes --> </div>

Gloss will add the edit-bar to the beginning of the ‘main’ content for your site:

<div id="main" class="gl-content gl-edit-bar">
<edit-bar> <!-- the editbar ends up here --></edit-bar>
content from my site
<!-- this is where main content goes -->
</div>
Adding breadcrumbs

The breadcrumbs are used to help a visitor know where they are within a website. In this example we’ll use a standalone div with an id of ‘my-breadcrumbs’ and assign breadcrumbs to that div.

<div id="my-breadcrumbs"> <!-- this is where breadcrumbs will go --> </div>

Use the gl-breadcrumbs class like this:

<div id="my-breadcrumbs" class="gl-breadcrumbs"> <!-- this is where breadcrumbs will go --> </div>

Gloss will add the breadcrumbs to the beginning of the ‘main’ content for your site:

<div id="my-breadcrumbs" class="gl-breadcrumbs">
<breadcrumbs> <!-- the breadcrumbs end up here --></breadcrumbs>
content from my site
<!-- this is where breadcrumbs will go -->
</div>
Adding a user menu

The user menu provides quick access to a collection of personal and site configuration settings a visitor. In this example we’ll see how the user-menu can be quickly added to any div.

<div id="my-menu"> <!-- this is where our menu will go --> </div>

Use the gl-user-menu class like this:

<div id="my-menu" class="gl-user-menu"> <!-- this is where our menu will go --> </div>

Gloss will add the user-menu to the beginning of the div:

<div id="my-menu" class="gl-user-menu">
<user-menu> <!-- the breadcrumbs end up here --></user-menu>
<!-- this is where our menu will go -->
</div>

Layout Tweaks Part 1 - Gloss Drop Classes

Gloss provides drop classes which make it possible to remove parts of your layout as needed. We call this procedure layout dropping. Layout can be removed everywhere, without exception, using the gl-drop class or conditionally using classes like gl-front-drop and gl-inner-drop.

Dropping elements

The simplest example of layout dropping is removing something from everywhere on the site. In this example we’ll see how to use the gl-drop class to remove an unwanted element from our layout.

 <section> This is coolness
 <div id="annoying-item"> <!-- we want this to disappear --> </div>
</section>

Use the gl-drop class like this:

 <section> This is coolness
 <div id="annoying-item" class="gl-drop"> <!-- we want this to disappear --> </div>
</section>

Gloss will ensure that it doesn’t show up in our layout:

<section> This is coolness

</section>
Dropping from the front page only

Note

Gloss will only perform a front-drop on pages that are named front-page

To remove an element only from the front page we use the gl-front-drop class.

 <section> I am only meant to show up on inner pages
</section>

Use the gl-front-drop class like this:

 <section class="gl-front-drop"> I am only meant to show up on inner pages
</section>

Gloss will ensure that the element will be removed from the front page

Dropping from inner pages only

Note

Gloss will only perform an inner-drop on pages that are NOT named front-page

To remove an element from inner pages we use the gl-inner-drop class.

 <section> I am meant to be dropped from inner pages
</section>

Use the gl-inner-drop class like this:

 <section class="gl-inner-drop"> I am meant to be dropped from inner pages
</section>

Gloss will ensure that the element will be removed from all inner pages

Dropping based on user role

The examples below illustrate the gl-not-authenticated-drop and gl-not-manager-drop classes. They allow dropping based on absence of a role (in the case the authenticated and manager roles).

<aside class=”gl-not-authenticated-drop”>
This will not be visible to anonymous users

</aside> <aside class=”gl-not-manager-drop”>

I will only be shown to a manager

</aside>

Layout Tweaks Part 2 - Dynamic Column based layouts

Adding markup to your layout to support column based layouts

The underlying system dynamically supports two and three column layouts. Adding the following markup to your layout will allow Gloss to tap into your own customizations.

Note

The gl-left-sidebar and gl-right-sidebar modifiers were introduced in version 0.6x of Gloss.

The older gl-left-column and gl-right-column can still be used but should be considered deprecated.

Two Columns (with left sidebar)

Activating custom grids

The Gloss Project allows you to “magically” transform your site to support specific grid systems. Currently we support the webflow grid system. This is enabled by To going to the theming-controlpanel then selecting modify theme and in the rules.xml file, uncommenting the grid-webflow.xml reference.

Adding Custom CSS

If you need to add style related customizations make use of Gloss’s custom-css.xml file. Styles in custom-css.xml are given priority over styles provided by either the layout (theme) or the source content.

To use it, go to the theming-controlpanel and select modify theme. Then look for the custom-css.xml file.

_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-first-column Standalone assignment of the first column to an element in your theme (0.8.2 or above)
gl-second-column Standalone assignment of the second column to an element in your theme (0.8.2 or above)
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
_images/gloss-logo.png

Components

This section includes information about components that Gloss supports out of the box.

_images/gloss-logo.png

Download

The latest release is 0.6.0. Download the latest version from here: https://github.com/GlossProject/gloss.theme/releases/download/0.6.0/gloss.theme-0.6.0.zip (currently only Plone compatible)

To see other releases visit: https://github.com/GlossProject/gloss.theme/releases