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.