dacsslide 0.2.1

DaCSSlide Build Status

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).

Changelog

##0.2.1

Added speaker comments support. Just add

<comment slide="1">Some comment</comment>

##0.2.0

Added possibility to change units. put anywhere

/* dacsslide.units = vmax */

All transform operators will use that units.

BREAKING CHANGE Now if modifier has several parameters but was called with less, it will use last specified parameter (previously it used X-axis). E.g. scale(2) will produce scaleX(2) scaleY(2) and not just scaleX(2) like before. Same for rotate. Please add axis modifier to have previous behavior.

BREAKING CHANGE scale modifier now accept 2 parameters (X and Y). If you need scaling on Z-axis, you can use scaleZ.

##0.1.3

Switched to Angular 4.

##0.1.2

Adding event listeners directly, not through EventManager. DDC friendly.

##0.1.1

Angular 2.

0.0.15

  • Added support of additional parameters in URL hash (Appended by &). Could be used by other plugins, like remote controller.

0.0.14

  • Tracking symbols by default. Symbols can be not auto-centralized by setting fixed=true on symbol.

0.0.12

  • Aded "track" property to track symbol's width/height.

0.0.11

  • Aded inline syntax. Added opacity function.

0.0.10

  • Aded delay functions. Removed relative modifier for move. Added documentation for functions.

0.0.9

  • Added shortened relative modifiers (up, down, left, right) and tests

0.0.8

  • Added DACSSlie extension to SCSS syntax

0.0.7

  • Added CSSLib transform so now it is possible to use nested CSS rules and other features provided by CSSLib

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  dacsslide: "^0.2.1"

2. Install it

You can install packages from the command line:

$ pub get

Alternatively, your editor might support 'pub get'. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:dacsslide/presentation_component.dart';
import 'package:dacsslide/sample_directive.dart';
import 'package:dacsslide/scss_transformer.dart';
import 'package:dacsslide/transformer.dart';

Platforms

About

Dart CSS presentation framework

Author

Email olostan@gmail.com Valentyn Shybanov

Homepage

github.com/olostan/dacsslide

Documentation

www.dartdocs.org/documentation/dacsslide/0.2.1/

Uploader

olostan@gmail.com

Published

Oct 16, 2017

Share