dacsslide 0.3.1+1

Dart CSS presentation framework

DaCSSlide

Port of JaCSS - tiny "framework" for building pure CSS3-animation based presentations.

Examples

• Starter kit: http://olostan.github.io/dacsslide_starter/ (source code: https://github.com/olostan/dacsslide_starter )
• From web folder of this repository: http://olostan.github.io/dacsslide/dacsslide.html

Advanced usage:

• http://olostan.github.io/dacsslide_video/
• http://olostan.github.io/slides_twinui2/
• http://slides.olostan.name/dartFlight/dartflightslides.html

Example

Example could be found in web folder.

In HTML file you need to speicfy "symbols":

<presentation slides="8" class="hidden">
      <symbol id="hello">
        Hello {{world}}
      </symbol>
      <symbol id="center">
        Center
      </symbol>
</presentation>

And in SCSS file you need to specify behaviour (Note: syntax below is using DACSSlide additions to SCSS):

#center {
  opacity:0;
}
.s2 {
  #hello: move(50,100);
   
  #center {
    background-color:red;
    opacity:1;
    ::up(20);
  }
}
.s3 {
  #hello:move(+100,+100);
}
...

Where .sN means behaviour for slide (keyframe) N.

Each symbol can have track property if it can change it's width or height (in case of asynchronously loaded symbols).

How to run

You can start webdev serve and open http://localhost:8080