5.0.29 • Published 10 months ago

@pimaonline/pimaonline-themepack v5.0.29

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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.2.0
  • Sass ^1.49.9
  • Typescript ^5.3.3
  • Webpack ^5.91.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.

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) 2024 Pima Community College. All rights reserved. Unauthorized copying, modification, distribution, or any form of exploitation of this code, is strictly prohibited.

5.0.29

10 months ago

5.0.26

10 months ago

5.0.0

11 months ago

4.0.0

1 year ago

3.12.1

1 year ago

3.10.13

1 year ago

3.10.11

1 year ago

3.10.12

1 year ago

3.0.0

2 years ago

2.4.1

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.1.10

2 years ago

2.1.8

3 years ago

2.1.9

3 years ago

2.1.7

3 years ago

2.1.6

3 years ago

2.1.5

3 years ago

2.1.4

3 years ago