Skip to content

Using TNA Frontend

Jump to bottom
Andrew Hosgood edited this page May 7, 2024 · 11 revisions

There are three main ways to include TNA Frontend in your project:

  1. Compiled files
  2. npm
  3. CDN

Using the compiled files

Each release (as of v0.1.21-prerelease) should contain a ZIP of the package.

Find the release you want on the tna-frontend releases page and download the package from the "Assets" dropdown.

Using npm

Install the frontend package from NPM with:

npm install @nationalarchives/frontend

CSS

From here, you have access to include the SCSS files from the package so you can compile the package yourself:

/* OPTIONAL: Override any variables */
@use "node_modules/@nationalarchives/frontend/nationalarchives/variables/assets" with (
  $tna-font-path: "/MY_CUSTOM_FONTS_PATH",
  $fa-font-path: "/MY_CUSTOM_FONT_AWESOME_PATH"
);

@use "node_modules/@nationalarchives/frontend/nationalarchives/variables/grid" with (
  $largest-container-width: 90rem
);

@use "node_modules/@nationalarchives/frontend/nationalarchives/variables/typography" with (
  $body-font-size-px: 17
);

/* Include all the styles */
@use "node_modules/@nationalarchives/frontend/nationalarchives/all";

...or you can copy the compiled CSS files into your distribution as part of your build process:

  • node_modules/@nationalarchives/frontend/nationalarchives/all.css
  • node_modules/@nationalarchives/frontend/nationalarchives/all.css.map

TIP:

If you build the SCSS with sass --load-path=node_modules ... then you can remove the node_modules/ prefix from the paths above, instead simply importing your modules with @nationalarchives/frontend/nationalarchives/....

JavaScript

// Import all the JavaScript
import "node_modules/@nationalarchives/frontend/nationalarchives/all.mjs";

...or you can copy any of the compiled JavaScript files into your distribution:

  • node_modules/@nationalarchives/frontend/nationalarchives/all.js
  • node_modules/@nationalarchives/frontend/nationalarchives/all.js.map

Using a CDN

The @nationalarchives/frontend package is available on jsdelivr.com.

While you can use the CSS and JavaScript from there, the font files which includes the icon font will have to be hosted from your web application.

As a result, if you require icons, using a CDN like jsdelivr.com is not the preferred method for using the tna-frontend library.

Include the CSS in the <head> element of your page:

<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.css" rel="stylesheet" integrity="sha384-6Egfw6aX1Jrwuf+APn+BMPswroudkIQ6StU095OPkNCKLEzj7ksWGmYxjend8P7g" crossorigin="anonymous">

Add the JavaScript to the end of your page just before your closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js" integrity="sha384-sBkiMlxl9svXopGxNSMVAdALjzyvh6sQHp+21PE3LGfTxAEbG4EIpK" crossorigin="anonymous"></script>
<script>
  // Initialise all TNA components
  window.TNAFrontend.initAll();
</script>

...or use the module syntax:

<script type="module">
  import { initAll } from "https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js";
  initAll();
</script>
Clone this wiki locally