npm package: @pimaonline/pimaonline-themepack
Description: A cloud based, course theme-pack for building courses efficiently within the D2L learning environment.
Author: Center for Learning Technology at Pima Community College
Latest version: 5.23.26

# 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 `<head>` of your document. `/cards/` may be replaced with another theme.

```
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/css/themes/cards/styles.css">
```

Add themepack's JavaScript into the `<head>` of the document ensuring the `defer` attribute is used.

```
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/scripts2.js" defer></script>
```

## 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 `<link rel="stylesheet" href="../../dist/css-dev/themes/cards/styles.css"/>` to `<link rel="stylesheet" href="../../dist/css-dev/themes/[course]/styles.css"/>`)

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.