Skip to content

Instantly share code, notes, and snippets.

@hemanth

hemanth/impress.css

Forked from tracend/impress.css
Created July 4, 2012 06:02
Show Gist options
  • Save hemanth/3045646 to your computer and use it in GitHub Desktop.
Save hemanth/3045646 to your computer and use it in GitHub Desktop.
Download ZIP
Convert a Google Presentation with Impress.js (WIP)
Raw
readme.md

This is a simple guide after trying to move one of my presentations from google docs to github, using impress.js for the presentation.

I tried to keep the modifications to a minimal so the process will be easily repeated.

Still work in progress and admittedly hit and miss at some cases...

Steps

  1. Start the presentation (in Chrome)
  2. Save the complete page with image assets
  3. Add the impress.js library in the same folder
  4. Copy the div with id=":0" to the preso template (attached)
  5. Save the preso template in the same folder
  6. Change the id from "main" to "impress"
  7. String search for containers with the class "slide" and preform the following actions: a) Add a "step" class b) Remove all inline styles (only on the slide container)

Example

Before: https://docs.google.com/present/view?id=dnkhtrs_89d6qc8kf4

After: http://code.kdi.co/talks/2012/html5devconf/

Notes

  • Ideally we can setup a slide class so we won't need step #7a
  • Sliding transitions would be nice to have
  • Need to find generic solutions for tweaking the formatting
Raw
impress.css
/*
... and we enhance the styles for impress.js.
*/
.step {
position: relative;
width: 900px;
padding: 40px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
font-size: 48px;
line-height: 1.5;
}
/*
Basically we remove the margin and make inactive steps a little bit transparent.
*/
.impress-enabled .step {
display: none;
margin: 0;
opacity: 0.3;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.impress-enabled .step.active {
display: block;
opacity: 1;
/* this is necessary in a stack of slides */
z-index: 9999;
}
/*
These 'slide' step styles were heavily inspired by HTML5 Slides:
http://html5slides.googlecode.com/svn/trunk/styles.css
;)
They cover everything what you see on first three steps of the demo.
*/
.slide {
display: block;
overflow: hidden;
width: 900px;
height: 700px;
padding: 40px 60px;
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
/*border-radius: 10px;*/
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
color: rgb(102, 102, 102);
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 30px;
line-height: 36px;
letter-spacing: -1px;
}
.slide q {
display: block;
font-size: 50px;
line-height: 72px;
margin-top: 100px;
}
.slide q strong {
white-space: nowrap;
}
/* Google Presentation specific styles */
.placeholder.background{
position: absolute;
z-index: -1;
background: #fff;
}
Raw
preso.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>{{PRESENTATION_TITLE}}</title>
<link href="impress.css" rel="stylesheet" />
<head>
<body>
<!-- place container with id=":0" here -->
<script src="impress.js"></script>
<script>impress().init();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment