Lightweight CSS/Javascript library for preparing presentation slides in HTML.
A presentation is written as a single HTML file. It should contain a reference to the slides.js and slides.css for
basic slides functionality, as well as theme CSS and Javascript files (theme files should appear after as they might
override functions or style rules):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href=".../slides.css">
<link rel="stylesheet" href=".../myriad.css">
<title>Awesome Presentation</title>
</head>
<body>
<script src=".../styles.js"></script>
<script src=".../myriad.js"></script>
</body>
</html>Slides of the presentation correspond to section elements in the HTML.
The title of the slide should appear in a h1 element. The rest of the element will be used as content for the slide.
A header and a footer will be added automatically. It is possible to override the header() and footer() methods
in the Slides prototype to modify header and footer content (by default there is no header, and the footer contains
the page counter).
-
The function
count_as_page(section)can be redefined to specify which slides count in the page numbering (depending on the contents of their section). -
Methods
header(),footer()andpage_counter()ofSlide.prototypecan be redefined to modify the contents of the header, footer and page counter respectively. These methods should return an HTML element ornull. -
If the
window.onloadfunction is redefined, it should explicitly callprocess_slides().
Slides might feature dynamic elements that appear or disappear in several steps. These can be controlled with the
classes uncover and only:
uncoverelements are hidden when not active, but still occupy space on the slideonlyelements are not represented at all while not active (don't take space at all)
To control the steps at which dynamic elements are displayed (active), use attributes data-start, data-end and
data-step. These attributes should have non-negative integer values corresponding to steps of the current slide
(first step is numbered 0):
data-startindicates the first step (inclusive) at which the element is activedata-endindicates the last step (inclusive) at which the element is active- if
data-stepis given,data-startanddata-endare set to its value (used for elements active for only one step)
If data-start is given but not data-end the element is active for all steps of the current slide after the starting
one. If data-end is given but not data-start, the element is active from the first step until the indicated end.
Lastly, if neither data-start nor data-end is given (and no data-step since it corresponds to both start and end),
the element will be active from the step following the last referenced step. If the element is of class only, it
will be active for one step only, if it is of class uncover it will remain active until the end of the slide. This
enables series of consecutive dynamic elements without explicitely giving start and end steps.
For instance, to represent an animation of successive images replacing each other, starting from step 0:
<img src="file01.jpg" class="only" data-start="0">
<img src="file02.jpg" class="only">
<img src="file03.jpg" class="only">or for uncovering a list of items at successive steps (if no dynamic element was referenced before the first list item will be uncovered at step 1):
<ul>
<li class="uncover">First item</li>
<li class="uncover">Second item</li>
<li class="uncover">Third item</li>
</ul>Because slides are automatically scaled to fit the view port, regular length units should be avoided (for font sizes,
margins, positions, etc.). The stylesheet slides.css defines several variables that can be used as units :
--widthand--heightcorrespond to the width and height of a slide (one of them should be equal to one of the view port dimensions, the other is set to match the 4:3 ratio)--mmcorresponds to a millimeter if the slides are set to be 96mm x 128mm. This is the dimension of Beamer slides (a popular LaTeX style) and is chosen to be compatible with usual text font sizes (8 - 12pt)--ptcorresponds to 1pt if the slides are set to be 96mm x 128mm. Because of the chosen size, typical font size for slides should be around 10 times the value of--pt.
These units should be used in the styling CSS instead of regular units. They can be used with the calc and var
keywords. For instance, for setting a font size of 12pt for the whole document, one should use the rule
html {
font-size: calc(12 * var(--pt));
}Slides are automatically scaled to fill the screen and only one slide is shown at a time.
Navigation can be done with keyboard or mouse:
- →, D or space: next step
- ← or Q: previous step
- ↓ or S: next slide (first step)
- ↑ or Z: previous slide (first step)
- J: jump to a page number (prompts the user for a number)
- click on bottom-left corner of current slide: previous step
- click on bottom-right corner of current slide: next step
Themes can be created by adding CSS stylesheets and (optionally) redefining some of the Javascript functions.
Myriad is a black and white theme to be used with slides.js and slides.css.
Myriad defines 5 types of slides
section elements with the class title will be styled as title slides. These may have:
- an
h1element for the title of the presentation - an
h2element for an optional subtitle - a
divelement with classauthorfor the author of the presentation - a
divelement with classcontextfor the context in which the presentation is given (conference name, course title, etc.) - a
timeelement for the date
All other elements of a title slide (for instance an image) should be manually placed with absolute position.
section elements with the class section will be styled as (presentation) sections markers. These slides should only
have a main title h1 and optionally a subtitle h2. Section number is added automatically in front of the title
(in roman numerals) but each section should be preceded by a .section-counter element (an empty div) to increment
the counter correctly (this is to avoid resorting to Javascript but it is required to have an element outside of the
.section slide because counter are not incremented for elements that are not displayed)
section elements with the single class are styled as slides with a single block of content.
section elements with the split class are styled as two column slides. The left side has white background and the
right one has black background.
The content of each side should be placed in a div with class side.
Note: Because single and split slides are by far the most common in a presentation, a slide with no explicit
type class will be automatically marked as single or split, depending on whether it contains .side elements.
section elements with no styling class will be represented as blank slides with plain white background. They might
have a title (h1) as other slides. By default blank slides will also have a page counter but this might be avoided
using the class no-page-counter (for instance to display a fullscreen image with no extra element on top).
Some classes are provided to style some elements on the slides :
The class box (to be used on a div element) defines a "text box" that is represented with enclosing top and bottom
borders. The box can have a title (optional), enclosed in an element of class box-title, and the content of the box should be in
an element of class box-content (inside the .box element).
Example :
<div class="box">
<div class="box-title">Theorem (Euclid)</div>
<div class="box-content">
There exist infinitely many prime numbers.
</div>
</div>.no-displayfor elements that should not be displayed (not rendered).hiddenfor elements that should be hidden (but use space).highlighthighlights text with a yellow background.centercenters horizontally the contents of the element (vertical flex).underlineunderlines text