Boilerplate v2.2.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/10

Feature Enhancements

• 🚀 #343 Adding custom max sizes for images
• 🚀 #345 Swapping team member PNG image with a JPG image to reduce file size
• 🚀 #346 Adding max-widths on applicable images

Boilerplate v2.1.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/8

Feature Enhancements

• 🚀 #287 Enabled lazy loading on applicable default image modules in templates
• 🚀 #331 Adjusted template based code splitting technique
• 🚀 #338 Adjusted card section module to account for responsive sizing options on the image field
• 🚀 #339 Inlined label with search field in the header
• 🚀 #340 Added new template screenshots given recent updates that have slightly changed the appearance of some templates (e.g. adding label for search field header).

Bug Fixes

• 🐛 #332 Fixed responsiveness issue with the pre element

Boilerplate v2.0.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/7

New Features

• 🚀 #245 Updated blog templates to use the new template types of blog_post and blog_listing (documentation on these template types can be found here).
• 🚀 #291 Added drag and drop support to global content (documentation on using drag and drop and global content can be found here).

Feature Enhancements

• 🚀 #323 Added styles to system templates to make them more visually appealing.
• 🚀 #324 Added styles to account for alt text on a page.

Bug Fixes

• 🐛 #321 Changed JavaScript used on the subscription preferences template to use a for each loop to account for multiple different subscription preferences.
• 🐛 #327 Added conditionals to the button module to handle various href scenarios.

Documentation Updates

• 📘 Added an update to the upgrade guide on the Wiki

Upgrade Guide

To update your theme to use the new features in this release please follow the instructions below:

Drag and Drop in Global Partials

Drag and drop is now available within global partials. This can be added to your theme's global partials by adding dnd_area tags into your code similar to page templates. For more information on the drag and drop HubL syntax please check out our documentation here.

If you are creating a new theme or website, adding drag and drop areas to your global partials shouldn't result in a breaking change. If you would like to convert a global partial on an existing theme or website to use drag and drop this could result in a breaking change. To convert a global partial on an existing theme or website to use drag and drop without introducing a breaking change you can:

1. Add a boolean HubL tag to the global partial that you'd like to convert to drag and drop. Alternatively, you can create a new module with a boolean field instead of using a HubL tag.
2. Add a label of "Enable drag and drop" to the HubL tag or module.
3. Leverage export_to_template_context so that you are able to use the value for this tag or module in your global partial.
4. Create a conditional using the exported tag or module value. For example:

{% if enable_dnd %}
  {# DND area code #}
{% else %}
  {# Existing static HTML #}
{% endif %}

Please note that when editing the global partial in the editor, changing the value of the boolean HubL tag or module will not automatically refresh the editor. You'd have to update the value of that tag or module, save, and refresh.

Blog Template Types

There are two new template types for the blog including blog_listing and blog_post. Documentation for these template types can be found here. If you are using one template for both the blog listing and blog post, please continue to use the template type of blog. Otherwise, you can update your blog listing template to use the blog_listing template type and your blog post template to use the blog_post template type.

Boilerplate v1.6.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/6

Feature Enhancements

• 🚀 #238 Updated blog pagination to be better for assistive technology users
• 🚀 #264 Enabled the lazy loading feature on custom modules within boilerplate/for applicable images in the template.
• 🚀 #266 Reduced the use of vendor prefixes to only be set up for modern browsers + IE11 (previously we were using a lot of unneeded vendor prefixes)
• 🚀 #282 Fixed contrast issue on search field and added a label to the header search field
• 🚀 #285 Split out fallback CSS so it isn't included by default (saving on extra CSS that isn't needed in the main.css file)
• 🚀 #289 Used code splitting techniques for templates/modules so template specific code (e.g. blog.css) is only loaded on the blog templates
• 🚀 #300 Updated button text on pricing template to provide more context for users using a screen reader
• 🚀 #301 Removed npm/yarn specific package files so that developers could use what they prefer when getting started (we only have dev dependencies which are all optional to use on projects)
• 🚀 #316 Added JS and CSS to show disabled state on subscription preferences template

Bug Fixes

• 🐛 #270 Hid the header for the related posts if there were no related posts found
• 🐛 #275 Wrapped title tag in base.html in an if statement to account for a page that might not have a title tag
• 🐛 #276, #290 Refactored JS to fix console errors on landing page and blog templates
• 🐛 #281 Added fallback font for theme setting fonts
• 🐛 #288 Cleaned through CSS to remove any redundant/unneeded code
• 🐛 #310 Updated language switcher conditional to account for blog post that doesn't have translation but does have a translated blog listing page.

Documentation Updates

• 📘 #150 Added multi-language section to the Wiki
• 📘 #165 Added browser compatibility section to Wiki
• :blue_book #167 Added more comments throughout boilerplate to try and help make it easier to use
• 📘 #175 Removed readme files from boilerplate (outside of the main readme.md file) and moved documentation in those readme.md files to the Wiki where it can be updated independently of the code.
• 📘 Updates to the Wiki including updated Getting Started information, updated Performance/Accessibility sections, and updated Module/CSS/Theme Settings sections.

Contributors

Thank you very much to the awesome contributors that helped identify bugs/file issues for this release:

• @JacobLett

Boilerplate v1.5.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/5

Feature Enhancements

• 🚀 #231 Updated GitHub deploy process to use the new HubSpot CMS Deploy GitHub action
• 🚀 #243 Added label for footer text column
• 🚀 #246, #260 Added mobile breakpoint feature to the boilerplate
• 🚀 #248 Reduced min-height of default grid item
• 🚀 #249 Improved blog listing images to be more accessible and performant
• 🚀 #250 Checked through links in custom modules and templates to make sure they were protected against tabnabbing vulnerability by adding rel="noopener" if the link was set to open in a new tab
• 🚀 #252 Added a default QA test template
• 🚀 #255 Adjusted blog markup to be more DRY and ensure headings flowed in chronological order
• 🚀 #262 Added a nav skipper to make the page more friendly for users navigating by keyboard
• 🚀 #263 Added an example license file to the project
• 🚀 #268 Updated system templates to use modules vs. hard coded content
• 🚀 #269 Renamed master branch to main

Bug Fixes

• 🐛 #237 Fixed blog pagination to prevent links from populating if there was no previous/next page available
• 🐛 #254, #257 Adjusted conditional used around language switcher so that it worked properly for blog listing pages.
• 🐛 #265 Removed aria-role that was not being handled properly with the goal to make more accessibility improvements to the menu in the future as a whole

Documentation Updates

• 📘 #259 Added in comments in base.html about the default header and footer includes
• 📘 Updated getting started Wiki page to add steps for new GitHub action
• 📘 Added an accessibility page to the Wiki

Boilerplate v1.4.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/4

Feature Enhancements

• 🚀 #217 Added a new HubDB template that can be referenced if building out a page that leverages HubDB
• 🚀 #229 Made portal ID a GitHub secret
• 🚀 #230, #232 Updated dev dependencies

Bug Fixes

• 🐛 #223 Added lang specific classes to menu items to remove language translation query being added to URLs

Contributors

Thank you very much to the awesome contributors that helped with the updates in this release:

• @johnsfuller
• @mtndan

Boilerplate v1.3.1

Feature Enhancements

• 🚀 #215 Added _default-modules.css file to add basic styles for the default menu and simple menu module.

Boilerplate v1.3.0

Project board: https://github.com/HubSpot/cms-theme-boilerplate/projects/2

Feature Enhancements

• 🚀 #187, #205 Added word-break to entire site with the exception of a few particular languages where this isn't the expected behavior (prevents issues if someone adds a particularly large font size to a non-heading font in the page editor).
• 🚀 #191, #209 Fixed small container spacing/crowded content on the system templates.
• 🚀 #192, #193 Improved website grader score by making button text link more descriptive, adding alt text to all non-descriptive images that were missing it, and removing fallback Google font.
• 🚀 #197 Added template screenshots for blog and system templates
• 🚀 #201 Added rel="noopener" for external links that open in a new tab (https://web.dev/external-anchors-use-rel-noopener/)
• 🚀 #202 Resized and compressed default images used in the boilerplate theme

Bug Fixes

• 🐛 #188 Fixed responsiveness issue of blog related posts.
• 🐛 #189 Fixed drop down menu hover issue.
• 🐛 #190 Added link field to price card module button.
• 🐛 #194 Added HubL conditionals on the blog index and blog post templates to ensure the template worked properly with settings in blog settings.
• 🐛 #195 Fixed duplicate h1 tags on blog tag listing pages.
• 🐛 #198 Fixed button hover color issue (there was an issue with inheritance in theme settings)
• 🐛 #203 Removed duplicate ids on the menu section and social follow modules.
• 🐛 #204 Fixed the image dimensions (were previously skewed) on the cards on the contact page template.
• 🐛 #208 Removed a div that was a child of a ul for the purpose of a triangle at the top of the dropdown (replaced it with a pseudo element)

Documentation Updates

• 📘 #210 Added badges to readme to show boilerplate website's default performance
• 📘 Added some brief sections on performance and SEO that goes over some of the things we did to improve website grader scores and Google Lighthouse scores.

Boilerplate v1.2.4

Bug Fixes

• 🐛 #169, #185 Added fallback for menu items that were set to not have a link and fixed the menu module's JS so that it was properly keyboard accessible
• 🐛 #184 Fixed misplaced semicolon for the blog listing template's featured image.

Documentation Updates

• 📘 #98 Updated readme + Wiki getting started section to include version control
• 📘 #160, #162 Added community related files (updated readme file, added bug report template, added pull request template, added feature request template, updated contributing file, and added a Wiki documentation)

Contributors

Thank you very much to the awesome contributors that helped with the updates in this release:

• @chaffeqa
• @matiasvad

Boilerplate v1.2.3

Bug Fixes

• 🐛 #158 Template and theme screenshots were missing from an earlier release. These were added back in so that both the theme and the page templates have preview images set for them when a user selects the theme or page from the website page dashboard.