Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Using Page Templates & General Appearance

Standard

The standard with which Michigan Virtual courses need to comply. 

To ensure successful and consistent application of accessibility standards and visual styling across courses delivered in Brightspace:

  1. Developers will combine and reconfigure elements from the most up-to-date template pages found in the HTML Elements – SK 1 course to build new course content in Brightspace. 
    1. All elements in this template course align with Michigan Virtual branding standards and were crafted with accessibility and stylistic consistency in mind.  
  2. Developers will consult with the Course Development Specialist (CDS) to coordinate the creation of any new HTML elements, page functionality, or activity types that are needed but not yet available in the existing templates. 
  3. In the event that clients request their own brand standards be used for the styling of the course, the Course Development Specialist (CDS) will work with the client and the design team to provide a custom version of the template pages. 

 

Requirements 

What exactly do course developers need to include in order to comply with this standard? 

  1. Developers will review the FAQ section for the template they would like to use. Then they will enter edit mode on pages where elements that they wish to use are found. Once in edit mode, they will use the HTML editor to copy code for those elements. They will then paste the code into new Brightspace pages in their new course. Next, they will use the code editor to add content to the new page. Major stylist variations of any elements of the templates are not permitted without the involvement of the CDS. 
  2. Designers and developers will use the Course Development Specialist Request in Wrike to request additions or modifications to the Brightspace templates. The CDS will use the request-generated task to coordinate with and update the requesting party.
    1. Instructional Designers may create new HTML elements to use in their courses but should do so in collaboration with the CDS. If the new features are deemed useful and useable for other teams and projects, the CDS and IDMs may decide to incorporate them into the existing templates. However, Instructional Designers and Course Development Assistants may not add to or alter existing templates of their own accord. 
  3. The CDS will confer with clients under the direction of the Course Development Manager(s) (CDM) leading the project to make decisions about client-branded style changes to the templates. The CDS will provide client-branded template pages to the designers and developers before development begins. 

 

Implementation 

How can course developers implement this standard? What is the process for doing so?

How to pull elements from the HTML Elements template pages:

  1. Create a new HTML Document and delete default code:
    1. If starting from a new HTML page in your new Brightspace course, you’ll first need to select and delete all default code in that new page. The code that is automatically included in new pages does not link to the proper CSS, so pages created using that default code can’t be properly styled. 
      1. Only once all the default code is deleted will you be ready to start building a new page from scratch using the template pages in HTML Elements. 
    2. Begin by creating a new HTML page:
      1. Select the Create New button at the top right of your screen. 
      2. Then, choose HTML Document.
    3. Next, clear all default code:
      1. Select the source code button ( </> ) in the edit panel.
      2. Once in the HTML edit panel, select everything all code and delete it. 
      3. Now you’re ready to start building!
  2. In another window, navigate to HTML Elements – SK 1 course. 
  3. Copy the code for the header and footer:
    1. Choose any page from the most recently updated section of HTML Elements. All pages should contain the proper header and footer code.
    2. Click the … icon in the top right corner of the page. 
    3. Choose Edit in the dropdown menu. 
    4. Select the source code button ( </> ) in the edit panel. 
    5. Select the file declaration <!DOCTYPE html> and everything below it down to and including <main>. This is the header. Copy all of this code. 
    6. Go the new page you created in your course and paste this code into the HTML edit panel there. 
      1. Note: Replace the section and page title text. In this example, you need to replace the highlighted text with the titles from your course:
        1. <div class=”container mx-auto px-4 lg:px-24 py-12″><span>General Text Templates</span><br><span class=”text-lg md:text-xl font-body font-extrabold lg:w-2/3″> Headings &amp; Paragraphs </span></div>
    7. Below all this header code in your new page, hit enter several times to create some space for the footer. 
    8. Go back to HTML Elements, and this time scroll to the bottom of the HTML edit panel you should still have opened from copying the header code. 
    9. Copy the last line: </main></body></html>
    10. Paste that line of code into the new HTML page in your course. 
    11. Now you’re ready to fill in the space you left between the header and footer code with course content! 
  4. Copy the code for individual elements:
    1. Browse the pages in the most recently updated section of the course to find the element you need for your new page (e.g., a set of accordions, a timeline bullet list, or a paragraph of text with an image). 
    2. Click the … icon in the top right corner of the page. 
    3. Choose Edit in the dropdown menu. 
    4. Select the source code button ( </> ) in the edit panel. 
      1. Tip: Once in edit mode, if you find the element that you need to copy in the page and click to put your cursor near it, the cursor will appear in that place in the code when you select the source code button. 
    5. Locate the code for the element you wish to use in your new page. 
    6. Copy the code for that element. 
    7. Paste the code into the appropriate place in your new page. 
    8. Save the new page. 
    9. Make sure that you DO NOT save any change(s) you may make to the HTML Elements template page. Simply select Cancel to exit edit mode on the template page. 

Tutorials on how to use HTML in the context of our Brightspace templates can be found in the following slide decks:

How to find the Course Development Specialist Request in Wrike:

  1. Anywhere in Wrike, click the + (Create) button in the upper right corner. 
  2. Select Request from the dropdown list. 
  3. Scroll down to find the IPD Support Request (New) form. 
  4. Scroll to the dropdown menu bottom of the page. 
  5. Select Course Development Specialist Request and enter today’s date in the date selection box. 
  6. Fill out the form, including as much detail as possible about your needs. 
  7. Click submit. 

Resources

What resources would help a developer implement this standard appropriately?

In early 2023, Rosie Dunlap, Rob Rop, Layla Dozier, Adam Gammons, Christa Parks, and Shanique Bryant created (an as of yet incomplete) series of iPD team training sessions to teach everyone how to use the new HTML templates developed by Rob Rop, the Course Development Specialist. 

Below are the links to the tutorial course in Brightspace, the group training activities, and the instructional videos that this team created at that time. Please note that changes to the style of the templates may have taken place, but the practices and strategies the team describes in these resources should still be applicable. 

Full list of HTML Tutorials: