SlideDeck.sys
Self-Documenting Template
HTML Β· CSS Β· JS β No Dependencies
The Slide Deck
System β Fully
Self-Documented.
System β Fully
Self-Documented.
This document is the template. Every slide you are reading demonstrates a layout pattern, a CSS component, or a JavaScript behaviour that is available for you to use. This file is the spec, the demo, and the starter kit β all in one.
8.5 Γ 11 in β prints perfectly to PDF
Keyboard, swipe & dot navigation
Pure HTML / CSS / JS β zero frameworks
Fully responsive on mobile
Use the arrow buttons below, arrow keys, or swipe to navigate Β· Press "Print / PDF" to export all slides
slide-deck-system
self-documenting template
1 / 10
SlideDeck.sys
Architecture
How the System Is Built
One HTML File.
Three Layers.
Zero Dependencies.
Three Layers.
Zero Dependencies.
The entire presentation runs from a single .html file. There is no build step, no bundler, no server. Open it in a browser and it works. Print it and every slide becomes a page.
CSS β Design Tokens + Components
All colours, sizes, and components live in
:root CSS variables. Change one token to retheme the entire deck.HTML β Slide Markup
Each slide is a
<div class="slide"> with a consistent three-row grid: header, content, footer.JS β Navigation Controller
A single
goTo(n) function handles all navigation: dot clicks, arrow keys, touch swipe, and print expansion.Execution Flow
1
DOM ready fires
init()Waits for nav elements to exist (retry loop every 50 ms), then builds dot nav dynamically
2
Dot nav is generated from
TOTAL_SLIDESOne dot per slide, appended to
#navDots with click β goTo(i) closures3
goTo(n) hides all, shows targetRemoves
.slide--active from all slides, adds it to slide n, scrolls into view4
Keyboard + touch event listeners
Arrow keys, Page Up/Down, Home/End; horizontal swipe β₯ 50 px threshold on touch devices
5
beforeprint / afterprint hooksForce
display:grid on every slide before printing, restore after slide-deck-system
2 / 10
SlideDeck.sys
Slide Anatomy
What Every Slide Is Made Of
The Three-Row Grid β
Header, Content, Footer
Header, Content, Footer
.slide__header
height: 64px
.slide__content
flex:1 β fills remaining space
overflow:hidden
.slide__footer
height: 52px
HTML skeleton
<div class="slide"
data-slide="N">
<div class="slide__header">...logo...section</div>
<div class="slide__content">
<div class="content-pad">
/* your layout here */
</div>
</div>
<div class="slide__footer">...contact...page</div>
</div>
CSS properties that matter:
display: none
Default state for all slides β only .slide--active gets
display:gridgrid-template-rows
64px 1fr 52px β header fixed, content stretches, footer fixedwidth / height
Driven by CSS vars
--slide-w: 8.5in and --slide-h: 11inoverflow: hidden
On the slide and .slide__content β prevents any layout from bleeding outside the page boundary
print-color-adjust
Set to
exact on body and all print elements β forces browser to render background colours in PDFpage-break-after
always on every slide in @media print β each slide = one PDF pageflex-shrink: 0
Apply to headings, dividers, stat grids β prevents them from compressing when content is tall
"The golden rule: never put
flex:1 on more than one child at the same level β only the last expandable zone should grow."Layout Principle Β· Slide Deck System
slide-deck-system
3 / 10
SlideDeck.sys
Design Tokens
CSS Custom Properties β Your Theme Controls
Change One Token.
Retheme Everything.
Retheme Everything.
:root tokens
--navy: #00356A; /* header bg */
--purple: #6F42C1; /* footer + accents */
--purple-dk: #5735A0; /* hover states */
--purple-lt: #F5F0FF; /* tinted panels */
--white: #FFFFFF; /* slide background */
--off-white: #F8FAFC; /* card backgrounds */
--text: #1A1A2E; /* headings */
--text-sec: #4A4A5A; /* body copy */
--muted: #6B7280; /* labels, captions */
--border: #E2E8F0; /* card borders */
--success: #10B981; /* green states */
--warning: #F59E0B; /* amber states */
/* Layout dimensions */
--slide-w: 8.5in;
--slide-h: 11in;
--header-h: 64px;
--footer-h: 52px;
--pad: 40px; /* content-pad */
--pad-sm: 28px; /* content-pad-sm */
Rebranding tip
To rebrand this deck swap
--navy and --purple to your brand colours. The entire deck β headers, footers, dots, accents, badges β updates instantly. No other changes needed.Live colour palette:
--navy #00356A
--purple #6F42C1
--purple-lt #F5F0FF
--success #10B981
--warning #F59E0B
--off-white #F8FAFC
10
Colour tokens
6
Size tokens
2
Font families
slide-deck-system
4 / 10
SlideDeck.sys
Layout Patterns
Grid System + Two-Column Patterns
Every Layout Available
to You β Demonstrated
on This Slide
to You β Demonstrated
on This Slide
.two-col variants:
.two-col
50 / 50 β equal columns
.two-col--60-40
60% left / 40% right
.two-col--40-60
40% left / 60% right
.stat-grid variants:
.stat-grid--4
A
col 1
B
col 2
C
col 3
D
col 4
.stat-grid--3
A
col 1
B
col 2
C
col 3
.stat-grid--2
A
col 1
B
col 2
Typography scale:
.section-label β 10px / 800 / uppercase / purple
.slide-h1 β 32px / 900 / Manrope
.slide-h3 β 14px / 800 / Manrope
.body-copy β 13px / 400 / Inter / line-height 1.65
.badge variants:
.badge--purple
.badge--navy
.badge--green
.badge--white
slide-deck-system
5 / 10
SlideDeck.sys
JavaScript Reference
Navigation Controller β Full API
The Complete JS β
Annotated and Ready
to Customise
Annotated and Ready
to Customise
navigation.js
// ββ CONFIG ββββββββββββββββββββββββββ
var TOTAL_SLIDES = 10; // β update this
var currentSlide = 1;
// ββ INIT (retry until nav exists) βββ
function init() {
var dots = document.getElementById('navDots');
if (!dots) { setTimeout(init, 50); return; }
for (var i=1; i<=TOTAL_SLIDES; i++) {
var d = document.createElement('div');
d.className = 'pkt-nav__dot';
d.dataset.slide = i;
d.addEventListener('click', (
function(n){ return function(){ goTo(n); }; }
)(i));
dots.appendChild(d);
}
goTo(1);
}
// ββ GOTO ββββββββββββββββββββββββββββ
function goTo(n) {
if (n < 1 || n > TOTAL_SLIDES) return;
document.querySelectorAll('.slide')
.forEach(s => s.classList.remove('slide--active'));
var t = document.querySelector(
'.slide[data-slide="'+n+'"]');
if (t) {
t.classList.add('slide--active');
t.scrollIntoView({behavior:'smooth'});
}
currentSlide = n;
/* update counter + dots ... */
}
Public API surface:
TOTAL_SLIDES
Integer. Update this first whenever you add or remove slides.
window.navigate(dir)
Called by nav buttons. Pass
-1 (prev) or +1 (next).goTo(n)
Jump to any slide by 1-based index. Safe β ignores out-of-range calls.
Navigation input sources:
- Dot nav β click any dot, built dynamically from
TOTAL_SLIDES - Arrow buttons β call
navigate(Β±1)viaonclick - Keyboard β β β β β Page Up/Down, Home, End
- Touch swipe β horizontal swipe β₯ 50 px threshold
- Print hook β
beforeprintshows all;afterprintrestores
slide-deck-system
6 / 10
SlideDeck.sys
Print & PDF System
How Print-to-PDF Works
Every Slide Becomes
a Page β Automatically.
a Page β Automatically.
The print pipeline:
1
User clicks "Print / PDF" or presses Ctrl+P
The nav button calls
window.print(). Browser raises the print dialog.2
beforeprint event firesJS sets
display:grid on every .slide β all slides become visible to the renderer.3
CSS
@media print takes overPage size forced to
8.5in 11in with zero margin. Nav hidden. Each slide gets page-break-after:always.4
Colours render faithfully
print-color-adjust: exact forces all background colours, gradients, and shadows into the PDF output.5
afterprint restores screen stateAll slides return to
display:'' (CSS default). The deck snaps back to the slide you were on.Common print questions:
Q
Why does "Save as PDF" look better than "Print"?Browser PDF export uses the print renderer at screen resolution. Use Chrome or Edge "Save as PDF" destination for the best colour fidelity and sharpest text.
Q
Background colours are missing β how do I fix it?In Chrome print dialog enable "Background graphics" checkbox. In Firefox: Options β print backgrounds. The CSS token
print-color-adjust:exact requests this automatically but the user setting can override it.Q
The last slide has a blank page after it in the PDF.The last
.slide gets page-break-after:avoid in the print CSS β this prevents the trailing blank. If you see it anyway, check that no element after the last slide adds implicit space.Q
Can I print individual slides?Yes β use your browser's page range selector in the print dialog. Slide 1 = page 1, slide 2 = page 2, etc.
slide-deck-system
7 / 10
SlideDeck.sys
Customisation Guide
Three Levels of Customisation
Copy a Slide. Change
the Tokens. Ship It.
the Tokens. Ship It.
Level 1
Swap Content
- Edit text inside existing slide HTML
- Replace logo text in
.slide__header-logo - Update phone / email in every
.slide__footer - Change
TOTAL_SLIDESin JS - Update each
.slide__footer-pagetext
β± 15β30 minutes
Recommended Start
Level 2
Rebrand + Restructure
- Update colour tokens in
:root - Swap font families in
<link>tags - Duplicate a slide, change
data-slide, add layout - Use any layout pattern from Slide 5
- Delete slides you don't need
- Update
TOTAL_SLIDESto match count
β± 1β3 hours
Level 3
Extend the System
- Add new component classes to the CSS block
- Create new
--slide-hvariants (landscape11in Γ 8.5in) - Add transition animations to
goTo() - Integrate external chart libraries inside slide content
- Add progress bar or slide title to nav
β± Half day+
slide-deck-system
8 / 10
SlideDeck.sys
Component Showcase
All Components β Side by Side
Every UI Block on One Slide
.quote-block
"A well-structured quote block uses a left purple border, off-white background, and italic text."
Author Name Β· Source or Title
.check-list
- Bold key term followed by supporting description text
- Plain item with regular body copy weight
- Each bullet uses a CSS SVG checkmark on a purple circle
.info-card
Info Card Title
A general-purpose information card with a title, icon, and body copy. Use for callouts, tips, or contextual notes that need visual separation.
.process-steps (compact)
1
Step title β action-oriented
Brief description of what happens at this step
2
Next step follows naturally
Keep step count to 5 or fewer per slide for readability
.dark-panel (navy)
Dark Panel
Navy panel for contrast sections. Add
.dark-panel--purple for purple variant..kv-table
Key Label
Value or description text goes here
Second Key
Bold value with extra context following
.code-block
example
/* Syntax tokens available: */
.cb-key /* purple β keywords */
.cb-val /* green β values */
.cb-str /* amber β strings */
.cb-tag /* blue β HTML tags */
.cb-attr /* red β attributes */
.cb-num /* orange β numbers */
.stat-box variants
42
--purple
18
--navy
99
--green
7
default
slide-deck-system
9 / 10
SlideDeck.sys
Start Building
You Now Have Everything
Fork It. Brand It.
Ship It.
Ship It.
Immediate next steps:
1
Update
TOTAL_SLIDES in the JS blockMatch it to however many
.slide elements you have in your deck2
Replace
--navy and --purple in :rootTwo hex values β the entire visual theme updates across all 10+ components
3
Replace logo, contact info, and slide content
Search-replace your brand name in
.slide__header-logo and footer items4
Hit Print / PDF β done
Use Chrome "Save as PDF" with background graphics enabled for a perfect letter-size multi-page PDF
What this file gives you
β 10 fully worked slide layouts
β 15+ reusable CSS components
β Complete JS navigation controller
β Pixel-perfect print-to-PDF pipeline
β Mobile-responsive at β€ 900 px
β Full inline documentation (this deck)
β Zero build step β open in any browser
Template version
v1.0.0
HTML Β· CSS Β· JS β No frameworks. No bundlers.
slide-deck-system
self-documenting template v1.0
10 / 10