Dev Guide Page

• Shared Things
• Layouts, Code Snippets (Company level)
• Section Numbers
• Assets
• Themes in Site Admin
• Updating SASS and JS
• Style Management
• Documentation
• Version Table
• Instance Notes

The instances follow the same structural layout, so be aware that the following company level items may be shared:

• Layouts (Themes, Pages, Sections, Modules/Forms)
• Code Snippets
• Section Numbers
• Section Guide Documentation
• Dev Guide Documentation
• Global SASS
• Global JS
• Assets (placeholders, section thumbnails, etc.)

Note: Instances may also have unique company level things, not everything will be shared.

• Version Naming:
  • Layouts and Code Snippets will include a prefix with the site version/instance. This indicates which instance the component can be assigned to.
  • If the prefix is “v1 – “ the component can be assigned to any instance.
  • If the prefix includes an instance name (example “v1-APAC"), use the component only in that instance. If later on, the layout needs to be used on more than one instance, rename the layout using "v1 - " as the prefix.
  • Any new company level components that are created should follow these guidelines.
  • See the table for the version prefix for each instance.
  • Version prefixes apply to Theme Layouts, Page Layouts, Section Layouts, Module/Form Layouts, and Code Snippets.
• Code Snippets:
  • Make sure any Code Snippet that can be used on your instance is showing in custom html modules in your instance.
  • You will need to assign Code Snippets to your instance using the "Site List" dropdown found in the Code Snippet page. Note any existing shared "v1" snippets will need to be updated to include your instance.
• Section Layouts: You must follow these guidelines:
  • Create a Section Layout for each Section Number. If the section has variants, you may use the same layout for all of the sections.
  • The Section Guide documentation should be included in the Section Layout code. This way, the same section documentation will be visible on all instances and only need to be updated in one place.

  • Syntax for Section Layout names:

    "Version Prefix - Section # - Short Descriptive Title"

    (example: "v1 - Section 60 - Multi Item CTAs")

• Section Numbers will be assigned at the company level and available to be shared across all v1 sites.
• To find the next unused Section Number, look at the Section Layout Page in the admin, filter by "v1" and sort alphabetically. Assuming the naming syntax above has been followed, you should be able to see all of the section numbers that are currently in use.
• Some instances may have unique section designs (section numbers) that are only for that site. Once a number has been used for a section design, it should not be used again. This is why it is important to know all of the Section Numbers that have been assigned for v1 sites at the company level.
• Follow the Section Layout guidelines above.

• For consistency, follow the same asset folder structure for all instances.
• The site root folder name should clearly communicate what instance it is for. Note the APAC site folder does not follow this rule and has a generic name. This is because it was the first site built.
• Make sure any asset that is used in a cms editable module is located within its sites folder. Each instance will have different client teams editing the site, so they will not know to look in other instance folders for assets.
• See the table for root folder names

Themes that should be included in every instance:

1. "Default Theme"
   • CMS Enabled
   • SASS and JS that is unique to your instance only. The SASS and JS files will be named and assigned automatically when you create the site.
2. "Primary CMS Theme"
   • CMS Enabled
   • Assign the same SASS and JS files that are assigned to the Default Theme.
3. "Global - SASS and JS Only"
   • Not CMS Enabled
   • Create a theme called "Global - SASS and JS Only" and assign the Global files to that theme. This theme is only used for the assignment of the Global files (no pages should be made here). The SASS file name is "Global Styles - GST v1_0", the JS file is "Global JS - GST v1_0".
   • The Global SASS and JS files contain all shared styles/js for the instances. Be careful updating these files as updates will be applied to every instance.
   • The SASS includes AAG brand colors by default.

The v1 theme layout already has the required Global SASS/JS files being pulled in using razor. You should be able to use the same theme layout for all instances and not need to make any updates. If you do require a new theme layout, follow the naming guidelines described above.

See the themes section above for all of the files you will need/what they will be used for.

• SASS:
  • First, in the "Global Styles - GST v1_0" file, copy the code within the comment blocks "Add to Every Sass File - Start" and ending with "Add to Every Sass File - End". Go to your unique to instance SASS file (assigned to Default and Primary CMS Themes), delete all default code and paste what you copied from the global file. Add any styles unique to your instance below this code block.
• JS:
  • First, go to your unique to instance JS file (assigned to Default and Primary CMS Themes), delete all default code. Add any JS that is unique to your instance here.

Note that even though the same Global SASS/JS files are shared among all instances, they will still need to be published for each instance.

• Style management dropdown items should only have global "brand" classes.
• All AAG instances should all have the same Style Management dropdown items.
• The APAC instance has different branding and will have different Style Management dropdown items.
• Within the "Layout Styling" tab at the company level, you will add each css file for your instance as an @import (even the global file). Put a comment above the files saying what instance they are for. As of August 2024 the there isnt a way to assign the css files to a specific instance. For that reason you may see styles in the wysiwyg that do not match the published site.

Documentation should stay current.

• CMS Guide Page:

  • CMS Guide pages should all include a module with the shared layout "v1 - CMS Guide Information - Shared" at the top. This has general notes that apply to all v1 sites. You will make a separate module and module layout for your site instance and place it underneath the shared one. Use the AAG Germany instance as a template (layout is "v1-AAG_Germany - CMS Guide Information") - make sure you update the content accordingly for your instance.
  • Individual section documentation should be added in the section layout. See guidelines above in the "Layouts" section.

• Dev Guide Page:

  • Dev Guide pages should all include a module with the shared layout "v1 - Dev Guide Information - Shared". Update this layout in the highlighted places.
  • Assign any sections that belong on this page at the bottom.