# HTML / Nunjucks

After successful installation and project setup you can start working with AppUI workflow. One part of customizing AppUI is working with Nunjucks templates.

It's supposed that you're familiar with basics of Nunjucks templating language. So if you're not yet, please read Official Nunjucks Documentation. Don't worry, we're using just a few tags across AppUI so you don't need to read whole documentation. Here are the most important sections that you should understand:

- Variables
- set
- extends
- block

Feel free to contact us if you need assistance.

## Getting started

`src/templates` is the folder for Nunjucks templates. With running Gulp task they will be rendered into `dist` folder with the same name as its template, for example: `src/base_js_maps.html` - will be rendered into `dist/base_js_maps.html`

`src/templates/_layout` is the folder with templates which will not be rendered as they're used for defining general site structure / or contain reusable components. Naming template with underscore prefix ("_") will exclude your template for rendering.

So let's have a look at these layout templates, and what they are purposed for.

Template | Purpose
--- | ---
_backend-document.html | Here you can define overall Document structure of Backend (Admin) site. You can modify here: Information that placed in `<head>` tag (<title>, <meta>, <link> 's to global css files, Google fonts) Global javascript files placed before closing `<body>` tag
_backend-drawer.html | Here is placed navigation drawer for Backend site.
_backend-header.html | Here is placed header toolbar for Backend site.
_backend-page.html | Defines general page of Backend site. No need to modify it.
_frontend-document.html | The same as `_backend-document.html` but applied to Frontend site.
_frontend-footer.html | Here you can modify footer of Frontend site.
_frontend-header.html | Here you can modify header navigation of Frontend site.
_frontend-page.html | Defines general page of Frontend website. No need to modify it.

### Assets variables

To access assets files (css, javascript files, images) AppUI uses assets variables across all Nunjucks templates. These variables are:

`img_path` - so if you want to access image (placed in assets folder), use these, for example:

    <img src="{{ img_path }}avatars/avatar1.png" />

And it will be rendered as:

    <img src="assets/img/avatars/avatar1.png" />

`css_path` - if you want to access css file placed in assets folder, use these:

    <link href="{{ css_path }}bootstrap.css" />

It will be rendered as:

    <link href="assets/css/bootstrap.css" />

`js_path` - if you want to access javascript file placed in assets folder, use these:

    <script src="{{ js_path }}pages/base_pages_dashboard.js"><script/>

And it will be rendered as:

    <script src="assets/js/pages/base_pages_dashboard.js"><script/>