Nucleus HubSpot theme

Inspiration

Nucleus - noun: the central and most important part of an object, movement, or group, forming the basis for its activity and growth.

The reason we decided to build Nucleus was to have something in-house that would allow non-developers to build bespoke client websites, quickly and intuitively. We noticed a lot of overlap in feature requests from our clients, so this theme represents the sum of the most common use cases, allowing us to save time and write less code. As a HubSpot partner agency it's important for us to be involved in as many facets of the HubSpot ecosystem as possible, so we also built this theme to have a presence in the marketplace to showcase our expertise.

What it does

Nucleus is Articulate Marketing's versatile HubSpot CMS theme that lets us or a client build high-performance, high-converting websites in days, not months. Used as the foundation of our own site and dozens of client sites, including the HubSpot Impact Award-winning HTG website, Nucleus is everything we know about website design distilled into a single, flexible theme.

• Site wide branding
• Built for speed
• Developer-free customisation
• Modern design
• Mobile-friendly responsive layout
• Cross-browser support

Challenges we ran into

There were two main challenges. The first was deciding on the complexity and granularity of the customisation fields. We had to ensure a balance of flexibility within the boundaries of modern web design and best practices. The idea is that the theme won't get in the way of your brand but it should be difficult to make a mess.

The other challenge was finding a way to build the theme efficiently, in a local environment.

How we built it

The theme was developed locally using a custom in-house workflow. We used webpack, configured with babel, postcss, scss, browsersync and the HubSpot webpack uploader plugin. This allowed us to write modern, maintainable code, which compiles into valid HubL code, including HubL functions/variables inside of scss. When a change is made, the files upload to the portal automatically, the browser refreshes, so we can focus on writing code and checking progress in real time.

What's next for the Nucleus theme

We are looking forward to clients and others using the theme to build beautiful, customised HubSpot websites that will help their business grow.

Built With

• babel
• html5
• hubl
• hubspot
• javascript
• json
• postcss
• scss
• webpack