Habitat for Humanity

A website for Habitat for Humanity was developed utilizing the HubSpot CMS per decided design specifications and branding requirements.

Per the backend structure of the HubSpot CMS this project involved the development of themes and modules. The theme encapsulates the branding of the company and applies it uniformly to all technical assets from which the websites components, and thus styles by way of component usage, are derived.

Content marketers and editors can utilize these modules by creating new pages, either as derivatives of pre-existing pages or utilizing branded templates as a starting point, and dragging-and-dropping website components onto the page.

These website components are formed by the development of HubSpot modules. These modules permit the website developer to define typed fields the aforementioned editors may click upon and change to affect the web components design and functionality.

For instance a module might be comprised of an image field for changing a hero banner or may contain complex repeating fields for defining list of images, carousels, swipers, and other more complex elements.

The development of these modules consists of utilizing the defined theme assets, such as design system tokens for consistent branding, via writing template files in HubSpot's templating markup language known as HubL.

The aforementioned configurable fields are defined by providing configured JSON files specifying the configuration the developer wishes to expose to the end user. These fields may be utilized within the previous template in order to provide dynamic behavior.

For instance, one could add a boolean toggle to show or hide a module entirely. When checked, in the template the developer could simply check if this state is true and prevent rendering of the module in it's entirety.

Or, they could add a drop-down box for quickly selecting style variants such as various branded accent colors for some design component. Other cases follow similarly.

By developing scoped modules in adherence with the companies branding per the website theme content marketers and editors may modify and edit their site as expected from the utilization of a content management system - hence the name.

Beyond website development, email templates were developed similarly with similar configuration options.

These website assets were developed locally with an upstream version control system (GitHub) to stage and manage asset revisions. These revisions, in their production ready state, were integrated into the HubSpot design manager portal by way of standard development practices wherein they would become accessible to end users for usage and in effect "live".