# PimaOnline ThemePack The PimaOnline Themepack is a web development toolkit for building online courses within the D2L Brightspace Learning Management System (LMS). The themepack offers multiple and interchangeable themes. ## Dependencies - Node.js ^v20.9.0 - React ^18.3.1 - Sass ^1.79.4 - Typescript ^5.6.2 - Webpack ^5.95.0 ## How to use Add a theme's CSS in the `` of your document. `/cards/` may be replaced with another theme. ``` ``` Add themepack's JavaScript into the `` of the document ensuring the `defer` attribute is used. ``` ``` ## Development Fork this repository, clone it, and install all necessary dependencies using `npm install`. ``` $ git clone https://github.com/YOUR_USERNAME/pimaonline-themepack.git $ cd pimaonline-themepack $ npm install ``` Start the server ``` $ npm run dev ``` The app will run at `http://localhost:8080`. ### How to Test Theme Using Local Server The PimaOnline Themepack uses `webpack-dev-server` to host a local server. 1. Navigate to `/src/testing-area/` and open any or all HTML templates, i.e. `one-column`, `two-column`, `three-section`. 2. Change the `styles` link from `cards` to your theme’s SCSS folder. (e.g. from `` to ``) 3. In terminal, use `npm run dev` to start the local server. 4. In a browser, go to http://localhost:8080. Find theme layouts in the `/src/testing-area/` folder here as well. 5. To stop the local server use CTRL+C. ### How to Test Theme in a Live Shell 1. Open Dreamweaver and connect to the `WD_testing_environment` course on D2L. Create a folder inside your sandbox and label it with the name of the new theme. 2. Inside the new folder, create an HTML document and paste in the HTML for any layout. Find and copy the code from [Pima Online Webdocs](https://pimaonline-webdocs.netlify.app/getting-started). 3. Replace `/cards/styles.css` with the new theme's css path. 4. Save and put the new folder including the files inside. 5. Review the theme in the live D2L shell to confirm all custom styles display correctly. ### Stylelint for CSS/SCSS Linting The PimaOnline Themepack uses Stylelint to enforce consistent and valid CSS/SCSS code across the project. It is configured using the `stylelint-config-standard-scss` ruleset. #### Stylelint features `npm run stylelint`: Lints all `.scss` and `.css` files in `/src` and generates `stylelint-full-report.txt` in `/src/stylelint/reports`. This command is also built into `npm run build`. `npm run stylelint:watch`: Only lints changed files `.scss` and `.css` files and generates `stylelint-watch-report.txt` in `/src/stylelint/reports`. This command is also built into `npm run dev`. #### Modify Stylelint Configuration The main configuration file is located at `stylelint/stylelint.config.js`. ## Terminal commands `npm run dev`: Used for development. Runs a dev server and watch feature. `npm run build`: Used for compiling `src` into `dist` without running server or watch. `npm run docs`: Serve documentation and view in a browser, found at http://localhost:3000. ## Authors Center for Learning Technology at Pima Community College ## License [Proprietary License](https://github.com/franreyn/pimaonline-themepack/blob/main/LICENSE.md) (C) 2025 Pima Community College. All rights reserved. Unauthorized copying, modification, distribution, or any form of exploitation of this code, is strictly prohibited.