Zero to Hero: A Complete GridIron 4 Tutorial

This hands-on tutorial walks you through building a data-powered page using GridIron 2, from scratch — no prior experience required. We'll create a dataset related to dog training, save it as a .csv file, link it inside RapidWeaver or Stacks Pro, and display it using a polished table layout.

What You'll Need

• VSCodium (or any plain text editor)
• RapidWeaver 8 / RapidWeaver Classic and the Stacks plugin, or Stacks Pro
• GridIron 4 installed
• Access to a web server or publishing setup like MAMP

1. Create a Basic CSV Dataset in VSCodium

Open VSCodium and create a new file. Paste the following sample data, which we'll use to build a beginner's dog training plan:

Stage,Command,Description,Reward
1,Sit,Teach your dog to sit on command,Treat
2,Stay,Train your dog to stay in place for increasing durations,Treat
3,Come,Recall training – get your dog to come back to you,Treat
4,Heel,Walk calmly beside you on a lead,Treat
5,Down,Lie down on command,Treat
6,Leave it,Teach your dog to ignore distractions,Treat
7,Wait,Build patience at doors or crossings,Treat

This is what that data looks like entered into VSCodium:

Save the file simply as:

dog-training.csv

Remember to type .csv as the file extension. Web-safe names without spaces or special characters are recommended.

Avoid leaving any comments or extra text in the file, and double-check that your column headers are consistent and correctly spelled.

2. Add the CSV File as a Resource in RapidWeaver

To include this CSV file in your project:

1. Open your RapidWeaver or Stacks Pro project.
2. In the resources window, drag and drop dog-training.csv into the Resources area.

3. Add the GridIron Stack to Your Page

1. Navigate to the page where you want to show the training data.
2. From the Stacks Library, search for gridiron.
3. Drag the GridIron 2 stack from the library into the page.

4. Link to Your CSV File in GridIron

1. Inside the GridIron stack, locate the data source settings in the Inspector panel (sidebar).

2. In the GridIron stack's Type settings, choose:

   Type: Local File (default)

3. Use the Set Link to select your CSV file from the resources.

5. Choose a Layout Stack

GridIron separates the data source from how it's displayed. You must add a layout stack:

1. Click the blue + button inside the GridIron stack.

2. Choose a layout from the menu. For this example, select:

   Simple Table

3. This layout is ideal for structured data like ours, with built-in searching and clean output.

6. Customise the Layout

In the sidebar for the Simple Table layout:

• Enable search box
• Choose whether to show borders, striping, or background effects
• You can also adjust font sizes and spacing if needed.

7. Preview and Publish

1. Switch to Preview Mode to see your dog training table rendered on the page.
2. Test the search box — try typing "sit" or "recall".
3. If everything looks good, publish your site using your regular RapidWeaver or Stacks Pro method.

Final Result

Once published, you'll have a functional web page with:

• A searchable, styled table
• Data sourced from your custom CSV file
• No JavaScript setup or coding required

What You Learned

• How to create structured data in .csv format
• How to clean and save the file with proper encoding
• How to upload and use it in RapidWeaver or Stacks Pro as a resource
• How to use GridIron to link data and present it on your site
• How to publish a working, data-driven page with layout customisation