forked from LeaVerou/inspire.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·257 lines (232 loc) · 9.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>CSSS: A brief introduction</title>
<link href="slideshow.css" rel="stylesheet" />
<link href="theme.css" rel="stylesheet" />
<link href="talk.css" rel="stylesheet" />
<script src="prefixfree.min.js"></script>
</head>
<body data-duration="10">
<header id="intro" class="slide">
<h1>
<object data="logo.svg" width="100%" type="image/svg+xml">
<img src="logo.png" alt="CSSS: CSS-based SlideShow System" />
</object>
</h1>
<p class="attribution">By Lea Verou</p>
</header>
<section>
<header class="slide">
<h1>Introduction</h1>
</header>
<section class="slide" title="CSSS: Introduction">
<h2>What is it?</h2>
<p>A simple framework for building presentations with modern web standards</p>
<ul>
<li class="delayed">An HTML file contains the whole presentation</li>
<li class="delayed">Themes as CSS files</li>
<li class="delayed">JavaScript handles what CSS can't (keyboard shortcuts etc)</li>
</ul>
</section>
<section class="slide">
<h2>History</h2>
<ul>
<li class="delayed">I had to create a presentation for my talk at <a href="http://front-trends.com">Front Trends 2010</a></li>
<li class="delayed">The only web-based presentation systems I knew of didn't fit my needs</li>
<li class="delayed">…so I rolled up my own</li>
<li class="delayed">FT2010 attendees asked me to release it</li>
<li class="delayed">and here it is! ;-)</li>
</ul>
</section>
<section class="slide" id="navigation">
<h2>Navigation</h2>
<p>Only through keyboard for now :(</p>
<ul>
<li>→ or ↓ to advance to the next slide or incrementally displayed item</li>
<li>← or ↑ to go to the previous slide or incrementally displayed item</li>
<li>Ctrl* + → or Ctrl* + ↓ to jump to the next slide</li>
<li>Ctrl* + ← or Ctrl* + ↑ to jump to the previous slide</li>
<li>Home to go to the first slide, End to go to the last</li>
<li>Ctrl* + G to jump to an arbitrary slide (by slide number or identifier)</li>
</ul>
<p>* Ctrl or Shift actually. Only Shift works in Opera.</p>
</section>
</section>
<section>
<header class="slide">
<h1>Features</h1>
</header>
<section class="slide">
<h2>Thumbnail view</h2>
<p>Press Ctrl+H (or Shift+H if you're in Opera) now.</p>
<p class="delayed">Cool, huh? You can press Ctrl+Shift+H to see all slides (warning: can be slow!)</p>
</section>
<section class="slide">
<h2>Timer</h2>
<ul>
<li>Timer in the form of a progress bar on the top</li>
<li>Define the talk duration with the attribute <code>data-duration</code> on the <code>body</code></li>
<li>Style the timer and the end state with the selectors <code>#timer</code> and <code>#timer.end</code> respectively.</li>
</ul>
</section>
<section class="slide">
<h2>Presenter view</h2>
<p>This slide has presenter notes. They are only visible in presenter view (Ctrl+P or Shift+P).</p>
<p class="presenter-notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="slide">
<style scoped>
h2 {
font-size: 200%;
font-weight: bold;
}
</style>
<h2><code><style scoped /></code></h2>
<p>You can use the HTML5 <code>scoped</code> attribute on style elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.</p>
<p>For example, inspect this slide and then run <code>$$('style[scoped]')[0].sheet.cssRules[0].selectorText</code> in the console to see how the original selector gets changed.</p>
</section>
<section class="slide">
<h2>More features</h2>
<ul>
<li class="delayed">IDs are dynamically assigned by JavaScript…</li>
<li class="delayed">…but you can also assign your own, bringing the best of both worlds</li>
<li class="delayed">Incremental display of slide contents (just add <code>class="delayed"</code>)</li>
<li class="delayed">Slide scaling based on window size (size everything you want to be scalable in ems)</li>
<li class="delayed">Document.title changing according to slide title (fetched either from the <code>title</code> attribute or the slide's heading)</li>
</ul>
</section>
<section class="slide">
<h2>Drawbacks</h2>
<ul>
<li>Only supports modern browsers. Why?
<ul>
<li>More lightweight</li>
<li>Easier to understand code</li>
<li>It's a presentation, so the environment is controlled anyway</li>
</ul>
</li>
<li>No mouse click to advance to the next slide. I consider it annoying.</li>
<li>Doesn't work in mobile :(</li>
</ul>
</section>
</section>
<section>
<header class="slide">
<h1>Plugins</h1>
</header>
<section class="slide">
<h2>Plugin: CSS Snippets</h2>
<pre>new CSSSnippet(document.getElementById('snippet'));</pre>
<ul>
<li>Dynamically edit CSS and reflect the results in any element's style
<ul>
<li>Which one? Specify a selector with the <code>data-subject</code> attribute or leave blank for the slide to be the subject</li>
</ul>
<li>Automatically prefixes CSS3 properties/values, when needed
<ul>
<li>Also does it with the style attribute (statically) if the element is not a text field (doesn't work in IE and Firefox 3.6)</li>
</ul>
</li>
<li>Textarea automatically adjusts rows/font-size on line break (use class <code>dont-adjust</code> to turn off)</li>
</ul>
</section>
<section class="slide">
<h2>CSS Snippets demo</h2>
<p>Edit the following CSS code:</p>
<textarea class="snippet">background-color:red;
background-image: linear-gradient(red, #600)</textarea>
</section>
<section class="slide" id="animation-demo">
<h2>CSS Snippets: raw CSS</h2>
<textarea class="snippet" data-raw>@keyframes rainbow {
from, to { background: red }
16% { background: yellow }
33% { background: green }
50% { background: aqua }
66% { background: blue }
83% { background: fuchsia }
}
#animation-demo { animation: 30s rainbow infinite; }</textarea>
</section>
<section class="slide">
<h2>Plugin: CSS Controls</h2>
<ul>
<li>Use sliders and other controls to adjust CSS values
<ul>
<li>Which one? Specify a selector with the <code>data-subject</code> attribute or leave blank for the slide to be the subject</li>
<li>Specify style with <code>data-style</code> (use <code>{value}</code> where the result will be)</li>
</ul>
<li>Automatically prefixes CSS3 properties/values, when needed</li>
</ul>
</section>
<section class="slide" id="css-controls-demo">
<h2>CSS Controls demo</h2>
<label>Slide lightness:
<input type="range" min="0" max="255" value="128" data-style="background-color:rgb({value}, {value}, {value});" class="css-control" />
</label>
<label>
border-width:
<input type="number" min="0" max="60" value="30" data-style="border-width: {value}px;" class="css-control" size="5" />
</label>
<label>
font-family:
<select data-style="font-family: {value};" class="css-control">
<option selected>sans-serif</option>
<option>Georgia, serif</option>
<option>Consolas, monospace</option>
<option>'Trebuchet MS', sans-serif</option>
</select>
</label>
</section>
<section class="slide">
<h2>Plugin: Code highlight</h2>
<ul>
<li>Syntax highlighting for every <code><code></code> element with a <code>lang</code> attribute.</li>
<li>Only highlights when the slide becomes active, for performance</li>
<li>Currently only supports JavaScript, but it's easy to add any language</li>
<li>Styling done through easy to understand classes like <code>.string</code> or <code>.comment</code></li>
</ul>
</section>
<section class="slide">
<h2>Code highlight example</h2>
<pre><code lang="javascript">// Comment
document.addEventListener('DOMAttrModified',function(e) {
var node = e.target, attr = e.attrName;
if(/^input$/i.test(node.nodeName)
&& (attr === 'placeholder' || attr === 'value')
|| foo > 5)
Placeholder.update(node);
}, false);</code></pre>
</section>
</section>
<footer class="slide" title="The End">
<h2>Thank you!</h2>
<p>Get it or contribute at <a href="http://github.com/LeaVerou/CSSS">http://github.com/LeaVerou/CSSS</a></p>
<p>Credits:</p>
<ul>
<li><a href="http://lukeroberts.us/2008/12/wallpaper-colourful-wood/">Colored wood background by Luke Roberts</a></li>
<li>The name CSSS is actually inspired by S5, as you could probably guess ;-)</li>
<li>A big thanks to the community at Github for various contributions to this project</li>
</ul>
</footer>
<script src="slideshow.js"></script>
<script src="plugins/css-edit.js"></script>
<script src="plugins/css-snippets.js"></script>
<script src="plugins/css-controls.js"></script>
<script src="plugins/code-highlight.js"></script>
<script>
var slideshow = new SlideShow();
var snippets = document.querySelectorAll('.snippet');
for(var i=0; i<snippets.length; i++) {
new CSSSnippet(snippets[i]);
}
var cssControls = document.querySelectorAll('.css-control');
for(var i=0; i<cssControls.length; i++) {
new CSSControl(cssControls[i]);
}
</script>
</body>
</html>