Skip to content

Latest commit

 

History

History
98 lines (62 loc) · 4.24 KB

cff-readme.md

File metadata and controls

98 lines (62 loc) · 4.24 KB

Cloud Foundry Foundation Modifications

For simplicity, this fork of the repo contains all of the CFF modifications and customizations.

All of the reveal.js functionality should still be available. Modifications should be additive in nature.

Developing

To make development of slides (and this reveal fork) easier, you need to use docker.

  1. Get the image:
$ docker pull rscale/node
  1. Clone this repo (if you haven't already)
  2. You should already have the developer certification repo locally (if not, go get it. we will wait).
  3. Run it with the included script (from the root of this repo):
$ ./docker-run.sh <path-to-local-reveal-clone> <path-to-slides-dir>

Example:

$ ./docker-run.sh ~/workspace/resilientscale/reveal.js ~/workspace/cloudfoundry/developer-training-course/slides

This will put you into the running docker container with the correct directory mappings (reveal + slides). In the container:

  1. cd reveal.js
  2. npm install - You likely only have to do this once.
  3. npm start
  4. In a browser, you can now navigate to http://localhost:8000?pres=<preso-folder-name> Example: http://localhost:8000?pres=cf-mocf-motivators

You can change presentations by changing the value of '' without restarting the container.

Conventions

This assumes the following:

  • Slides are in a named folder in developer-training-course/slides in a file called slides.md (i.e. developer-training-course/slides/cf-motivators/slides.md)
  • Images should be placed in developer-training-course/slides/<preso-name>/images. The folder has to be called images to avoid conflicts with global images in this repo and to make building easy.
  • Image references in slides should be relative to the <preso-name> directory: example: images/some-image.png. Background images and inline images are both supported using this convention.

Sample presentation

Check out the cf-motivators presentation for examples.

Last Slide

The last slide showing the Cloud Foundry logo is included in the index.html. You don't need to include this in markdown.

Slide Layouts

The major modification is the addition of the slide-layout plugin. This allows you to define slide types which then get processed via Javascript and CSS. Whenever possible, CSS should be used to do the work. Javascript should just manipulate css classes.

Slide types

Slide types are optional. Existing types are demonstrated in the slides.md. To use an existing type, simply annotate your markdown at the top setting the data-slide-layout to the corresponding slide type on the .slide: property.

---

<!-- .slide: data-slide-layout="build-in-quotes" ... -->

... slide content

---

Note: You can use additional properties on the .slide: declaration which are built into reveal.js (for example data-background-color). See the included sample presentation for examples.

Adding Layouts

As stated above, CSS does most of the work. The slide layout plugin simply manipulates CSS classes. It does this via a javascript processor which runs after reveal converts markdown to html, looking for the data-slide-layout values described above.

If you need to add a layout, edit the plugin/slide-layout/slide-layout.js file to define your new layout. It should be pretty easy to follow and copy the pattern. You can add new CSS classes as described below.

Note: I am not a javascript expert. If there is a better way to do this, by all means edit away.

Testing Layouts

... should be happening. My javascript foo is dusty and I didn't want to hold up the team. I will get to this ASAP.

CSS

Reveal uses scss to eliminate repetition in css code. The scss template is in css/theme/source/cff.scss. All css modifications and additions should be made here. DO NOT make changes in css/theme/cff.css as this file is automatically generated and will be overwritten.

Font-awesome

Font-awesome is already included. You can use icons by embedding html:

<i class="fa fa-twitter"></i>

You can then style (size, color, etc) using CSS.

Background Colors, Background Images, etc

Examples are included in the presentation. These are features of reveal.js so take a look at the main reveal docs.