BYU-I CANVAS THEME

Purpose

This is Brigham Young University-Idaho's custom CSS and JS for their Canvas instance. These files are used by students from BYU-Idaho, LDS Business College, and Pathway Worldwide and are distributed across the globe. For this reason it is imperative that these files remain as minimal as possible. See this Google Slides for more information.

Permissions

You need to get the proper permissions to upload to Canvas. Contact Dane Bohman or Ben Wilson to get access to change the theme in the top level test instance of Canvas.

Theme Change Requests

TODO: Figure out the way we will collect problems

Change Requests are submitted via Google Forms/Microsoft Forms/Team Dynamics? and can be found here. There are three categories of fixes, and each has a slightly different process. Please carefully follow the instructions below for each of the types of fixes:

Simple Existing Solution

1. Simply email the requestor with an explanation

Bug Fix

1. If a local copy of this repo doeesn't exist on your computer, Install
2. Create a new branch with the name of the bug fix (or name the branch 'dev')
3. Solve the problem
4. Build the code following this process
5. Test the code in the test instance of Canvas using these step-by-step instructions
6. Test the code in the prod instance of Canvas using these step-by-step instructions
7. If you are working with mobile changes, see this file
8. Once you are certain the bug is fixed, you need to up the version number and merge your branch with master using the command:

   version patch

9. Contact Dane Bohman and explain that you have a bug fix that is ready to be uploaded to the top level in Canvas
10. If this fix has been requested by someone outside the office, send them an email to let them know that bug fix has been implemented

Minor or Major Change/Update

definition: adding features, making changes, breaking things, or major refactoring

1. Research the problem, find examples
2. Make a small presentation explaining the problem as well as potential fixes
3. Meet with the LMS Look and Feel committee, get change either approved or denied
4. Email the requestor to let them know if it's been approved or denied
5. If denied, stop here. If approved, continue with the rest of the steps
6. Meet with the iLearn governance council, get change either approved or denied
7. Email the requestor to let them know if it's been approved or denied
8. If denied, stop here. If approved, continue with the rest of the steps
9. If a local copy of this repo doeesn't exist on your computer, Install
10. Create a new branch with the name of the update (for example, if you are writing code to add a banner, name the branch 'banner')
11. Solve the problem
12. Build the code following this process
13. Test the code in the test instance of Canvas using these step-by-step instructions
14. Test the code in the prod instance of Canvas using these step-by-step instructions
15. If you are working with mobile changes, see this file
16. Once you are certain the code works and is production quality, you need to up the version number and merge your branch with master using the command:

    version minor

or bash version major depending on the size of the change

1. Submit a CAB request and wait for approval. Read more about the process here
2. Contact Dane Bohman and have him upload the new files to the top level in Canvas with Josh there as well to make sure it happens correctly
3. If this fix has been requested by someone outside the office, send them an email to let them know that the change has been implemented

How to Install

1. Clone this repository:

   git clone https://github.com/byuitechops/byui-canvas-theme.git

2. Step into the folder that was just created

   cd ./byui-canvas-theme

3. To install dependancies, run:

   npm i

How to Build

Gulp is used to optimize both JS and CSS files. This optimization includes the following:

• Remove ES6 code from all JS files (using Babel)
• Uglify all JS & CSS code
• Replace CSS 3 custom properties with static CSS declarations for IE 11 support (using postcss)

Use the npm start command to open a live server of your JS and CSS files and start watching for changes in those files. The src directory contains human-readable code while the prod directory contains the optimized code for Canvas.

Dev Notes

You MUST thoroughly test these files before uploading them to Canvas. Changes will affect thousands of students globally.

• CSS & JS files for the Canvas mobile apps have their own upload location in Canvas. Many of these features will not work on the Mobile app.
• JS files cascade, so a JS file at the top of an account will also run in all sub-accounts. The Dev account is currently being used for testing.
• Please be aware that byui.js lives at the very top level of our Canvas instance, and applies to many places that no other sub-account will (ex: the login page). Just know that this script is liable to create bugs that cannot be found in the Dev sub-account.

Emma's Notes

• People that should be in the LMS Look and Feel Committee:

  • Corey Moore
  • Someone from Matt's group
  • Online development
  • Tim Tanner
  • Shaun Short
  • UX person
  • QC person

• To do:

  • Mobile code
  • Refactor code
  • Simplify code
  • Fail elegantly

• other stuff to do

  • go line-by-line in the CSS to make sure everything we are changing is documented in the PowerPoint
  • improve the comments throughout the code, especially in the CSS
  • document the branches and what each contains better (talk to Josh)