Rubric is our most extensive theme yet when it comes to customization capability. We wanted to create a theme that users could use to build a website completely unique to them, so we pulled out all the stops with Rubric. This theme lets users alter every little styling detail in a module, add custom classes and CSS, customize sections beyond HubSpot's built-in capabilities, and even add custom search engine optimizations on a page-by-page basis.
So, exactly what is Rubric capable of, and how did we do it?
Diving into Rubric
Rubric is a highly customizable theme that gives users unprecedented control over their website's design and functionality. Built with flexibility and ease of use in mind, Rubric empowers businesses to create truly unique websites that perfectly align with their brand and meet their specific needs.
At its core, Rubric is designed with you in mind. Its modular design philosophy allows for extensive customization, all within a user-friendly interface. Whether you're a seasoned web developer or a business owner with limited technical experience, Rubric provides the tools you need to bring your vision to life.
Key features of Rubric include:
- Advanced customization options for every module
- Flexible layouts that adapt to various content needs
- Improved accessibility and responsive design
- Streamlined workflow for efficient site-building
- Enhanced SEO capabilities
These features work together to create a theme that's powerful, intuitive, and efficient. In the following sections, we'll explore each of these aspects, exploring how we've implemented them and the benefits they bring to our users.
By choosing Rubric, you're not just selecting a theme — you're embracing a new way of building websites that puts you in control of every detail. Let's explore how we've made this possible.
Flexible Layouts and Modularity
Our first problem to solve was the HubSpot Template Marketplace's module limitation. We wanted Rubric to have enough content options that any business could build a page tailored to its content needs, but 50 modules are quite limiting. Our solution: keep modules modular.
We moved away from creating a separate module for every type of style and layout and instead created modules based on content. For example, instead of a Social Follow and Social Share module, Rubric has a single Socials module that can display either by selecting an option from a Type field.
This becomes exceptionally robust with modules like the Navigation module, which allows users to add static, flyout, or hamburger menus, pulling data from a simple menu, HubSpot navigation, or the module itself. Furthermore, the hamburger and mega menu options allow users to add multiple types of content, including buttons, socials, search, images, and menu types.
Furthermore, several of our modules have a Layout group that includes options to show/hide certain elements, change the type or position of certain elements, responsive options for grids, and other layout-altering options.
With the multitude of options inside a module, you may be thinking that's a lot of code, and you would be correct. Still, creating an extensive library of reusable macros drastically reduces the code inside a single module. Where the Navigation module usually has thousands of lines of code, it's less than 500 in the module itself.
Macros were also a massive help with the following problem we wanted to solve with Rubric.
Comprehensive Styling Options
While users were generally happy with the options provided in all our previous themes, we did notice a desire for more editable styles in the support tickets we received. People wanted to add backgrounds, change the width of modules, adjust the spacing between elements, and modify sizes and spacing responsively. Adding this amount of customizability to every single module would be a huge undertaking, even with macros, and might be why many themes have such limited options.
However, HubSpot changed the game by introducing JavaScript Fields to local development, and our dream of providing users with the ultimate customization experience became a reality. JavaScript Fields allowed us to create reusable components, which we paired with our macros to include style groups per element in a module.
Adding responsive options also became far more manageable with the help of JavaScript Fields, allowing us to create a utility function that would repeat a set of fields.
Advanced Module Settings
A simpler but no less important feature we added in Rubric is an Advanced content group inside each module. This allows experienced users to add IDs, custom classes, and custom CSS to a module. With this, users would no longer need to go to the Design Manager or page settings to add simple CSS changes to a single module instance.
Sections Settings
While HubSpot's sections include options for alignment, spacing, and background out of the box, we wanted Rubric to give users even more power over them. Introducing the Section Settings module! Adding this module to a section gives users four options we felt were most pertinent: background overlays, two-tone backgrounds, overlapping sections, and customized columns.
By far, the Customize Columns option was the most exciting feature to add. Many times, users want to change the order of modules on smaller screens, add space between modules, or simply have a width different from the predetermined HubSpot grid.
One downside, though, is that because it isn't possible to directly change the wrapper code of HubSpot sections, this module uses JavaScript to add classes to the sections so that we can alter them for some of these options.
Around 2% of people have JavaScript disabled in their browser, which doesn't seem huge, but users would still want to ensure their sections look decent for those few people before adding any customizations with this module.
Page Settings
Other settings-type modules we wanted to include were for the page itself. In every Rubric website page template, we added a static Page Settings module with header, SEO, and indexing customization.
In our previous themes, users were stuck with whatever header was used on the template, which wasn't ideal for some users. Our Page Settings module in Rubric solves this by allowing users to switch between their site header and landing header on any template or remove the header altogether.
Adding custom social meta options was more complex. HubSpot does not provide any way to edit the standard_header_includes, which must be present in all templates and is the source of the dynamically added social meta.
Fortunately, social platforms don't care if there are multiple meta tags on a page, so we just have to make sure it picks our custom ones. For LinkedIn, this meant adding the Open Graph tags before HubSpot's meta, while for the rest, we had to add both Twitter and Open Graph after HubSpot's meta.
To use these settings outside of our module, in our base layout file, we utilized the export_to_template_context module property.
Blog Listing Settings
Another problem we wanted to solve with settings modules was how HubSpot doesn't provide an easy way to change the look and content of each blog listing page (main, simple, tag, and author) instead of all looking the same.
To solve this, we created separate dnd_areas for the main section of each page type and added a static Blog Listing Settings module with a dropdown to select which listing to edit.
The other areas of the template (Hero, Sidebar, Callout) could be removed if wished using the “Areas to include” multichoice field.
Blog Post Settings
The last settings-type modules we created are specifically for Blog Posts. Since blog posts are dynamically created pages, we first needed an alternative version of the Page Settings module. Secondly, since drag-and-drop in blog posts is limited to the post body, we wanted the user to have some template customization options both globally and locally. We added two static modules to the Blog Posts template: Blog Post Settings (Global) and Blog Post Settings (Local).
Easy System Page Editing
The last HubSpot pain point we wanted to address in Rubric is HubSpot's lack of a system page editor. Typically, it's impossible to edit a theme's system pages without cloning the templates to a child theme and editing those templates directly.
With Rubric, we've made it simple. By leveraging global partials, we've designed a System Page Globals template that makes creating a page for editing system page content a breeze.
Start Using Rubric Today
As you can see, Rubric isn't just another HubSpot theme – it's a game-changer in website customization and management. We've poured our expertise and passion into creating a theme that empowers you to build the website of your dreams. And the best part? It's incredibly easy to use, without compromising on flexibility. From its modular design to its advanced customization options, Rubric is designed to meet the diverse needs of businesses and web developers alike.
Ready to revolutionize your website-building experience? You can start using Rubric today! For those looking to build or enhance a single website, head to our theme listing to download Rubric and explore its powerful features. We've got you covered if you're an agency or a business managing multiple portals. Our Rubric Theme License provides a zip file of the theme that can be uploaded to any number of portals, giving you the flexibility to use Rubric across all your projects.
Don't let limited customization options constrain your website. With Rubric, the only limit is your imagination. Download Rubric today and start creating websites that truly stand out in the digital landscape. Your dream website is just a few clicks away!
You May Also Like
