From f5e1557261db817a9ca9a9a65e7e228462136214 Mon Sep 17 00:00:00 2001
From: chris bell <chrisbell@bellsworne.com>
Date: Sun, 12 Jul 2026 21:45:57 -0500
Subject: [PATCH] Can now add scoped rcss files

---
 assets/main.rml             |  2 +-
 assets/pages/about.rml      |  4 ----
 assets/pages/home.rml       | 14 ++++++++++++++
 assets/pages/lua-test.rml   |  4 +++-
 assets/pages/test-page.rcss |  3 +++
 assets/pages/test-page.rml  |  7 +++++++
 assets/pages/testPage.rml   |  5 -----
 src/app.cpp                 | 14 ++++++++++++++
 src/app.hpp                 |  2 ++
 src/main.cpp                |  8 ++++----
 10 files changed, 48 insertions(+), 15 deletions(-)
 delete mode 100644 assets/pages/about.rml
 create mode 100644 assets/pages/home.rml
 create mode 100644 assets/pages/test-page.rcss
 create mode 100644 assets/pages/test-page.rml
 delete mode 100644 assets/pages/testPage.rml

diff --git a/assets/main.rml b/assets/main.rml
index d17d059..5b1857e 100644
--- a/assets/main.rml
+++ b/assets/main.rml
@@ -7,8 +7,8 @@
     <div id="navbar">
         <h1>RmlUi App Template</h1>
         <div class="nav-buttons">
+            <button id="nav-home">Home</button>
             <button id="nav-test">Test Page</button>
-            <button id="nav-about">About</button>
             <button id="nav-lua-test" onclick="NavigateTo('lua-test')">Lua Test</button>
         </div>
     </div>
diff --git a/assets/pages/about.rml b/assets/pages/about.rml
deleted file mode 100644
index 8e0207c..0000000
--- a/assets/pages/about.rml
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="page-root" class="page">
-    <h1>About</h1>
-    <p>This is a static page</p>
-</div>
\ No newline at end of file
diff --git a/assets/pages/home.rml b/assets/pages/home.rml
new file mode 100644
index 0000000..032f7eb
--- /dev/null
+++ b/assets/pages/home.rml
@@ -0,0 +1,14 @@
+<div id="page-root" class="page">
+    <h1>Home</h1>
+    <p>This is an RmlUi template project with some nice built in features such as:</p>
+    <ul>
+        <li>- Lua and SVG plugins enabled</li>
+        <li>- A shell + page loading system with scoped stylesheets and lua functionality</li>
+        <li>- Hot reload when pressing F5</li>
+        <li>- Basic application state management</li>
+        <li>- A basic stylesheet for common elements</li>
+        <li>- Easy custom controls system</li>
+        <li>- Optional Raylib context</li>
+        <li>- Nix flake for easy development/building</li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/assets/pages/lua-test.rml b/assets/pages/lua-test.rml
index f9e728c..a89e916 100644
--- a/assets/pages/lua-test.rml
+++ b/assets/pages/lua-test.rml
@@ -1,8 +1,10 @@
 <div id="page-root">
     <h1>Lua test page</h1>
-    <p>This button uses <code>NavigateTo('about')</code> lua code instead of a registered C++ event</p>
+    <p>This button uses <code>NavigateTo('about')</code> lua code instead of being harcoded in a C++ PageBase class:</p>
     <button onclick="NavigateTo('about')">Go to About Page</button>
 
+    <p>If you have a .lua file with the same name as the page in the pages directory, it will be loaded at runtime so you can add functionality to a page like this:</p>
+
     <p>This button calls <code>LuaTest.Test()</code> from the scoped `lua-test.lua` file</p>
     <button onclick="LuaTest.Test(event)">Click me!</button>
     <p id="lua-counter"></p>
diff --git a/assets/pages/test-page.rcss b/assets/pages/test-page.rcss
new file mode 100644
index 0000000..8903548
--- /dev/null
+++ b/assets/pages/test-page.rcss
@@ -0,0 +1,3 @@
+#page-root h1 {
+    color: red;
+}
\ No newline at end of file
diff --git a/assets/pages/test-page.rml b/assets/pages/test-page.rml
new file mode 100644
index 0000000..6d7c007
--- /dev/null
+++ b/assets/pages/test-page.rml
@@ -0,0 +1,7 @@
+<div id="page-root" data-model="test-page" class="page">
+    <h1>Test page</h1>
+    <p>{{greeting}}</p>
+    <button id="test-btn">Button clicked: {{counter}} times</button>
+
+    <p>If you have a .rcss file with the same name as the page in the pages directory, it will be loaded at runtime so you can add custom styling to a page, which is why the header is red on this page only.</p>
+</div>
\ No newline at end of file
diff --git a/assets/pages/testPage.rml b/assets/pages/testPage.rml
deleted file mode 100644
index 0843462..0000000
--- a/assets/pages/testPage.rml
+++ /dev/null
@@ -1,5 +0,0 @@
-<div id="page-root" data-model="testPage" class="page">
-    <h1>Test page</h1>
-    <p>{{greeting}}</p>
-    <button id="test-btn">Button clicked: {{counter}} times</button>
-</div>
\ No newline at end of file
diff --git a/src/app.cpp b/src/app.cpp
index 25a9b95..bcb3346 100644
--- a/src/app.cpp
+++ b/src/app.cpp
@@ -2,6 +2,7 @@
 #include <RmlUi/Core/Core.h>
 #include <RmlUi/Core/Factory.h>
 #include <RmlUi/Lua/Interpreter.h>
+#include <RmlUi/Core/StyleSheetContainer.h>
 #include <RmlUi/Lua.h>
 #include <filesystem>
 #include <fstream>
@@ -98,6 +99,17 @@ bool App::NavigateTo(const std::string &pageName) {
     } else {
         std::cout << "[WARN] failed to create data model for page '" << pageName << "'\n";
     }
+    
+    std::string rcssPath = GetAssetsPath() + "/pages/" + pageName + ".rcss";
+    if (std::filesystem::exists(rcssPath)) {
+        auto pageStyleSheet = Rml::Factory::InstanceStyleSheetFile(rcssPath);
+        if (pageStyleSheet && baseStyleSheet) {
+            auto combined = baseStyleSheet->CombineStyleSheetContainer(*pageStyleSheet);
+            doc->SetStyleSheetContainer(combined);
+        }
+    } else if (doc && baseStyleSheet) {
+        doc->SetStyleSheetContainer(baseStyleSheet);
+    }
 
     pageOutlet->SetInnerRML(content);
 
@@ -125,6 +137,8 @@ bool App::LoadUi() {
         std::cout << "[WARN] main.rml has no element with id=\"page-content\"\n";
     }
 
+    baseStyleSheet = Rml::Factory::InstanceStyleSheetFile(GetAssetsPath() + "/styles/main.rcss");
+    
     listeners.clear();
     if (onBindListeners) {
         onBindListeners(doc);
diff --git a/src/app.hpp b/src/app.hpp
index 24d381e..3b6f1f4 100644
--- a/src/app.hpp
+++ b/src/app.hpp
@@ -42,6 +42,8 @@ private:
     Rml::ElementDocument* doc;
     Rml::Element* pageOutlet = nullptr;
 
+    Rml::SharedPtr<Rml::StyleSheetContainer> baseStyleSheet;
+
     std::vector<std::unique_ptr<Rml::EventListener>> listeners;
     std::function<void(Rml::ElementDocument*)> onBindListeners;
 
diff --git a/src/main.cpp b/src/main.cpp
index b3085da..96e7747 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -96,18 +96,18 @@ int main() {
 
     std::cout << "Loading UI...\n";
     
-    app->RegisterPage<TestPagePage>("testPage");
+    app->RegisterPage<TestPagePage>("test-page");
 
     app->SetupListeners([](Rml::ElementDocument *doc) {
         if (auto *btn = doc->GetElementById("nav-test")) {
             app->RegisterListener(btn, std::make_unique<ButtonClickListener>([](Rml::Event&){
-                app->NavigateTo("testPage");
+                app->NavigateTo("test-page");
             }));
         }
 
-        if (auto *btn = doc->GetElementById("nav-about")) {
+        if (auto *btn = doc->GetElementById("nav-home")) {
             app->RegisterListener(btn, std::make_unique<ButtonClickListener>([](Rml::Event&){
-                app->NavigateTo("about");
+                app->NavigateTo("home");
             }));
         }
     });