Theme Builder for the Living Syllabus

This guide outlines how to use the Theme Builder to create scoped, LMS-safe Classless CSS themes. The "Auditing" problem is solved by programmatically scoping standard CSS files (like Water.css or Pico.css) and injecting specific university brand colors, ensuring they do not break the Canvas user interface.

For more context on the project philosophy or to contribute to the source code, visit the Project Hub or the GitHub Repository.

1. The Setup

Ensure you have the full repository downloaded to your local machine.

You will need to install three standard packages to handle the CSS parsing and scoping:

npm install postcss postcss-prefix-selector cssnano

2. The Tool: Theme Builder

The repository includes a browser-based Theme Builder that performs the "Auditing" tasks without requiring manual command-line configuration.

2.1. How it Works

The Theme Builder performs these operations client-side:

2.1.1. Fetching: Retrieves the raw CSS file from the selected library.
2.1.2. Scoping: Parses the CSS and prefixes every selector (e.g., h1 becomes .living-syllabus h1), ensuring the styles only apply within your content wrapper.
2.1.3. Variable Injection: Overrides standard CSS variables (like --primary or --accent) with your chosen hex code.

3. How to Use It

3.1. Launch the Builder: Open the docs/theme-builder.html file included in the repository.
3.2. Select & Configure: Choose your base aesthetic and input your brand hex code.
3.3. Generate: Click "Run Builder" to see the live preview.
3.4. Export: Click "Copy CSS" and paste the result into a new file in your themes/ folder (e.g., themes/my-university.css).

4. Integration with Your Workflow

This workflow establishes a "Quine-Like System" for maintaining course assets:

4.1. The Transformer (Theme Builder): Use the browser tool once to generate your "University Theme File." It ensures the CSS is scoped and branded.
4.2. The Generator (Word to Canvas): Use the generate.html tool whenever you update your syllabus. It consumes your content and applies the theme you built.

This separation ensures that you are not "fighting the LMS" every time you fix a typo; the heavy lifting of CSS auditing is handled upstream by the builder.