Browse Develop Manual

Style Guide

HB Framework Authors December 14, 2022 1 min read Develop Docs CSS HTML JavaScript SCSS Style Guide TypeScript
On this page
Donate

Undoubtedly, adhering to the same coding style helps developers work together. We suggest you take a few minutes to learn about the coding style used if you’d like to help us improve the code by submitting pull requests.

TypeScript Style Guide

We use eslint to check the TypeScript and JavaScript formatting.

1npm run eslint

SCSS Style Guide

Stylelint is used to check the SCSS styles.

1npm run stylelint

Hugo Style Guide

Naming Conventions

Parameters Naming Convention

Since Hugo parameters are case-insensitive, snake_case is preferred.

Parameter
FooBar❌
fooBar❌
foobar❌
foo-bar❌
foo_bar✅

File Naming Convention

Filenames are case-sensitive on some file systems, so we recommend always using kebab-case.

Filename
fooBar.html❌
foo-bar.html✅

Variable Naming Conventions

  1. Use PascalCase for exported variables, as Go does.
  2. Use camelCase for local variables.

Bootstrap Style Guide

We recommend using Bootstrap CSS utilities as much as possible to reduce the size of CSS bundle.