Four themes are included with the Glammer Pro Framework out the box, including:

• Breeze (light)

  

• Ember (muted, default)

  

• Asphalt (dark)

  

• Obsidian (darker)

  

As of this release, 4 additional Glammer Pro themes are in development, including:

• Amber (Dark, Yellow Highlights)
• Legendary (Light, Changeable Highlights)
• Naturalized (Multi-colour Palette)
• Saphire (Light, Blue Highlights)

Existing customers will be gifted these themes upon release without additional cost.

Writing new themes in Glammer Pro is a rather straightforward process. You only need to copy and modify the standard variables under a new class name. With this method, new themes can be constructed in minutes.

Example theme:

                .glam-breeze {
                  --glam-background-color: rgb(235, 235, 235);
                  --glam-color: rgb(35, 35, 35);
                  --glam-color-muted: rgb(85, 85, 85);
                  --glam-footer-bg-color: rgba(235, 235, 235, .8);
                  --glam-footer-border-color: rgba(35, 35, 35, .2);
                  --glam-footer-p-box-shadow: 0 5px 8px rgba(0, 0, 0, .1);
                  --glam-form-color: rgb(245, 245, 245);
                  --glam-links-color: rgb(35, 135, 135);
                  --glam-docs-color: rgb(35, 135, 135);
                }
              

Writing Extended Themes:

If you would like to further customize Glammer Pro, simply make a copy of glammerpro-complete.css, and apply any modifications you need. For maximum efficiency, you can remove any unmodified styles from your new theme.

Remember to link this new file after any other Glammer Pro CSS files to ensure that existing styles are overwritten with your own.

Almost every aspect of the Glammer Pro Framework is governed by variables in some manner. The full list of included variables is included below:

within glammer.css:

                /*colors*/
                --glam-links-color: rgb(135, 235, 235);
                --glam-docs-color: var(--glam-links-color);

                --glam-background-color: rgb(85, 85, 85);
                --glam-color: rgb(215, 215, 215);
                --glam-color-muted: rgb(205, 205, 205);

                --glam-footer-bg-color: rgba(85, 85, 85, .5);
                --glam-footer-border-color: rgba(235, 235, 235, .2);
                --glam-footer-p-box-shadow: 0 5px 8px rgba(0, 0, 0, .3);

                /* Typography */
                --glam-title-font-family: 'Comforter', cursive;
                --glam-heading-font-family: 'Bebas Neue', cursive;
                --glam-heading-font-size: 3ch;
                --glam-text-section-h3-font-size: 2.35ch;
                --glam-text-section-summary-font-size: clamp(1.15rem, calc(var(--glam-text-section-h3-font-size) * .835), calc(var(--glam-text-section-h3-font-size) * .935));
                --glam-heading-letter-spacing: .5ch;
                --glam-heading-line-height: 4ch;

                /* Forms */
                --glam-form-border-color: rgba(35, 35, 35, .5);
                --glam-form-focus-shadow: 0 0 8px rgba(135, 135, 135, 1);
                --glam-form-color: rgb(95, 95, 95);

                /* Labels */
                --glam-label-bottom: 0;
                --glam-label-top: 0;
                --glam-label-bg-bottom: calc(50% - 35px);
                --glam-label-bg-top:  calc(50% - 35px);

                /*Nav and title*/
                --glam-title-right: 85%;
                --glam-nav-left: calc(100% - var(--glam-title-right));
                --glam-nav-height: calc(100% - 50px);

                /*Portfolio Styles*/
                --glam-pf-button-width: 25%;
                --glam-figure-max-width: 100%;
                --glam-figure-aspect-ratio: 1/2;

                /* Transitions */
                --glam-transition-swift: all .15s ease-in-out;
                --glam-transition-quick: all .25s ease-in-out;
                --glam-transition-faster: all .35s ease-in-out;
                --glam-transition-fast: all .45s ease-in-out;
                --glam-transition-normal: all .5s ease-in-out;
                --glam-transition-snail: all 1s ease-in-out;
              

• .glam-title

  .glam-title is used to style the header element that sits on the top left of the document. It uses the the 'Comforter' font by default, but you can restyle it by changing the variable '--glam-title-font-family'. Anchor elements (links) included within .glam-title are styled distinctly to denote their functionality.

• .glam-nav

  .glam-nav is the main location for navigational content. It is the same height as .glam-title, but its width is set to take up the remainder of the screen whenever .glam-title is present.

• .glam-footer

  .glam-footer is generally used for small blocks of text, such as copyright information. By default, images placed in this area will need to be styled manually. By default, .glam-footer contains two <p> elements, which are visible on a desktop form-factor. On mobile devices, the second <p> element is hidden.

• .glam-main

  .glam-main is applied to the <main> element, providing a container for page content. Its styling is not visible.

• .glam-text-section

  One of the most important classes in the glammer framework, .glam-text-section not only handles typography for large sections of text, but also governs the behaviour of many other elements and classes. If you've got large sections of text to layout on a single page you can add .glam-text-section to your <section>* elements, and your headings (down to level 4), paragraphs, lists, and images will be taken care of automatically.
  
  * .glam-text-section can be applied to any element, but sections are recommended for their semantic value.

• .glam-nav-shadow

  In order to give the nav bar a shadow (under supported themes), you can include a div or similar element with the class: .glam-nav-shadow. This class is totally optional, but recommended for darker themes.

• .glam-notable

  .glam-notable provides a simple label class for inline content, such as this.

• .glam-nav-iconset

  Use .glam-nav-iconset to display groups of icons within a toolbar/navbar.

  screenshot

  • 

  NOTE: .glam-nav-iconset does not style text and is only expected to hold images. Images may be wrapped in a container, such as an anchor element or button, but you will be responsible for styling these yourself.

• .glam-detail-list

  Use .glam-detail-list provides a simple accordion, using the standard HTML <details> element.

• .glam-text-list

  Use .glam-text-list to add basic styling and spacing to your list items.

• .glam-icon-list & .glam-icon-list-alt

  Use .glam-icon-list or .glam-icon-list-alt to display groups of images in a grid, with optional labels.

  screenshots:

  • 

  • 

• .glam-icon-list & .glam-icon-list-alt

  Use .glam-icon-list or .glam-icon-list-alt to display groups of images in a grid, with optional labels.

  screenshots:

  • 

  • 

• Standard layout

• .glam-pf-square

• .glam-portfolio-button, .glam-figure

  .glam-portfolio-button is the container for portfolio images and their descriptions. Within this is a <figure> element with the class .glam-figure. Images and figure captions included in this arrangement are styled and animated accordingly.

  screenshots:

  • 

  • 

• .glam-icon-list & .glam-icon-list-alt

  Use .glam-icon-list or .glam-icon-list-alt to display groups of images in a grid, with optional labels.

  screenshots:

  • 

  •