aboutsummaryrefslogtreecommitdiff
path: root/README.md
diff options
context:
space:
mode:
authorEric Bidelman2012-04-21 19:30:21 -0700
committerEric Bidelman2012-04-21 19:30:21 -0700
commit482039b40d8315916460f4065e73e9806af2da81 (patch)
treee99fa441adb51c737eb7b49a1975fdc19d38abdb /README.md
parent842ac6b09e0a33f7d7fdc0e634d8ea53bd7ed656 (diff)
downloadio-slides-remote-482039b40d8315916460f4065e73e9806af2da81.tar.gz
README. Config cleanup
Diffstat (limited to 'README.md')
-rw-r--r--README.md129
1 files changed, 129 insertions, 0 deletions
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!