hifi theming

HiFi theming is all done through an online editor. On the left you'll see the files that belong to the theme.  On the right is this documentation, made handy in the editor itself.  In the middle is a tabbed text editor that is based on Mozilla Labs Skywriter, an HTML5 based editor that is rapidly improving.

This setup is fairly straightforward.  Note that if you would like to create more space, you can click on either of the separators to hide the files and documentation.  You can also use the Window menu in the top left corner to go to fullscreen mode.

To get started, let's familiarize ourselves with some basic HiFi ideas:

HiFi Types

At the core of any CMS is content. In HiFi, content is stored in objects called types. HiFi types have familiar sounding names like: page, feed, gallery, author, category, form, post and contain data (a.k.a. properties or fields) like id, url, title, content, created, modified, etc. You can see exactly what a type looks like under the hood here.

Any page you create through HiFi can be extended using Custom Fields. CFs let you add your own properties which you can then access using the syntax


Like so:

{{ page.custom.ingredients.vegetables }}

Which would return the array: [carrots, peas, corn, potatoes] for a Sheperds Pie recipe. You can create and assign Custom Fields to content under Developer -> Custom Fields inside the CMS.

Website Structure

HiFi site tree

In HiFi, content types are organized in a tree structure, much like a site map. Keep in mind when writing templates that you call on ANY content from any page regardless of its location in the site tree. Having said that, the tree hierarchy is important because the API makes it easy to access to a page's parent/children.

HiFi Templates

HiFi uses the easy-to-learn Twig templating language. It looks something like this:

{% for child in hifi.get({type:'page', 'parent': this.id, count: 100}) %}
	{% block children %}
		<article class="subcontent" id="{{ child.url|replace('/','-') }}">
			<h2><a href="{{ child.url }}">{{ child.title }}</a></h1>
			{{ child.content }}
	{% endblock children %}
{% endfor %}

Don't worry if you don't understand all of it for now, templating is covered in more detail here.

HiFi Query Language

If you're familiar with SQL or have worked with databases before, you probably intuitively know the HiFi Query Language. You can call on type objects stored in HiFi using the following syntax:

{property_1: 'string',
property_2: type.property_name,
property_3: 42}

Inside of a template, you would use the hifi.get() function to execute a query, which would look like:

hifi.get({type:'page', 'parent': this.id, count: 100})

hifi.get() would return a maximum of 100 pages underneath the current page that you could either assign to a variable or use a for loop to process.


At this point we would recommend you jump right in and sign up for a free HiFi trial. Our developer challenges should give you an idea how things work, and each challenge should only take 5-10 minutes to complete and focuses on accomplishing small but practical tasks.

If you have any question regarding the product, check out the GetHiFi Forums. If you have any feedback specifically about the docs, please email joel@newmediacampaigns.com! We would love to hear from you.

Happy Hacking,
The HiFi Team