Update theme-overrides.css file to meet style guide requirements

As of version 0.0.25 of the CMS-CLI, the command is now called hs.

Update the templates and partials in boilerplate to meet style guide requirements:

• HTML
• CSS
• HubL
• Templates

We should not leverage classnames like hs-button in modules and template code, so that they can be reserved for use in product-provided forms markup.

See src/templates/system/404.html and src/modules/Customizable button.module/module.html.

Currently there's an option to select the child menu border color, but not the width of the border.

Add preview screenshots via screenshotPath in template annotations. For example:

<!--
  templateType: page
  isAvailableForNewContent: true
  label: About
  screenshotPath: ../images/template-previews/about.png
-->

Create a singular or set of issue templates for the repo

Update the max-width on system pages to support larger heading sizes (e.g. move from 500px to ~700px). https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/css/templates/_system.css#L39

Currently we offer a header without navigation for landing pages. We should also create a simplified footer without navigation to be used on landing pages per @ckconant 's comment here (#117 (comment)).

Document how to set the deploy GitHub action up in a new repository.

Add a default print stylesheet for the boilerplate

Update JavaScript to meet style guide requirements listed here.

Would be nice if this were updated to reflect DM2

The system has been adjusted so that the module name will be used for the label when a label is not supplied.

Create a pull request template for the repo

Add examples for multi-lingual partials (headers and footers) so that it is easy to reference for multi-lingual content.

Add a wiki with consolidated information on what boilerplate includes, what opinionated best practices were included (and why), how to keep track of updates, and more as we continue the project.

The template needs to be updated with:

• Verbiage explaining the template purpose (why there's a password prompt)
• Input style

In the themes boilerplate, the email subscription module has different functionality than the old vast templates. When you select "unsubscribe from all emails" in the vast template, the existing options are greyed out and unable to be selected. In the new templates these remain selected and unchanged.

Here is the code that I have used to fix this in case you would like to use it:

This is added to the systems_pages.css
.email-prefs .item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.email-prefs .item.disabled input:disabled {
  cursor: not-allowed;
}
This is added to the main.js file
$('input[name="globalunsub"]').change(function () {
    if ($(this).is(':checked')) {
      $('.item').addClass('disabled')
      $('.item input').attr('disabled', 'disabled')
      $('.item input').removeAttr('checked')
    }
    else {
      $('.item').removeClass('disabled')
      $('.item input').removeAttr('disabled')
    }
  });

The three featured posts don't stack, but remain oriented horizontally.

• Update CSS to meet style guide requirements
• Reorganize files based on ITCSS methodology
• Renaming certain files to ensure all files use a consistent kebab casing

The boilerplate menu needs to be refactored to remove forEach in order to ensure IE11 compatibility.

Currently footer__container is being centered via text-align and doesn't have a max-width. This should be updated to use a max-width and set horizontal margin to auto.

Remove _home.css reference from main.css as home is no longer needed/removed.

CC: @gcorne

Update fields.json/theme settings to meet style guide requirements.

Currently the font is being passed incorrectly in theme settings:

"size": {
    "units": "px",
    "value": 24
}

Instead it should be set up like this:

"default": {
    "size": 24,
    "size_unit": "px"
}

This will make general setup, and keeping up with config schema changes, much easier.

The < and > characters aren't aligned well, especially on mobile, which we should fix:

Also, it makes sense to hide the pagination if there is only one page of blog posts.

To get a better feel for the value of the somewhat experimental hs lint command, we should try and integrate it with the boilerplate via the Github action.

cc @corymartin

The menu module is currently missing the linkTarget variable therefore if a user chooses that a menu link opens in a new window, that change wouldn't reflect in the menu currently:

To better explain the system and its structure to designers

Update the modules in boilerplate to meet style guide requirements:

• HTML
• CSS
• HubL
• Modules

We should clean up the properties in meta.json files to only include properties that are meaningful.

Problem

Historically we've used img {max-width: 100%} in the migrations boilerplate. Since updating the image module's options to give customers more control over their images, we've had to remove the max-width so that the module can work freely. In doing so, we're not accounting for other modules allow image insertion.

Possible ways to add images

• Image module
• Logo module
• Rich text module
• Blog content module (Rich text)
• Blog listings (if included above the 'Read more'
• Blog author image
• Featured images
• Rss listing
• Custom modules using an image field

Possible solutions

There are several ways that we can account for max-width on images where we need it applied. Initially, my thought was to use a not:() pseudo selector for the image module, but we need to also account for any custom modules using an image field to omit the max-width from them as well. Since there isn't a good way to account for the image field, we may need to think through all of the possible ways to add images and use a class from each.

• move all of the landing page logic into the main header file
• figure out how to reliable retrieve the template type
• hide the menu when the template is a landing page

Search bar's height is extremely large in Safari. It looks like it has to do with the line-height that is being set there. Going to work on a fix for this today and will make a patch release later in the day with a couple of resolved fixes.

The blog comment form is not correctly centered https://boilerplate.hubspotcms.com/blog/blog-post-6

Add a code of conduct file to the repo

Right now boilerplate is targeting .hs-input vs the input element. This means form styles don't pull through to system page form which are formatted slightly differently or on other HTML based forms.