AireFrame

Appearance

Liquid ​

This page explains how to use the Liquid templating language in AireFrame.

The reference implementation is Shopify's Liquid. You can find the official documentation here.

Custom Filters ​

AireFrame offers a number of custom filters that can be used in Liquid templates to make common operations easier.

Age ​

There is an age filter that can be used to calculate the age of a date/date time value.

It takes one argument specifying what unit should be used to calcualte the age, the options are:

  • year
  • month
  • week
  • day
  • hour
  • minute

Example

liquid
{{ dateOfBirth | age: 'year' }}

Plus Time ​

The plus time filter can be used to update a date/date time value. The possible arguments are: months, weeks, days, hours and minutes, and each argument should be followed by a number. At least one argument is required.

Example

liquid
{{ date | plus_time: months: 1, weeks: 2, days: 1, hours: -2, minutes: 10 }}

Round to next ​

There is an round to next filter that can be used to round a date/date time value according to the specified unit. The possible arguments are: month, weekday, monday to sunday, and hour.

Example

liquid
{{ date | round_to_next: 'wednesday' }}

CUI DateTime ​

There is an CUI DateTime filter that can be used to format a date time value into a CUI date time string (dd-mmm-yyyy HH:MM)

Example

liquid
{{ date | cui_date_time }}

CUI Date ​

There is an CUI Date filter that can be used to format a date or date time value into a CUI date string (dd-mmm-yyyy)

Example

liquid
{{ date | cui_date }}

CUI Time ​

There is an CUI Time filter that can be used to format a time or date time value into a CUI time string (HH:MM)

Example

liquid
{{ time | cui_time }}

HTML Formatting ​

Liquid expressions allow you to pass HTML content to be rendered. This is useful for rendering rich text content.

The allowed HTML tags are:

  • <a />
  • <b />
  • <strong />
  • <em />
  • <i />
  • <small />
  • <sub />
  • <sup />
  • <br />
  • <span /> - The title and style attributes are allowed on the span tag. The allowed css properties are:
    • background-color
    • border
    • border-radius
    • color
    • display (only inline, inline-block and block are allowed)
    • font-weight
    • font-size
    • letter-spacing
    • min-width
    • padding
    • text-align
    • text-decoration
    • text-shadow
    • text-transform
    • text-emphasis

You can also use any UTF-8 icons in the content. See here for the available icons.