aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.html104
-rw-r--r--README.md129
-rwxr-xr-xserve.sh2
-rw-r--r--slide_config.json6
4 files changed, 234 insertions, 7 deletions
diff --git a/README.html b/README.html
new file mode 100644
index 0000000..3f586de
--- /dev/null
+++ b/README.html
@@ -0,0 +1,104 @@
1<style>
2@import "http://fonts.googleapis.com/css?family=Open Sans:regular,semibold,italic,italicsemibold|Inconsolata&amp;v2";
3body {
4 font-family: "Open Sans";
5 margin: 6em 2em 2em 2em;
6}
7body:before {
8 content: '';
9 position: fixed;
10 top: 2%;
11 right: 3%;
12 height: 100px;
13 width: 100px;
14 background: url(http://www.html5rocks.com/static/images/identity/HTML5_Badge_128.png) no-repeat 50% 50%;
15 background-size: contain;
16 z-index: 10;
17}
18h1, h2, h3, h4 {
19 font-weight: 600;
20}
21h1 {
22 position: fixed;
23 background: -webkit-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
24 background: -moz-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
25 background: -ms-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
26 background: -o-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
27 width: 100%;
28 height: 80px;
29 padding: 10px 10px 10px 1em;
30 left: 0;
31 top: 0;
32 margin: 0;
33}
34h1 img {
35 height: 30px;
36 vertical-align: middle;
37 margin-bottom: 8px;
38}
39a { color: navy; }
40pre {
41 background: #eee;
42 margin-left: 2em;
43 padding: 5px;
44 border-left: 3px solid #ccc;
45}
46</style>
47
48<h1><img src="images/io2012_logo.png"> HTML5 Slide Template</h1>
49
50<h2>Configuring the slides</h2>
51<p>Much of the deck is customized by changing the settings in <a href="slide_config.json"><code>slide_config.json</code></a>.
52Some of the customizations include the title, Analytics tracking ID, speaker
53information (name, social urls, blog), web fonts to load, themes, and other
54general behavior.</p>
55<h3>Customizing the <code>#io2012</code> hash</h3>
56<p>The bottom of the slides include <code>#io2012</code> by default. If you'd like to change
57this, please update the variable <code>$social-tags: '#io2012';</code> in
58<a href="theme/scss/default.scss"><code>/theme/scss/default.scss</code></a>.</p>
59<p>See the next section on "Editing CSS" before you go editing things.</p>
60<h2>Editing CSS</h2>
61<p><a href="http://compass-style.org/install/">Compass</a> is a CSS preprocessor used to compile
62SCSS/SASS into CSS. We chose SCSS for the new slide deck for maintainability,
63easier browser compatibility, and because...it's the future!</p>
64<p>That said, if not comfortable working with SCSS or don't want to learn something
65new, not a problem. The generated .css files can already be found in
66(see <a href="theme/css"><code>/theme/css</code></a>). You can just edit those and bypass SCSS altogether.
67However, our recommendation is to use Compass. It's super easy to install and use.</p>
68<h3>Installing Compass and making changes</h3>
69<p>First, install compass:</p>
70<pre><code>sudo gem update --system
71sudo gem install compass
72</code></pre>
73<p>Next, you'll want to watch for changes to the exiting .scss files in <a href="theme/scss"><code>/theme/scss</code></a>
74and any new one you add:</p>
75<pre><code>$ cd io-2012-slides
76$ compass watch
77</code></pre>
78<p>This command automatically recompiles the .scss file when you make a change.
79Its corresponding .css file is output to <a href="theme/css"><code>/theme/css</code></a>. Slick.</p>
80<p>By default, <a href="config.rb"><code>config.rb</code></a> in the main project folder outputs minified
81.css. It's a best practice after all! However, if you want unminified files,
82run watch with the style output flag:</p>
83<pre><code>compass watch -s expanded
84</code></pre>
85<p><em>Note:</em> You should not need to edit <a href="theme/scss/_base.scss"><code>_base.scss</code></a>.</p>
86<h2>Running the slides</h2>
87<p>The slides can be run locally from <code>file://</code> making development easy :)</p>
88<h3>Running from a web server</h3>
89<p>If at some point you should need a web server, use <a href="serve.sh"><code>serve.sh</code></a>. It will
90launch a simple one and point your default browser to <a href="http://localhost:8000/template.html"><code>http://localhost:8000/template.html</code></a>:</p>
91<pre><code>$ cd io-2012-slides
92$ ./serve.sh
93</code></pre>
94<p>You can also specify a custom port:</p>
95<pre><code>$ ./serve.sh 8080
96</code></pre>
97<h3>Presenter mode</h3>
98<p>The slides contain a presenter mode feature (beta) to view + control the slides
99from a popup window.</p>
100<p>To enable presenter mode, add <code>presentme=true</code> to the URL: <a href="http://localhost:8000/template.html?presentme=true">http://localhost:8000/template.html?presentme=true</a></p>
101<p>To disable presenter mode, hit <a href="http://localhost:8000/template.html?presentme=false">http://localhost:8000/template.html?presentme=false</a></p>
102<p>Presenter mode is sticky, so refreshing the page will persist your settings.</p>
103<hr />
104<p>That's all she wrote!</p> \ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..96dab9d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,129 @@
1<style>
2@import "http://fonts.googleapis.com/css?family=Open Sans:regular,semibold,italic,italicsemibold|Inconsolata&amp;v2";
3body {
4 font-family: "Open Sans";
5 margin: 6em 2em 2em 2em;
6}
7body:before {
8 content: '';
9 position: fixed;
10 top: 2%;
11 right: 3%;
12 height: 100px;
13 width: 100px;
14 background: url(http://www.html5rocks.com/static/images/identity/HTML5_Badge_128.png) no-repeat 50% 50%;
15 background-size: contain;
16 z-index: 10;
17}
18h1, h2, h3, h4 {
19 font-weight: 600;
20}
21h1 {
22 position: fixed;
23 background: -webkit-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
24 background: -moz-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
25 background: -ms-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
26 background: -o-linear-gradient(top, rgb(238,238,238) 65%, rgba(238,238,238,0));
27 width: 100%;
28 height: 80px;
29 padding: 10px 10px 10px 1em;
30 left: 0;
31 top: 0;
32 margin: 0;
33}
34h1 img {
35 height: 30px;
36 vertical-align: middle;
37 margin-bottom: 8px;
38}
39a { color: navy; }
40pre {
41 background: #eee;
42 margin-left: 2em;
43 padding: 5px;
44 border-left: 3px solid #ccc;
45}
46</style>
47
48<h1><img src="images/io2012_logo.png"> HTML5 Slide Template</h1>
49
50## Configuring the slides
51
52Much of the deck is customized by changing the settings in [`slide_config.json`](slide_config.json).
53Some of the customizations include the title, Analytics tracking ID, speaker
54information (name, social urls, blog), web fonts to load, themes, and other
55general behavior.
56
57### Customizing the `#io2012` hash
58
59The bottom of the slides include `#io2012` by default. If you'd like to change
60this, please update the variable `$social-tags: '#io2012';` in
61[`/theme/scss/default.scss`](theme/scss/default.scss).
62
63See the next section on "Editing CSS" before you go editing things.
64
65## Editing CSS
66
67[Compass](http://compass-style.org/install/) is a CSS preprocessor used to compile
68SCSS/SASS into CSS. We chose SCSS for the new slide deck for maintainability,
69easier browser compatibility, and because...it's the future!
70
71That said, if not comfortable working with SCSS or don't want to learn something
72new, not a problem. The generated .css files can already be found in
73(see [`/theme/css`](theme/css)). You can just edit those and bypass SCSS altogether.
74However, our recommendation is to use Compass. It's super easy to install and use.
75
76### Installing Compass and making changes
77
78First, install compass:
79
80 sudo gem update --system
81 sudo gem install compass
82
83Next, you'll want to watch for changes to the exiting .scss files in [`/theme/scss`](theme/scss)
84and any new one you add:
85
86 $ cd io-2012-slides
87 $ compass watch
88
89This command automatically recompiles the .scss file when you make a change.
90Its corresponding .css file is output to [`/theme/css`](theme/css). Slick.
91
92By default, [`config.rb`](config.rb) in the main project folder outputs minified
93.css. It's a best practice after all! However, if you want unminified files,
94run watch with the style output flag:
95
96 compass watch -s expanded
97
98*Note:* You should not need to edit [`_base.scss`](theme/scss/_base.scss).
99
100## Running the slides
101
102The slides can be run locally from `file://` making development easy :)
103
104### Running from a web server
105
106If at some point you should need a web server, use [`serve.sh`](serve.sh). It will
107launch a simple one and point your default browser to [`http://localhost:8000/template.html`](http://localhost:8000/template.html):
108
109 $ cd io-2012-slides
110 $ ./serve.sh
111
112You can also specify a custom port:
113
114 $ ./serve.sh 8080
115
116### Presenter mode
117
118The slides contain a presenter mode feature (beta) to view + control the slides
119from a popup window.
120
121To enable presenter mode, add `presentme=true` to the URL: [http://localhost:8000/template.html?presentme=true](http://localhost:8000/template.html?presentme=true)
122
123To disable presenter mode, hit [http://localhost:8000/template.html?presentme=false](http://localhost:8000/template.html?presentme=false)
124
125Presenter mode is sticky, so refreshing the page will persist your settings.
126
127---
128
129That's all she wrote!
diff --git a/serve.sh b/serve.sh
index 825b7cc..9663bad 100755
--- a/serve.sh
+++ b/serve.sh
@@ -12,4 +12,4 @@ then
12 port=8000 12 port=8000
13fi 13fi
14 14
15open http://localh