HTML-Presentation-Framework

Create with your knowledge of HTML and CSS beautiful presentations in one single HTML file with embedded images, styles and scripts for easy sharing.

Demo

Take a look: Demo presentation

Jump to the next slide with one of the following keystrokes:
→, ↓, ↡ or Enter

And go back with:
←, ↑, ↟ or Backspace

Restart the presentation with:
↖

Dependencies

You must have installed Node.js and Grunt.

The generated presentation is a single HTML file, based on jQuery and styled with CSS in the generated folder ~/HTML-Presentation-Framework/dist.

How to use

Install the local grunt project in your folder ~/HTML-Presentation-Framework/grunt:

npm install grunt

Install all required addons for our amazing workflow:

npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-rename --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-htmlmin --save-dev
npm install grunt-includes --save-dev
npm install grunt-autoprefixer --save-dev
npm install grunt-css-url-embed --save-dev

Start the workflow in your terminal:

grunt

Now, we've got a complete listener on the folder ~/HTML-Presentation-Framework/src.
Amazing!

Usage

Here is a short overview about the project structure:

css/

The CSS files written in SASS.

You should only modifiy _var.scss for the colors and layout.scss for the rest.

img/

All images you wish to embed in your presentation. For correct embedding use always a style class:

section.thats-all-folks {
	background-image: url(../src/img/thats-all-folks.jpg);
}

Use always this relative path: ../src/img/your_image.jpg

js/

The JavaScript files. You don’t have to modifiy them.

layout.html

This is the main view for the presentation.

You can change the <title> tag or modifiy what you like, but don’t delete the includes.

slides/

Yeah, the slides!

Create and rename as many files as you want, but include each in the main file _slides.html. Set the order from up to down.