Trio Icon
Trio v6.0.3

The Trio Blog

  1. Latest
  2. Releases
  3. News
  4. Tutorials

Advanced Page Composition And Collections: Part 1) Tutorial Introduction And Starter Project Setup

a web page composition abstract


Before proceeding with this tutorial, please familiarize yourself with Trio's Core Concepts, Tag-Based Callbacks, Metadata, and Collections.

Intention Of This Tutorial

As was stated at the conclusion of the previous tutorial, Advanced Page Composition With JSON Data, this next multipart tutorial forgoes the trivial and presents a real world use case - a catalog site, one very much like what you might expect from a web store, but in this case its catalog doesn't contain things for sale, but rather it contains images of all the flags of the world along with their relevant information which you are free to explore.

Aptly named "Flags Of The World", the site has a total of 250 pages consisting of:

  1. 1 landing page that is created using Trio's advanced page composition (along with the data from the root/source/data/world.json file) that lists all the flags of the world along with their geographic location.
  2. 249 detail pages that are generated using Trio's collections feature (along with the data from the same root/source/data/world.json file used to create the landing page) that lists all the relevant information for each flag of the world.

Video Demo Of Project

The video below discusses Trio's collection feature and demonstrates the "Flags Of The World" website that this multipart tutorial will teach you how to build.

Installing The Starter Project

As a convenience to you, a starter project has been created that already includes all the necessary project assets, including:

  1. All 249 root/source/media/flags/128x128/*.png files.
  2. The root/source/data/world.json file, which is an array of items sorted in ascending order by "name" where each item contains the following keys and value:
    • "id" - a number, the unique id of the item
    • "name" - a string, the geographical location that this items flags pertains to, also used to sort the file in ascending "name" order
    • "alpha2" - a string, the 2 character code for the flag and its geographical location
    • "alpha3" - a string, the 3 character code for the flag and its geographical location
    • "img" - a string, the path to the flag's .png image residing in the site's media/flags/128x128/ folder
  3. All the root/source/sass/*.scss files.

To install the starter project, please open your terminal application, navigate to a folder in which you want to install the starter project and at the command line please enter the following:

git clone

As you will not be permitted to push changes to the upstream repo, you can now delete the starter project's .git/ folder. From the root folder of the starter project, please run the following command.

rm -rf .git

You can, if you desire, then run

git init

from the root folder of the starter project to initialize a new git repository specifically for your starter project.


With the starter project now installed, you can now proceed to the next part of this tutorial.

Your Financial Support Of This Project Is Greatly Appreciated

Trio is an open source project and is therefore free of charge to use both for noncommercial and commercial use, but when you use Trio to create a new website, please consider donating a few bucks. It doesn't take very long, the process is secure, and it will allow us to continue to support the community and to maintain and enhance Trio going forward.

Show your ❤️, add your ★ to the Github repo.