Skip to content

How to use it V1

Jump to bottom
Jean-François Garreau - Binomed edited this page Mar 31, 2020 · 1 revision

How to use it:

Npm (come later not active yet)

# run
$npm install sfeir-school-theme

Cloning the repo

Let's consider that the path to reveal engine is at $REVEAL_PATH

Clone the repository in your project ($SFEIR_THEME_PATH)

Link

According that $SFEIR_THEME_PATH is the base path of the theme In your reveal index.html add the following lines:

...
<head>
    ...
    <!-- For syntax highlighting : Use Tomorrow.css -->
    <link rel="stylesheet" href="$REAVEAL_PATH/highlight.js/src/styles/tomorrow.css">

    ...
    <!-- Sfeir Theme includes -->
    <link rel="stylesheet" href="$SFEIR_THEME_PATH/dist/css/sfeir-school-theme.css" id="theme">
    <script type="module" src="$SFEIR_THEME_PATH/dist/js/sfeir-theme.js"></script>
</head>
...

Enjoy!

RevealJS

This theme use target for RevealJS so all you can do with RevealJS is available with theme.

Features

  • Specifics slides management:
    • First Slide
    • Speaker Slide
    • Transitions Slides
    • Multiples backgrounds
  • Code Higlighting (sequential highlighting will come after)
    • Choice of Dark code or Light code
    • Choice of font
  • Two columns layout
  • Somes helpers for images
  • Easyer management of restitution slides.
  • Expose some custom properties corresponding to the theme.
  • As it's controlled by class, it's compatible with markdown syntax or html

Specifics Slides

First slide

<!-- .slide: class="first-slide" sfeir-level="1" sfeir-techno="pwa" -->

# **Welcome to Sfeir School**
## **PWA 100**

  • Attribute: sfeir-level could change from 1 to 3
  • Attribute: sfeir-techno display the technology of the sfeir school in the badge of sfeir school.

For the class, you can alseo add class first-pinkor first-red to use the pink background or red background.

Here is for example, an alternative with sfeir-level 2 and class first-red

Sfeir School presentation Slide

<!-- .slide: class="school-presentation" -->

<div class="wifi">
    <span class="key">wifi:</span><span>SSID</span><br>
    <span class="key">mdp:</span><span>PASSWORD</span>
</div>

Speaker Slide

<!-- .slide: class="speaker-slide" -->

# Présentation

![speaker](./assets/images/jf.jpg)
![company](./assets/images/logo_sfeir_bleu_orange.png)
![badge](./assets/images/gde.png)

## Jean-François Garreau

### CTO front

### @jefbinomed

Transitions slides

<!-- .slide: class="transition" -->

# Management of custom slides

You can use those class for transitions slides :

  • transition: will position the title in the bottom of the slide
  • transition-white: the text will be in white
  • transition-center: the text will be center vertically
  • sfeir-bg-red / sfeir-bg-pink / sfeir-bg-blue / sfeir-bg-white-4 : use the dedicate slide.

Custom Slide with text in white

<!-- .slide: class="transition-white" data-background="#333" -->

# A White Transition Slide

Custom Slide with text center

<!-- .slide: class="transition-center" -->

# A White Transition Slide with text center

Custom Backgrounds

Here is the list of possible backgrounds :

  • sfeir-bg-red

  • sfeir-bg-pink

  • sfeir-bg-blue

  • sfeir-bg-white-1

  • sfeir-bg-white-2

  • sfeir-bg-white-3

  • sfeir-bg-white-4

  • sfeir-bg-white-5

  • sfeir-bg-white-6

  • sfeir-bg-white-7

  • sfeir-bg-white-8

Different Layout

Two column layout

<!-- .slide: class="two-column-layout"-->

# A Title

##--##

content left

##--##

content right

Slides with code

You should use triple ` sufix by the langage. Code slides in Reveal are based on highlight.js. Please refer Highlight site to see the support of langages.

<!-- .slide: class="with-code" -->

## Some Code (with monospace font)


` ` `xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        />
</LinearLayout>
` ` `

You can also use class to customise the slide:

  • with-code-dark: to use a dark theme (default is light theme)

  • consolas: will use consolas font

  • inconsolata: will use inconsolata font

  • big-code: will use a big size of font

Use an other HighlightJS theme

HighlightJS propose lots of themes that could use.

  1. Choose your theme : https://highlightjs.org/static/demo/
  2. Overrides class with-code or with-code-dark in a stylesheet import in your html
// To override the highlightJS theme you can do like this

.with-code {
    @import "../../../node_modules/highlight.js/styles/tomorrow";
}
.with-code-dark {
    @import "../../../node_modules/highlight.js/styles/darcula";
}

Helpers

This theme comes with lots of css helpers to help you to position your elements simply

Center image horizontally

You could center and image with 3 different ways

<!--  First way -->
![center](./assets/images/GDG-Logo-carre.png)

<!--  Second way -->
<img class="center" src="./assets/images/GDG-Logo-carre.png">

<!--  Third way -->
<div class="center"></div>
![](./assets/images/GDG-Logo-carre.png)

Center image horizontally en vertically

You could center an element in the slide with 2 different ways

<!-- First way -->
<div class="full-center">
    <img src="./assets/images/GDG-Logo-carre.png">
</div>


<!-- Second way : add class on slide but only one image on the page! -->
<!-- .slide: class="full-center" -->


![](./assets/images/GDG-Logo-carre.png)

Use Flex to display elements with auto wrap

<!-- First way : Add on the slide the class -->
<!-- .slide: class="flex-row" -->

# Flex row alignement with auto wrap

## First way

![h-200](./assets/images/GDG-Logo-carre.png)
![h-250](./assets/images/GDG-Logo-carre.png)
![h-300](./assets/images/GDG-Logo-carre.png)
![h-200](./assets/images/GDG-Logo-carre.png)
![h-350](./assets/images/GDG-Logo-carre.png)
![h-300](./assets/images/GDG-Logo-carre.png)
![h-350](./assets/images/GDG-Logo-carre.png)
![h-200](./assets/images/GDG-Logo-carre.png)
![h-100](./assets/images/GDG-Logo-carre.png)

<!-- Second way : WARNING don't format your code!!
Else revealJS will add some '<p>' tags and destroy the layout -->
<div class="flex-row">
<img class="h-200" src="./assets/images/GDG-Logo-carre.png">
<img class="h-250" src="./assets/images/GDG-Logo-carre.png">
<img class="h-300" src="./assets/images/GDG-Logo-carre.png">
<img class="h-200" src="./assets/images/GDG-Logo-carre.png">
<img class="h-350" src="./assets/images/GDG-Logo-carre.png">
<img class="h-300" src="./assets/images/GDG-Logo-carre.png">
<img class="h-350" src="./assets/images/GDG-Logo-carre.png">
<img class="h-200" src="./assets/images/GDG-Logo-carre.png">
<img class="h-100" src="./assets/images/GDG-Logo-carre.png">
</div>

Play with images sizes

Some selectors are add to the theme to easily fix size of images in the slide. Note that RevealJS use a mecanism of perspective to preserve size. If you ask to your presentation to be with resolutions 1920x1080, all size you set in your slides will respect that, even if you are on a 1024 screen or bigger.

  • w-N: your image will have a with of N (N between 50px and 1000px by steps of 50px)
  • h-N: your image will have a height of N (N between 50px and 1000px by steps of 50px)
  • wm-N: your image will have a with-max of N (N between 50px and 1000px by steps of 50px)
  • hm-N: your image will have a height-max of N (N between 50px and 1000px by steps of 50px)

you can use thoses helpers in alt or class of your elements

Image (w-500) : 

![w-500](./assets/images/350x90.png)


Div background: 

<div style="background:red;" class="w-500 h-200"> w-500 h-200</div>

Image : 

![wm-500](./assets/images/350x90.png)


Div background: 

<div style="background:red; width:600px;" class="wm-500 h-200"> (height:600px) wm-500 h-200</div>

Full With Image

To have image that take all the horizontal space, you could use 3 ways:

<!-- First way -->
![full-width](./assets/images/logo_sfeir_bleu_orange.png)

<!-- Second way -->
<img class="full-width" src="./assets/images/logo_sfeir_bleu_orange.png">

<!-- Third way -->
<div class="full-width"></div>
![](./assets/images/logo_sfeir_bleu_orange.png)

Full Height Image

You can ask to an image to take the whole height of it's parent

<div style="height:600px; width:100%; background:red;">
    <img class="full-height" src="./assets/images/logo_sfeir_bleu_orange.png">
</div>

Float Left or Right

You can use float-right or float-left display

<!-- First way -->
![float-left](./assets/images/gde.png)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.

<!-- Second way -->
<img class="float-left" src="./assets/images/gde.png">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.

Create content for the restitution only

With this theme you can easily create content that is different between, what you will play on stage and what you will give to your attendees without a complete rewrite of your slides. This configuration is a pair between a key specified in your index.html and a key present in your slides.

Index.html Configuration

<body>
	<div class="reveal">
		<div class="slides" data-type-show="prez">
        ...
        </div>
    </div>
</body>

Slides configuration

<!-- .slide: data-type-show="prez" -->

## A slide for prez only

A few words !

The slide 'A slide for prez only' will be visible only if the attribute data-type-show on index.html is set to "prez".

With this technique, you can easily create 2 versions of your index.hml, one with data-type-show to prez and one with data-type-showto full and in your slides, you have something like that

<!-- .slide: data-type-show="prez" -->

## A slide for prez only

A few words !

##==##
<!-- .slide: data-type-show="full" -->

## A slide for publication only

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.

If nothing is set in the markdown, the slide will be available for both versions.

Clone this wiki locally