npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@pimaonline/pimaonline-themepack

v5.19.0

Published

A cloud based, course theme-pack for building courses efficiently within the D2L learning environment.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

frankiejreyfrankiejreyaphan-webdevaphan-webdev

Keywords

Readme

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.

  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

(C) 2025 Pima Community College. All rights reserved. Unauthorized copying, modification, distribution, or any form of exploitation of this code, is strictly prohibited.