Best Practices

1. Use the NDBX Grid as Top-Level Element

Every Building Block should include its own NDBX Grid with the nopadding flag:

<div nxLayout="grid nopadding">
  <div nxRow>
    <div nxCol="12">
      <p>Here goes the content of your Building Block</p>
    </div>
  </div>
</div>

Why do I need to include a grid?

The TALY Frame restricts the maximum width of Building Blocks, but it does not provide a grid. If your designs are based on the 12-column grid, then your Building Block needs to deliver its own grid.

Why do I need to use the nopadding flag?

This flag removes any horizontal padding around your grid, and thus allows the TALY frame to properly align all Building Blocks, while still respecting the maximum content width recommended by NDBX.

2. Don't Include Vertical "Outer Component" Spacing

The space between Building Blocks is handled by the TALY frame. This is to provide a harmonized white-space experience for users across all Allianz journeys. For this to work, Building Blocks must not provide any vertical spacing on their own. If you notice some additional, unexpected vertical spacing in your generated journey, most likely this is due to the Building Block providing some vertical spacing. Such a Building Block should have its "outer component" spacing removed.

2.1. Details: Spacing Added by the TALY Frame

This is the spacing added between the different elements that compose each page:

Expert (desktop)

• Banner Building Blocks: no vertical spacing
• Between sections: 64px
• Between Building Blocks in the same section: 16px
• Between panels: no vertical spacing
• For Building Blocks which are not configured in any specific section the same spacing as for sections apply

Retail (desktop)

• Banner Building Blocks: no vertical spacing
• Between sections: 80px
• Between Building Blocks in the same section: 32px
• Between panels: no vertical spacing
• For Building Blocks which are not configured in any specific section the same spacing as for sections apply

Experimental Vertical Spacing v1.1

TALY introduces an experimental flag called VerticalSpacing that allows you to render your application using the new vertical spacing system. You can opt-in to this feature using the configuration below in your project.json file:

{
  "targets": {
    "develop": {
      "executor": "@allianz/taly-nx:generate-and-serve",
      "options": {
        "serveTarget": "playground:serve-generated-app",
        "experimental": ["VerticalSpacing"]
      }
    }
  }
}

3. The Building Block's id Property

The id property of the Building Block is meant to be set by TALY while generating a journey, based on the id property of the Building Block configuration in the pages configuration for your journey. TALY relies on The Building Block's id to provide some of the features associated with Building Blocks. This property should be marked as private by TALY, but that is not possible due to Angular's limitations.

We strongly recommend to not set the id property manually in the implementation of your Building Block, and generally to not rely on it at all. If you need another kind of id that has to be hardcoded inside your Building Block (e.g., for tracking purposes), please create a dedicated property for that.