Best practices

Bootstrap

Bootstrap in version 5.3 is used to support the theme.

To lighten and make the code more semantic and readable, as well as to facilitate site customizations, @extend of class are preferred.

Example

Original bootstrap DOM

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
  <div class="col">
    <div class="card"></div>
  </div>
</div>

Hugolify DOM for posts grid

<div class="posts">
  <div>
    <article class="post"></article>
  </div>
</div>

Hugolify SASS for posts grid

.posts
  @extend .row
  @extend .row-cols-1
  @extend .row-cols-md-2
  @extend .row-cols-lg-3

SASS

Styleguide for writing sane, maintainable and scalable Sass.

Prettier

We use prettier to keep same codestyle everywhere.

If you use Vs Code, you will need to install the prettier extension .

Then, in settings:

• Select Prettier as default formater
• Enable “Format on save”

Create files:

"@hugolify/prettier-config"

**/*.html