Web Development Guidelines for Cascade CMS

Web Development Guidelines for Cascade CMS

We’ve found that HTML coded designs that follow the recommendations below usually result in a speedier turn around and consistently provide a cleaner, more efficient implementation which normally allows for the flexibility of additional options and/or customizations.

1. Use HTML framework, something like the latest stable version of Bootstrap but any well documented framework should work. This will allow us to easily make any necessary changes/fixes if needed during implementation and/or User Acceptance Testing (UAT).

2. Do NOT use IDs for CSS styling of content components. IDs should be unique on the page and will be dynamically created depending on the content.  IDs on headers, footers, and navigations should be fine.

3. If possible, classes on the body element should only be used if it’s not going to change and/or if used for different templates.

4. Most content sections are reused on most pages, they should be consistent in the following:

• Elements
  • Use sections or divs, but not both
• Padding/Margin 
  • The order of content sections will change and hardcoded padding/margin based on section order will break the design
• Headings
  • All headings should be styled by class and not by the heading itself, this will allow users to pick different headings as needed (depending on the order of the section) without breaking the design
• Inline customizable CSS/JS 
  • If an image (banner/header, etc.) is a background image, the CSS (for the image only) should be inline on the element and not part of the overall CSS
  • If a background color or text color is customizable, that should be a specific class placed on the parent div so we can easily make it configurable 
  • If a JS script uses entered content or any kind of customizable user configuration, the script should be inline on the page and separate from the overall JS

5. WYSIWYG content area styling should be kept to a minimum.  If wrapped in an element, it should be a div or a section element.  If classes are needed within the content area, single classes should be used.  If possible, to style links, bullets, buttons, etc. inside of a content area, target the parent container.  For example: ".class p" instead of "p.class".  If possible, please refrain from using attributes in tags.

6. Consistency throughout in general. For example, two sections look totally different but basically contain the same content: heading, content, links, etc.  Each element has its own class: “.heading”, “.content”, “.link”.  They should be styled using the parent container. Example: “.section1 .heading”, “.section2 .heading”, etc. and NOT “.section1-heading”, “.section2-heading”.  This allows us to reuse a majority of our code which helps with speed and efficiency. 

7. Make the HTML XHTML compliant according to these standards: https://www.w3schools.com/html/html_xhtml.asp

8. If the design calls for a repeatable element (i.e. cards, featured items, etc.) we will need to know the minimum and maximum allowed for that element. If the HTML differs for each count we will need HTML examples for each count.  No maximum is an acceptable max.

9. If you are planning on customizing the designs of our example sites, we recommend that you try to customize using CSS only, if possible.