slides-revealjs-dasa

View Github Repository Open presentation in a new window

RiaanBurger

See all presentation from RiaanBurger

slides-revealjs-dasa

0 0

slides-revealjs-dasa

Slides for "DASS Reveal.js Theme"

On Github RiaanBurger / slides-revealjs-dasa

Slides with Reveal.js

DASA Reveal.js Theme

Drupal Association South Africa

Reference

Reveal.js Series:

Technology

A few front-end technologies you will use to make your own theme.

A Little:

  • CoffeeScript
  • Grunt

More:

  • SASS
  • Web Fonts

Compass & Sass

Sass

Syntactically Awesome Stylesheets (Sass) is a stylesheet language.

Compass

An extensive Sass add-on!

Sass

To make use of Sass, during your yo reveal scaffolding,

Answer y (yes) to this question:

[?] Do you want to use SASS to create a custom theme?
This requires you to have Ruby and Sass installed. (y/N)

Install Compass

Compass does not come with yo's reveal.js generator.

We'll install it.

npm install grunt-contrib-compass

Configure for Compass

Configure (Grunt for) Compass

Edit Gruntfile.coffee:

  • Replace occurrences of sass with compass

  • Add some Compass variables:

        compass:

            dist:
                options:
                    basePath: ''
                    sassDir: 'css/source'
                    cssDir: 'css'
                    imagesDir: 'css'
                    fontsDir: 'css/fonts'

Assets

Consider and plan and prepare your assets.

Slides

Theme Images

Fonts

Deploy Assets

Slides

Planned naming may help manage your assets:

  • These sort better when you have a lot.
  • But do not refactor very easily.

Example list.json:

[
    [
        "00-00-title.md",
        "00-01-reference.md",
        "00-02-tech.md"
    ],
    [
        "01-00-sass-n-compass.md",
        "01-01-sass-select.md",
        "01-02-compass-install.md"
    ]
]

Images

  • If others will use the slides, version control the PSDs.

  • Great PSDs:

    • Use vector designs,
    • smart objects and
    • non-destructive editing.

  • The DASA logo is in css/img/logo/logo.psd.

  • Always minify or use TinyPng.org for your PNGs.

Fonts

  • Gather your fonts.

  • Don't use Google's online hosted font solution for slides.

    • Slides should work off-line for your presentations too.

  • Use Font Squirrel Webfont Generator to create the webfont format files you will need from your TTFs:

    • EOT: for Internet Explorers older than 9.
    • TTF: for all except IE<9, but old format.
    • SVG: for Apple devices.
    • WOFF: Preferred modern format.

Deploy Assets

  • Tell Grunt to Copy our additional assets during deploy:

Gruntfile.coffee

        copy:
            dist:
                files: [{
                    expand: true
                    src: [
                        'slides/**'
                        'bower_components/**'
                        'js/**'
                        'css/*.css'
                        'css/fonts/**'
                        'css/img/**'
                    ]
                    dest: 'dist/'
                }...

Theme

The theme is a combination of:

  • templates/_index.html and

  • css/theme.css which is generated from css/source/theme.scss

templates/_index.html

For the DASA theme we only added a link to the DASA site.

Add it to the bottom of, inside the div.reveal element:

<a id="dasa-signature" href="http://dasa.org.za"
  title="Drupal Associtation South Africa">Drupal Associtation South Africa</a>

css/source/theme.scss

Starting DASA theme with some ASCII art and then import Compass

/******************************************************************************/
/*   ____    _    ____    _                                                   */
/*  |  _ \  / \  / ___|  / \                                                  */
/*  | | | |/ _ \ \___ \ / _ \                                                 */
/*  | |_| / ___ \ ___) / ___ \    Theme for Reveal.js                         */
/*  |____/_/   \_\____/_/   \_\   Drupal Association South Africa             */
/*                                                                            */
/******************************************************************************/
  /* Theme for Reveal.js                                                    */
  /**************************************************************************/
     @import "compass";

Indenting your code nicely allows for code-folding in your editor.

Sass: Fonts

Always include variations of fonts as needed in the order:

normal, bold, italic, bolditalic

/******************************************************************************/
/* Fonts                                                                      */
/******************************************************************************/
  // PT Sans
    @include font-face(
      "PT Sans",
      font-files(
        "pt_sans/pt_sans-web-regular-webfont.ttf",
        "pt_sans/pt_sans-web-regular-webfont.woff",
        "pt_sans/pt_sans-web-regular-webfont.svg"
      ),
      "pt_sans/pt_sans-web-regular-webfont.eot",
      normal, normal
    );
  ...

Sass: Colours

Some initial colour variables will come in handy later:

/******************************************************************************/
/* Variables                                                                  */
/******************************************************************************/

  // Colours (DASA Text Blues)
    $cBlueLight: #0878BE;
    $cBlueDark:  #0D5B90;

  // Colours (DASA Footprint)
    $cBlue:      #1368A4;
    $cGreen:     #128E45;
    $cBlack:     #312D2E;
    $cRed:       #E81E26;
    $cYellow:    #F6C213;
  ...

Sass: Images

Use Sass functions to obtain image dimensions:

  // DASA Signature
    $dasa_sig:                        "img/logo/logo.png";
    $dasa_sig_width:                  image-width($dasa_sig);
    $dasa_sig_height:                 image-height($dasa_sig);
    $dasa_sig_margin:                 25px;

Reference

Full theme and easy to reference source of this slideshow is on:

github.com/RiaanBurger/slides-revealjs-dasa

Drupal Associtation South Africa