Development Guide

Notes

• Content should be 1200px wide, unless it is a full width module. The .section-module class takes care of this.
• The pages are responsive. Common breakpoints used are 900px for tablet and 767px for mobile. 600px is the most next common. This is a rule of thumb, feel free to add additional breakpoints as necessary.
• Responsive columns are built with a library called flexbox grid
• .custom-page-content should wrap the entire CMS page so that the styles scoped for these pages are applied.
  
• .section-module wraps all heros, modules, and banners.
  
• .full-width will make a section-module full width
  
• .module-title is used for the title of each module.
  
• .supporting-text is for standard text.
  
• .light-theme will turn text white. I usually put it on the .content or .text-wrapper.
  
• .primary-light-button will give you an outlined button that is white with
  
  Button example
• .module-link .dark-theme will give you a filled button with white text and a dark background.
  
  Button example
• The following is currently the basis for modules where there is text over the image. The image is displayed as a block. .text-wrapper is positioned absolutely on top of the image. I prefer to use percentages so that it stays consistent to specific points on the image.
  
  Usually the images swap at 900px and 767px for tablet and mobile, respectively.
  
  Frequently, the text on top of the image moves to below the image in responsive views. To achieve that, remove position: absolute from .text-wrapper.
  
  Additional styles to help are:
  .desktop-light-theme - text will be white in desktop, standard text color at 900px and below.
  .tablet-light-theme - text will be white 767px and up, standard text color at 767px and below.
  .desktop-primary-light-button - button that is the primary outlined button in white on desktop views, switches to black border and text color in responsive views.
  .tablet-primary-light-button - button that is the primary outlined button in white down to 767px, switches to black border and text color for mobile views.
  

                      <style>
                          .image-wrapper {position: relative}
                          .text-wrapper {position: absolute; top: 15%; left: 20%;}
                      </style>
                      <section class="section-module">
                          <div class="image-wrapper">
                              <a><img /></a>
                              <div class="text-wrapper">
                                  Copy content
                              </div>
                          </div>
                      </section>