argyleink / slyd Goto Github PK

View Code? Open in Web Editor NEW

72.0 3.0 2.0 38.09 MB

Snappy, responsive, touch optimized, bi-directional presentation framework

Home Page: https://slyd.netlify.com

CSS 55.00% HTML 27.20% JavaScript 17.80%

slides presentations

slyd's Introduction

Getting Started

Load bundles from a url or use modules from NPM.

Note: there aren't any docs yet, just a demo site. The demo site is the best docs you have for the time being as it's sorta documentation by example. I'll improve this!

CDN

import 'https://slyd.netlify.com/slyd.js';
@import 'https://slyd.netlify.com/slyd.css';

NPM

npm i slyd
import 'slyd'; // use es module
@import 'slyd'; // use postcss module

Starter Kit

Clone and go with this Slyd starter

Pika

coming soon

Start making <slyd>'s by adding HTML to your page.

<slyds>
  <slyd>
    <h1>Slide 1</h1>
    <h2>subtitle</h2>
  </slyd>

  <slyd-group>

    <slyd>
      <h1 uppercase>Slide 2</h1>
      <h2>is in a <span highlight>vertical</span> slide list</h2>
    </slyd>
    
    ...
    
  </slyd-group>
  
  <slyd-group>...</slyd-group>
</slyds>

slyd's People

Contributors

Stargazers

Watchers

Forkers

doc22940 lulle2007200

slyd's Issues

speaker notes

i kept thinking it'd be cool if my device used a special hash in the url, which showed speaker notes overlayed on the slides with backdrop filter.

would need a server with a socket service, BUT could potentially piggy back on browsersync

change class color syntax to attributes

.brand-color-1 should be color="brand-1"

virtualization

only have the next 1 slide in any direction visible, otherwise, hidden
should help accessibility tab around as well 👍

backdrop-filter

create a way or just let folks author it?

backface visibility

curious if there are any perf wins by specifying this

background image on all slides even when not used

perf issue

embedded video keeps playing after slide goes out

depth api

should be able to control some depth aspects on the node via attributes

keyboard nav focus shift

when pressing "right", focus needs set to the next css column or new up/down dont work

<video>

needs autoplay set when slyd is active
needs lazyload strategy

fit 1920x1280 better

min and max in the responsive settings need tweaked and verified across screens

iOS support

so far seems js will need to solve it, need to look into snap point polyfills

allow dynamic sizing of code blocks

web bluetooth gamepad support

up
down
left
right
click
fullscreen
exit fullscreen / esc

list gradients

i keep thinking that it would be neat to see the numbers in lists be more of a gradient. they feel very pushed back right now, but in a flat way

REPL-like

https://twitter.com/mattdesl/status/1161648126530326532?s=09

intersection observer polyfill

lists can only go up to 9

need a clever way to reset counters, custom props is likely the savior

currently spacebar works great to move forward, but stops when you reach the end of a column. it should transition to the next column and set focus on that column so keyboard nav can continue to advance.