SSS (Simple Slide System) is a lightweight JavaScript library for creating HTML-based presentations with ease.
Clone the repository:
git clone https://github.com/FiOS-repo/sss.git <Presentation_name>
cd sssStart the development server (with live reload):
npm install
npm startThe presentation entry point is the index.html file.
Edit the slides directly in index.html using <section> elements inside the .slides container. Each section represents one slide.
<div class="slides">
<section>
<h1>Slide 1</h1>
<p>Welcome to your first SSS slide!</p>
</section>
<section>
<h1>Slide 2</h1>
<p>More content here...</p>
</section>
</div>To reveal content on a slide step-by-step, use the segment (fragment) feature. Add classes like fragment-1, fragment-2, etc., to elements within a slide. When navigating the presentation, each fragment will appear in sequence before advancing to the next slide.
To enable this behavior, no additional configuration is required—just use the fragment-N class on elements inside any slide.
<section>
<ul>
<li class="fragment-1">This will show first</li>
<li class="fragment-2">This will show secound</li>
</ul>
</section>You can set the background color of a slide by adding a class to the <section> element that starts with bg- followed by a valid CSS color. For example:
<section class="bg-green">
<h1>This is Green</h1>
</section>You can use color names, hex values, or rgb() values:
<section class="bg-#0f0">
<h1>Bright Green</h1>
</section>
<section class="bg-rgb(0,255,0)">
<h1>RGB Green</h1>
</section>To enable a fade transition between background colors, set the config option SSS_BG_FADE to true. You can also customize the duration of the fade with SSS_BG_FADE_TIME (in seconds).
See the Config section for more details on these options.
Themes are standard CSS files located in the themes/ directory. To apply a theme, link it in your HTML <head>:
<link rel="stylesheet" href="themes/<theme>.css">terminalcattpuchinmochaYou can also add your own themes by creating additional CSS files in the themes/ directory.
You can configure SSS via global variables in a <script> tag in the <head> of your HTML file:
<script>
const SSS_CENTER_SLIDE_CONTENT = true;
const SSS_TITLE = "Welcome to SSS";
const SSS_SLIDE_NUMBER = true;
const SSS_PROGRESS_BAR = true;
</script>| Variable | Description | Type |
|---|---|---|
SSS_CENTER_SLIDE_CONTENT |
Centers the content of each slide | Boolean |
SSS_TITLE |
Sets the document title | String |
SSS_SLIDE_NUMBER |
Displays the slide number (top left) | Boolean |
SSS_PROGRESS_BAR |
Displays a progress bar at the top | Boolean |
SSS_BG_FADE |
Fades the Background when changing color | Boolean |
SSS_BG_FADE_TIME |
Defines background fade duration | Integer |