webslides/WebSlides
WebSlides
WebSlides is a CSS-class-driven presentation framework that turns HTML sections into full-screen slides with keyboard, touch, and remote navigation. Its core architecture defines slides as HTML section elements styled entirely through CSS classes for layout, animation, and background, with a vertical-rhythm spacing foundation using an 8-pixel baseline grid. The framework includes a plugin-based behavior extension system that hooks into slide lifecycle events, and maps each slide to a unique URL hash for direct permalink navigation.
The framework distinguishes itself through a comprehensive set of pre-built CSS components for rapid slide construction, including background colors and gradients, fullscreen background images and videos with overlay options, and a nine-grid content positioning system. It provides flexible auto-filling column grids, pre-built content components like covers, cards, quotes, and pricing tables, and supports rich media embedding including YouTube videos, maps, charts, and SVG icons. The system also includes landing page assembly capabilities, longform article layouts, and styled buttons and badges with radius and ghost variants.
Beyond slide creation, WebSlides offers multi-modal navigation through keyboard shortcuts, touch swipe gestures, remote presenter inputs, and on-screen clicks, along with a slide index overlay for quick access to any slide. It supports timed auto-advance for self-running presentations, CSS animations for fade-in, zoom, and slide transitions, and scroll-triggered animations. The framework fires custom lifecycle events when slides are enabled or disabled, and provides slide counter and progress displays to orient the audience.
The documentation covers browser-based presentation creation for keynotes, company culture decks, interview formats, and portfolio showcases, with all functionality accessible through simple HTML markup and CSS classes.
Features
- HTML Slide Decks - Creates full-screen HTML presentations with keyboard, touch, and remote navigation for live talks.
- Slide Architectures - Defines slides as HTML section elements styled entirely through CSS classes for layout, animation, and background.
- Keyboard and Navigation - Supports both keyboard arrow keys and touch swipe gestures for intuitive slide navigation.
- Slide Assembly Components - Creates individual slides from simple HTML elements, keeping the code clean and scalable.
- Slide Content Styling Classes - Ships pre-built CSS classes for typography, backgrounds, cards, and flexible block layouts on slides.
- CSS Utility Classes - Applies background colors, gradients, image sizes, and card dimensions via simple CSS classes.
- Slide Background Images - Sets fullscreen background images on slides using Unsplash photo URLs via CSS classes.
- Keyboard and Touch Adapters - Handles slide transitions via keyboard shortcuts, swipe gestures, and remote presenter inputs through a unified dispatcher.
- Slide - Provides CSS utility classes for typography, backgrounds, grids, and alignments to structure slide content.
- Keyboard Navigation Shortcuts - Provides comprehensive keyboard shortcuts including arrow keys, Page Up/Down, Space, Home, and End for slide navigation.
- Touch Navigation Interfaces - Moves between slides using keyboard arrow keys or touch swipe gestures for intuitive navigation.
- Slide Element Animations - Applies fade, zoom, and slide animations to slides using CSS classes triggered on slide change.
- Full-Screen Slideshow Delivery - Delivers a full-screen, browser-based keynote presentation with slide navigation.
- Prebuilt Slide Components - Ships over 40 ready-made slide components including covers, cards, quotes, and pricing tables.
- Presentation Navigation - Moves between slides using arrow keys, supporting presenter mode for live presentations.
- Longform Article Layouts - Provides scrollable longform article layouts with solid CSS architecture and responsive design.
- Rich Media Integration - Embeds background images, videos, maps, charts, and SVG icons directly into slide content.
- Autoplaying YouTube Embeds - Plays YouTube videos automatically when a slide loads, with loop, autoplay, and mute options.
- Plugin-Based Extensibility - Registers custom JavaScript plugins that hook into slide lifecycle events to override or augment built-in behaviors.
- Slide Background Colors - Sets a slide's background to a predefined corporate, general, or transparent color via a CSS class.
- Button Styles - Provides styled buttons and app store badges with radius and ghost variants for slides.
- Scroll-Triggered Animations - Triggers CSS animations when a slide or element scrolls into view.
- Vertical Rhythm Systems - Uses an 8-pixel baseline grid for all vertical spacing, ensuring consistent visual alignment across slide content.
- Auto-Filling Column Grids - Arranges content into auto-filling, equal-height columns using a single CSS class without JavaScript.
- Data-Attribute-Driven Interactivity - Embeds video and YouTube playback instructions directly in HTML attributes, parsed on slide entry and exit.
- Nine-Grid Content Positioning - Positions text and images to any of nine grid locations using CSS classes.
- Presentation Landing Pages - Assembles welcome, cover, data, about, benefit, card, offer, and form sections for web presence.
- Slide YouTube Playback Controllers - Controls YouTube video playback with play, loop, mute, and hide controls triggered on slide entry and exit.
- Slide Video - Plays videos with the autoplay attribute when the slide becomes active and pauses them when leaving.
- Slide Lifecycle Hooks - Fires custom events when a slide is enabled or disabled, carrying the slide instance in the event detail.
- Video Backgrounds - Plays a fullscreen video behind slide content, optionally with a dark or light overlay.
- Slide Navigation Links - Jumps directly to any slide by its permalink, enabling quick navigation to a particular section.
- Timed Auto-Advance - Automatically advances slides on a configurable timer for hands-free presentations.
- Gradient Backgrounds - Fills a slide's background with a horizontal, radial, or vertical gradient.
- Slide Numbering Configurations - Shows the current slide number and total slide count to orient the audience.
- Slide Deck Automation - Maps each slide to a unique URL hash, enabling direct navigation to any slide by its index or permalink.
- Slide - Places a responsive video player on a slide with options for looping, autoplay, and muting.
