At Northpass, we're taking advantage of Liquid - a battle-tested template language created by Shopify. Liquid allows you to customize the look and feel of your school using files called templates.

What is a template language?

Website designers and developers can use a template language to build web pages that combine static content, which is the same on multiple pages, and dynamic content, which changes from one page to the next. A template language makes it possible to re-use the static elements that define the layout of a webpage, while dynamically populating the page with data from Northpass. The static elements are written in HTML, and the dynamic elements are written in Liquid. The Liquid elements in a file act as placeholders: when the code in the file is compiled and sent to the browser, the Liquid is replaced by data from Northpass.

Liquid syntax

Just like any programming language, Liquid has its own specific syntax. There are two types of Liquid constructs with different delimiters based on the use case: {{ & }} for the output, and {% & %} for the logic and control flow.

Now let's focus on three main features that Liquid exposes.

Objects

Liquid objects are basic data structures that allow outputting dynamic information from Northpass in the template.
For example, the following statement will output the avatar URL for the current person:

{{ current_person.avatar_url }}

In the example above, current_person is an object with an avatar_url attribute. Each object has a list of associated properties.
To learn more about the available objects and their attributes see the Variables Reference.

Tags

Liquid tags are used to create logic and control flow for templates. They do not produce any visible output when the web page is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.

For example, you can use Liquid tags to display different content on the page based on the state of some object:

{% if current_person.signed_in? %}
  hello!
{% else %}
  please sign in
{% endif %}

The above statement will return hello! when the current person is signed in, or please sign in otherwise.
To learn more about the available tags, please see the Tags Reference.

Filters

Liquid filters are used to modify the output of numbers, strings, objects, and variables. They are denoted by a pipe character |.
For example, you can use a Liquid filter to change the letter case of a string:

{{ "Thom Yorke" | upcase }}

The above statement will return THOM YORKE.
Filters can be also chained and they're applied from left to right:

{{ "Thom Yorke" | replace: "Thom", "Mr" | upcase }}

This statement will output MR YORKE.
To learn more about the available filters, please see the Filters Reference.

CSS

Most of the styles for the default templates use our internal stylesheets with CSS classes starting with the np- prefix. However, you're not limited to them. You can include any frontend framework you feel comfortable with, include it in the Head template and start using it.

One CSS library included by default is the Flexbox Grid which is used for the grid system. Please refer to its documentation for details and usage examples.

JavaScript

All dynamic parts of the default templates are implemented using the Easy Toggle State library. It's an HTML-based approach to creating dynamic interactions for the users. Using it, you can implement components like:

• tabs
• dropdowns
• modals

Please refer to its documentation for details and usage examples.