Developer Guide

This documentation is based on the UK v2 instance, with selected sections sourced from the GPC US CMS Guide and the GPC APC CMS Guide . If you need to use additional sections, you can explore the guides directly through the provided links. The corresponding SCSS and JavaScript files for each section should be taken from their respective instances.

Table of contents

• Introduction
• Summary
• CMS Sections
• NON-CMS Sections

Introduction

Welcome to the developer guide. It is my hope that any new development can be completed with ease. Much thought was given to the creation and implementation of each section. There are global classes that can be added to change the the appearance of each section. Section 16 on the homepage is an example of this. Before adjusting or adding new styles to a section please try to see if there are already existing options/classes to accomplish a new request.

Adding new sections for this site is a little different for other GST sites. Please see Adding New Sections.

Happy Coding!

Summary

Company level components

• All company level components are prefixed with “v2” - do not use anything that isnt prefixed with “v2”. Any new code snippets should be prefixed with “v2”.

Naming Convention

• Follow the Section Naming Convention documentation.

Theme Branding

• All pages have a theme style attribute added to them. This attribute wil automatically change the color of a page if the appropriate criteria is met.
• There are only two criteria at the moment: Motion and NAPA. When a branding is applied, all sections - excluding the header and footer - will change their appearance slightly to match the branding colors.

Flex Span Grid (FSG)

• This site utilizes the Flex Span Grid (FSG) library. Section layouts contain FSG container class names. The column classes are then set within the sass according to the section number class. The sass method reduces the number of layouts and allows template modules to be used in a different column layouts.

Hero Banners

There are four different kinds of banners available:

1. Section 5: This banner has a linear gradient border animation that changes color based on the theme branding available.
2. Section 7: This banner has animating hexagons. The hexagons animate by randomizing the order in which they fade in and out. The final position is set based on the order the image modules are added to the section. This banner also has a linear gradient border animation that changes color based on the theme branding available. Any image uploaded for the right column will automatically be cropped to a hexagon shape.
3. Section 11: There is nothing unique about this section. It is an image an text
4. Default Content Page Banner: This is not a section but rather the normal optional product banner for each content page.

Typography

The typography for the site based from SCSS mixins and extends. There are many global classes that use these mixins and extends. This was done so that text for the site would be closely tied with the WYSIWYG. The goal was to give as consistent experience as possible.

CMS Sections

The CMS Guide Page includes all "Add New" CMS enabled sections and a few "Use Existing" sections.

Adding New Sections

If you add a new section, please make sure to also add it to the appropriate guide page. The section guide for each section is controlled by a property in the JavaScript object called sectionData. Both guide pages share this JavaScript object on the guide page layout.

When adding a new section make sure to add a new property to the object that shares the same name as it's respective section. For example, if I create a new section called "Hero - (Section 32b)" the I would add a property called section32b. After adding the new property to the object make sure to also add the section to the guide page.

The following properties are required when adding a new property to the sectionData object:

• keyword - Remember to use a list of keywords from the GST naming convention. For example "Hero - Section 32b" would simply be "Hero".
• name - This is the section name only - do not include keyword. For example "Hero - Section 32b" would simply be "Section 32b".
• type - Add New or Use Existing
• cmsEnabled - Yes or No

Optional properties:

• snippetsAvailable - Array of code snippets. Only include unique portion of the code snippet name. For example if I was adding a code snippet for Section 32b, in the admin it might be something like "v2 - Section 32b - Headline" but in the JS object it would only be "Headline". snippetsAvailable: ["Headline"]
• codeSnippetDetails - This is a string
• minimimImageSize - This is a string
• notes - This is a string

When you put it all together it should look something like this:

NON-CMS Sections

The following is a list of sections that can be added to the site by developers only.

• POPUP SECTION - Talent Community Form
• AJD Design 1 Section 1
• AJD Design 1 Section 2
• AJD Design 1 Section 3
• AJD Design 1 Section 4
• Header - (Section 1)
• Footer - (Section 2)
• Search Results - (Section 3)
• Job Details - (Section 4)