To create a render.py jinja template:

1. Create a new file in the layouts directory, inside the client-specific directory.
2. You can design the deliverable using HTML and CSS, importing components and objects already defined in their corresponding directories.
3. You can define jinja variables, which you can later use in your code {% set properties = get_properties(combine_dup_items=True) %}.
4. Available functions are defined in the BriteCore project, in lib/render/render.py Some of these functions are described in the Functions for template reference.
5. To preview the new template, go to the html_template table and find the name of the deliverable, then use that to build the link. Refer to the jinja deliverables documentation on how to build the link.
6. If you can’t see the deliverable you just created, you can use the gulp develop:update-templates --client=client_name (you need to stop this process after it ends, use Ctrl+C).

Use components and objects

1. You can import components to your layouts and send different variables to your components as needed:

{{ include_template('@@components/stub', defaults=defaults, due_date=due_date) }}

2. Importing objects:

Template usage

You can use .vue files for your elements Wrap your jinja markup with <jinja>, it will be extracted as-is.

Sample code

<docs>
## Example component

Put documentation for your element here, it will be extracted to `/docs`
</docs>

<jinja>
  <table class="o-foo">
  {% for bar in foo -%}
      <tr class="o-foo__bar">{{ bar }}</tr>
  {%- endfor %}
  </table>
</jinja>


<style lang="scss">
  // stylesheets/base.scss is auto imported, so our mixins/placeholder are available

  @include object('foo') {
    @extend %o-table;

    @include modifies-element('bar') {
    // You don't have to use mixin, "&__ {}" works fine too
      test: 123;
    }
  }
  // Compiles with the standard britecore deliverable table styling
  //
  //  .o-foo {
  //   text-align: left;
  //   width: 100%;
  //   border-collapse: collapse;
  //   border: 1px solid black; }
  //
  //  .o-foo th {
  //    text-align: center;
  //    font-weight: bold; }
  //
  //    // ...
  //
  //  .o-foo .o-foo__bar {
  //    test: 123; }

</style>