CLI

Use the Basecoat CLI and template macros.

Use the CLI

If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for complex components (e.g. Dialog). It will copy the JS and .html.jinja or .njk macros into your code.

For example, to add the Dialog component, run one of the following commands:

npx basecoat-cli add dialog

You will be asked to confirm the template engine and destination directory for the JavaScript and macros.

Use Nunjucks or Jinja macros

For more complex components, you can use Nunjucks or Jinja macros to help generate the HTML and JavaScript code.

To install them, either copy them directly from the GitHub repository or use the CLI.

For example, here's how you could use the select() macro to generate the HTML and JavaScript code for a Select component:

{% call select() %}
<div role="group" aria-labelledby="fruit-options-label">
  <span id="fruit-options-label" role="heading">Fruits</span>
  <div role="option" data-value="apple">Apple</div>
  <div role="option" data-value="banana">Banana</div>
  <div role="option" data-value="blueberry">Blueberry</div>
  <div role="option" data-value="pineapple">Grapes</div>
  <div role="option" data-value="pineapple">Pineapple</div>
</div>
{% endcall %}