@pimaonline/pimaonline-themepack v5.0.29
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.
Navigate to
/src/testing-area/
and open any or all HTML templates, i.e.one-column
,two-column
,three-section
.Change the
styles
link fromcards
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"/>
)In terminal, use
npm run dev
to start the local server.In a browser, go to http://localhost:8080. Find theme layouts in the
/src/testing-area/
folder here as well.To stop the local server use CTRL+C.
How to Test Theme in a Live Shell
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.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.
Replace
/cards/styles.css
with the new theme's css path.Save and put the new folder including the files inside.
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
(C) 2024 Pima Community College. All rights reserved. Unauthorized copying, modification, distribution, or any form of exploitation of this code, is strictly prohibited.
10 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago