Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bixal/presentation-template
A template for creating web-based presentation slides using USWDS and Bixal branding
https://github.com/bixal/presentation-template
Last synced: 1 day ago
JSON representation
A template for creating web-based presentation slides using USWDS and Bixal branding
- Host: GitHub
- URL: https://github.com/bixal/presentation-template
- Owner: Bixal
- License: other
- Created: 2021-09-15T13:59:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-04T15:40:11.000Z (about 3 years ago)
- Last Synced: 2023-08-02T21:33:08.266Z (over 1 year ago)
- Language: HTML
- Homepage: https://bixal.github.io/presentation-template/
- Size: 86.3 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bixal Presentation Template
The purpose of this project is to enable Bixalers to create presentation content using a webpage instead of tools like Google Slides or PowerPoint.
**[View templates and example content](https://bixal.github.io/presentation-template/)**
Why would you want to do this? Here are a few reasons:
- Inherently more accessible and responsive
- Robust version control and collaboration tools with GitHub
- Better separation of content and presentation
- More open and shareable
- More fun
## Features
- Built on the U.S. Web Design System
- Includes common templates
- Title
- Subtitle
- Blockquote
- Text
- Image with link
- Text with image background
- Uses Bixal brand fonts and colors
- Novel Pro and Proxima Nova typefaces
- External CSS referencing [brand colors](https://cdn.jsdelivr.net/gh/bixal/[email protected]/style.css)
- USWDS-style [utility classes](https://cdn.jsdelivr.net/gh/bixal/[email protected]/utilities-for-uswds.css) to apply brand colors to different elements
- Example slides
- Automatic slide count and next slide links
- Presenter notes available on the [`/notes/`](https://bixal.github.io/presentation-template/notes/) page of your site.
## How to
Navigate to the `_slides` folder to edit or add slides.
### Understand the code
Within the files, there are two distinct sections.
- **Front matter**: the text **between** a pair of dashes. This is where the majority of your slide styling occurs.
- **Content**: the text **underneath** the dashes. This is the main content, or "body", of your slide.
### Add a title
- Titles can be added to the `title` term and will appear as top-level headings.
- Titles will not appear on the slides with the "blockquote" template, but it's best to have a title for consistency and traceability.
### Change color
- You can apply color to the `text-color` and `background-color` terms by simply plugging in a color from Bixal's branding options:
- orange
- green
- light-blue
- teal
- red
- maroon
- purple
- navy
### Add images
If you're uploading an image, go to [/assets/img](/assets/img) in your repository and press the `Add file` button.
- Use the "text-with-image-bg" template if you're intending to use an image as a background image.
- Add the image file name or image URL to the `bg-image` term.
- Use the "image-with-link" template if you're intending to set context with images and links.
- Add the image file name or image URL to the `image-source` term.
- Make sure to include the appropriate image information to the `link` and `image-alt-text` terms!
#### Rearrange the text or image
- To change which side you want the text to be on, include the following term:
- `text-order:` (first or last)
- To change which part of an image you want to appear on the slide, include the following term:
- `image-alignment:` (left or right)
### Add presenter notes
- Presenter notes can be added to the `notes` term and will only be seen by the presenter.
- They can be accessed through the `/notes/` page of your site (i.e. bixal.github.io/presentation-template/notes/)
### Order your slides
How you name your slides will determine the order they will appear.
- Your files will automatically be sorted alphabetically.
- You can control the order by adding numeric values to the front of your slide's file name (i.e. 1, 1.1, 1.2, 2, 2.4, 3, etc.).
- The lowest value will appear first and the highest value will appear last.