There are four main components to building a theme in REACH: the layout file, template files, partials, and assets.

Layout

The layout contains everything surrounding the individual pages of your portal. Items like the menu, header, and footer should be placed in the layout. Then use the liquid tag {{ content_for_layout }} to display the templates in the layout for the different portal pages. An example can be viewed in the Appendix.

Templates

Each page in the REACH portal is based on a template in your theme. For example, your Campaign page is based on the layout file and the Campaign template. 

Partials

A partial is a snippet of HTML and Liquid code that can be accessed in multiple templates or the layout.

Assets

Assets are all of the other files associated with your Theme. These include CSS files, JavaScript files, images, and any other files needed to display your portal. Assets can be referenced using Liquid tags:

Theme javascript asset tag

Example – For a theme asset example.js: {% javascript_tag | example %} returns:

<script src="example.js" type="text/javascript"></script>

Theme stylesheet asset tag

Example – For a theme asset example.css: {% stylesheet_tag | example %} returns:

<link href="example.css" media="all" rel="stylesheet" type="text/css" />

Generic theme asset url tag

Example – For a theme asset example.jpg {% asset_url_tag  | example.jpg %} returns the URL to the file which can be used in any HTML tags:

<img src="{% asset_url_tag  | example.jpg %}">