Slides Style Guide

If you would like to help us create or convert slides for lesson plans, please check out our Getting Started information!

Slides are a much-sought-after resource. Please refer to our lesson plans to access slides for various topics. We are in the process of creating slides for each lesson plan and must the following criteria on the format and file type for our official slides.

  • Backwards compatible
  • Reusable
  • Minimal learning curve
  • Ability to use without internet connection
  • Design consistency between different sets of slides (theme)
  • Maintainability
  • Ease of updates
  • Ability to account for different aspect ratios
  • Accessible
  • Open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL.

The Training Team uses a version of for building its slides.

How to Create/Edit Slides in Lesson Plans

To create or edit slides in a particular lesson plan repository in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner., navigate to the /slides/ folder and click on the index.html file.

This is the only file that should be modified to create slides. Do not make changes to any of the other files in the /slides/ folder.

Documentation for the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. elements that are available can be found in the slides/docs/ file. Most of them revolve around applying defined CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. classes around HTML sections, divs, and lists.

Each slide is its own HTML section and should have the CSS class “slide” applied <section class=”slide”>. Adding an ID tag is also encouraged to help identify and allow for links to specific slides.

Each slide should also start with an <h2> heading as the title of the slide. There are exceptions to this such as full-page images or code blocks.

More specific information on the CSS classes and what they do and where they should be applied can be found here:

It can be helpful to outline the slides elsewhere before converting to the HTML format. Paper and pencil, PowerPoint, Google Slides, or others may be environments where you are more comfortable in developing your thoughts. However, to be used by the Training Team in the lesson plans, they must conform to the HTML/CSS formatting outlined here.

Last updated: