Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

adding sample

  • Loading branch information...
commit 0bcf88df14b42c427fae167c9e8047173520ac65 1 parent ea1f17b
@geraldb geraldb authored
Showing with 74 additions and 3 deletions.
  1. +5 −0 README.markdown
  2. +65 −0 sample.markdown
  3. +4 −3 slides.html.erb
View
5 README.markdown
@@ -30,6 +30,11 @@ Now you're ready to use it using the `-t/--template` switch. Example:
That's it.
+## Samples
+
+See a sample in Markdown in the repo titled ['CSSS: Introduction'](https://raw.github.com/geraldb/slideshow-csss/master/sample.markdown).
+
+
## Questions? Comments?
Questions? Comments?
View
65 sample.markdown
@@ -0,0 +1,65 @@
+title: CSSS: Introduction
+author: Lea Verou
+
+%% todo: add support for breaking slides on h2 instead of h1 to s9 generator
+
+
+!SLIDE
+
+## What is it?
+
+A simple framework for building presentations with modern web standards
+
+- An HTML file contains the whole presentation
+- Themes as CSS files
+- JavaScript handles what CSS can't (keyboard shortcuts etc)
+
+
+!SLIDE
+
+## History
+
+- I had to create a presentation for my talk at [Front Trends 2010](http://front-trends.com)
+- The only web-based presentation systems I knew of didn't fit my needs
+- ...so I rolled up my own
+- FT2010 attendees asked me to release it
+- and here it is! ;-)
+
+
+!SLIDE
+
+## Feature: Timer
+
+- Timer in the form of a progress bar on the top
+- Define the talk duration with the attribute `data-duration` on the `body`
+- Style the timer and the end state with the selectors `#timer` and `#timer.end` respectively.
+
+
+!SLIDE
+
+## More Features
+
+- IDs are dynamically assigned by JavaScript...
+- ...but you can also assign your own, bringing the best of both worlds
+- Incremental display of slide contents (just add `class="delayed"`)
+- Slide scaling based on window size (size everything you want to be scalable in ems)
+- Document.title changing according to slide title (fetched either from the `title`
+ attribute or the slide's heading)
+
+
+!SLIDE
+
+## Drawbacks
+
+- Only supports Firefox 3.6+, the latest Chrome/Safari or Opera 10.60+. Why?
+ - More lightweight
+ - Easier to understand code
+ - It's a presentation, so the environment is controlled anyway
+- No mouse click to advance to the next slide. I consider it annoying.
+
+
+!SLIDE
+
+## Continued...
+
+To be done
View
7 slides.html.erb
@@ -19,6 +19,7 @@
<link href="<%= "#{@name}.css" %>" rel="stylesheet" />
</head>
+<!-- GB: todo: add duration header/property -->
<body data-duration="45">
<header id="intro" class="slide">
@@ -27,7 +28,7 @@
</header>
<section class="slide" id="navigation">
- <h2>Navigation</h2>
+ <h2>CSSS Navigation</h2>
<p>Only through keyboard for now :(</p>
<ul>
<li>→ or ↓ to advance to the next slide or incrementally displayed item</li>
@@ -40,8 +41,8 @@
<p>* Ctrl or Shift actually. Only Shift works in Opera.</p>
</section>
- <section class="slide" id="navigation2">
- <h2>Navigation Cont.</h2>
+ <section class="slide">
+ <h2>CSSS Navigation Cont.</h2>
<p>Thumbnail view</p>
<ul>
Please sign in to comment.
Something went wrong with that request. Please try again.