COS Documentation

Search HubSpot Designers Site

Quick Reference Guide of Common Things to Remember

DOs

  • Target elements using nested selectors within the relevant containers (.header-container, .body-container, & .footer-container). For example, “.header-container .widget-type-logo img” would target any logo tags but only in the header-container
  • Use the built in module classes for targeting all modules of a similar type. Every div containing a module gets a class with the module type. For example, a div containing a logo module gets a class “widget-type-logo.” These classes can be useful for targeting specific module types.
  • Add custom classes to the template to allow for more specific selections.
  • Use Developer Tools/Firebug to use the same selectors that our default .css files use. This is preferable to using !important tags.
  • Use the template builder when possible to build your templates. Template builder will provide for code free structural changes by the end user and give you a responsive website with no additional work.

DON’Ts

  • Don’t select/style the classes "span1-span12" in your CSS. HubSpot templates are made up of 12-column grid of divs with classes "span1-span12". These classes are responsible for making our templates responsive, and should not be targeted. Setting fixed or altering widths of this class will break the responsiveness of template.You can still style standard <span> tags in your code. 
  • Don't target the WYSIWYG specific wrappers if you can avoid it. Our markup includes additional wrappers such as .row-fluid-wrapper, which are used by our WYSIWYG Layout Editor, but in general shouldn’t be used for styling.
  • Avoid using Tables in your designs. By default, tables have fix widths and will generally break responsive layouts. Alternatively, try to recreate the table at the template level using modules.